<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <style> html{ height: 100%; background: linear-gradient(rgba(196, 102, 0, 0.6), rgba(155, 89, 182, 0.6)); /* background-image:url(/1.jpg); */ } .box { /* 自动换行 */ white-space: pre-line; word-break: break-all; word-wrap: break-word; width: 250px; height: 250px; vertical-align: top; background-color: #fff; box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24); font-size: 26px; } .btn{ line-height: 32px; border-radius: 2px; font-size: 0.9em; background-color: rgb(15, 157, 88); color: white; transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1); transition-delay: 0.2s; box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26); } .bot{ width: 250px; height: 180px; vertical-align: top; background-color: #fff; box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24); } </style> <body> <div class="bot"> <h2>产生随机数</h2> 数量：<input type="text" id="num"><br> 范围：<input type="text" name="randMin" id="randMin" style="width: 25px;">~<input type="text" name="randMax" id="randMax" style="width: 25px;"><br> <br><button class="btn" id="btn">生成随机数</button><br> </div> <br> <div class="box" id="box"></div> <script> var num = document.getElementById("num").value; var randMin = document.getElementById("randMin").value; var randMax = document.getElementById("randMax").value; var btn = document.getElementById("btn"); var box = document.getElementById("box"); btn.onclick = function () { var arr = []; for (let i = 0; i < num; i++) { var randNum = parseInt(Math.random() * randMin + (randMax - randMin)); console.log(randNum); arr.push(randNum); } console.log(arr) box.innerHTML = arr; } </script> </body> </html>
