【请大神帮帮忙】自定义设置最大号,从中随机抽号且不重复。设置两个按钮,“抽取”“停止”,点击“抽取”开始抽取,并在(抽取结果展示)抽取过程中数字滚动动态展示过程,点击“停止”,数字停止滚动,并显示抽取的号码,同时在“本次抽取号码”显示,并存入到已抽取数字里面
<!DOCTYPE HTML>
<html>
<head>
<title>抽号</title>
<script type="text/javascript">
window.onload = function() {
var oBtn = document.getElementById("btn");
var oTxt = document.getElementById("txt");
var oRes = document.getElementById("result");
var oExi = document.getElementById("exist");
var arr = []; //存放号码
var maxnum;
oBtn.onclick = function() {
maxnum = parseInt(oTxt.value);
if(isNaN(maxnum) || (maxnum <= 0)) {
alert("请输入大于1的整数");
return;
}
if(maxnum==arr.length){
oTxt.value="";
alert("已生成全部号码");
return;
}
getSeat();
}
function getSeat() {
var num = Math.floor(Math.random() * maxnum) + 1;
var j;
for(j = 0; j < arr.length; j++) {
if(num == arr[j]) {
getSeat(maxnum);
break;
}
}
if(j == arr.length) {
arr.push(num);
oRes.innerHTML = num;
oExi.innerHTML = arr;
return;
}
}
}
</script>
</head>
<body>
<h1 class="wthree">抽号</h1>
<div class="container login-section">
<div class="login-w3l">
<h2 class="wthree">抽取专家</h2>
<div class="w3ls-name1">
<label class="header">最大号码(必填)</label><br/>
<input placeholder="请在里面输入号码最大值! " id="txt" name="maxnum" type="text" required="" style="BORDER-TOP-STYLE: none; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; BORDER-BOTTOM-STYLE: solid">
</div>
<Br/>
<div class="w3ls-name1">
<label class="header">抽取人(选填)</label><br/>
<input placeholder="姓名" name="name" type="text" style="BORDER-TOP-STYLE: none; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; BORDER-BOTTOM-STYLE: solid">
</div>
<br/>
<div class="w3ls-name1">
<label class="header">日期</label> <br/>
<input type="text" id="input" style="BORDER-TOP-STYLE: none; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; BORDER-BOTTOM-STYLE: solid">
<script>
//获取input元素
var _input = document.getElementById('input');
var date = new Date();
var seperator = "/";
var year = date.getFullYear();
var month = date.getMonth() + 1;
var strDate = date.getDate();
if (month >= 1 && month <= 9) {
month = "0" + month;
}
if (strDate >= 0 && strDate <= 9) {
strDate = "0" + strDate;
}
var currentDate = year + seperator + month + seperator + strDate; //当前日期
_input.value = currentDate; //赋值给input.value
_input.setAttribute('disabled', 'disabled'); //不可编辑
</script>
<br/>
<br/>
<input class='chouhao' type="submit" id="btn" value="抽取">
<input class='tingzhi' type="submit" id="btn" value="">
<button class="layui-btn" type="button" onclick="location.reload();">重置</button>
</div>
</div>
<!-- <div class="login-w3l-bg"> </div> -->
<!-- <img src="images/grid.png" alt=""/> -->
<br/>
<br/>
<div><h2 class="wthree">抽取结果1</h2></div>
<div id="Result" style="color:#40AA53">
<span id="ResultNum" style="text-align: center;display:block;">0</span>
<div style="display:none">
</div>
<br/>
<br/>
<span><h1 style="color:#ff7244;display:inline">本次抽取号码为:</h1></span>
<span id="result" style="color:#FF0000;display:inline"></span><br/>
<br/>
<span style="color:#ff7244">已抽取:</span><br/>
<!-- <span id="result" style="color:#FF0000"></span> -->
<span id="exist" style="color:#40AA53"></span>
</div>
</div>
</body>
</html>
https://blog.csdn.net/u011277123/article/details/72468002
这个重点在于逻辑,
第一步:随机产生N个数,然后组成一个数组,或者集合。
第二部:就是随机取这个数组中或者集合中一个数,取出来后,将这个数在数组中移除。
第三部:屏幕滚动的话可以遍历数组然后。搞个定时器每0.5秒输出一下数组中的值。