div+js实现彩票号码生成器代码
代码语言:html
所属分类:表单美化
代码描述:div+js实现彩票号码生成器代码,可设置生成规则并调整参数。
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> *, *::before, *::after { box-sizing: border-box;} body { --c: #DDA951; background-color: #000; color: var(--c); display: grid; font-family: ui-sans-setif, system-ui, sans-serif; font-variant-numeric: tabular-nums; padding: 1ch; } button { border: 0; border-radius: 3ch; cursor: pointer; font-size: inherit; margin-block: 1ch 2ch; padding: 1.5ch 3ch; } button, legend, th { background-color: var(--c); color: #000; } fieldset { margin-block-end: 2ch; } fieldset, input { border: 1px solid currentColor; border-radius: .25em; color: currentColor; } form { font-size: small; } h1 { font-weight: 600; margin-block: 0 .5ch; } input:focus-visible { outline: 2px solid currentColor; } fieldset, label { display: grid; gap: 1ch; } legend { border-radius: .25em; padding: .5ch 1.25ch; } input { background: transparent; padding: 1ch; } table { border-spacing: 1ch; } td, th { border: 1px solid currentColor; border-radius: 50%; font-weight: 400; padding: 1ch; } @media (min-width: 700px) { body { grid-template-columns: 1fr min-content; } form { inline-size: fit-content; } } </style> </head> <body > <main> <h1>Lottery Number Generator</h1> <table id="result"></table> <button type="button" id="generate">★ Re-generate ★</button> </main> <form id="app"> <fieldset> <legend>Settings</legend> <label>Number of rows <input type="number" name="numberOfRows" value="10" required> </label> <label>Numbers per row <input type="number" name="numbersPerRow" value="5" required> </label> <label aria-label="Start Number">Numbers between <input type="number" name="startNumber" value="1" requi.........完整代码请登录后点击上方下载按钮下载查看
网友评论0