随机生成数字
在这里插入图片描述
<!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>本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2021-01-18，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
