原生JS随机抽取号码,支持一次抽取多个号码、可限定范围抽取、自动去重
<div class="pick-range">
<span>号码抽取范围:</span>
<input type="number" id="txt1" placeholder="请在里面输入号码最小值!">
-
<input type="number" id="txt2" placeholder="请在里面输入号码最大值!">
</div>
<div class="pick-num">
<span>号码抽取个数:</span>
<input type="number" id="count" placeholder="请在里面输入号码的个数!">
</div>
<input type="button" id="btn" value="抽号" onclick="start()">
<input type="button" id="btn2" value="停止" onclick="stop()">
<div id="result">
<span>抽取结果:</span>
<span id="exist"></span>
</div>
<script type="text/javascript">
var oBtn = document.getElementById("btn");
var oBtn2 = document.getElementById("btn2");
var oTxt0 = document.getElementById("txt1");
var oTxt = document.getElementById("txt2");
var oExi = document.getElementById("exist");
var ocount = document.getElementById("count");
var result = document.getElementById("result");
var arr = [];
var loop = null;
function start(){
if(oTxt0.value == '' || oTxt0.value == ''){
alert('请输入号码范围');
clearLoop();
return;
}
let min = Number(oTxt0.value);
let max = Number(oTxt.value);
let count = Number(ocount.value);
if(min == max){
alert('请输入不同的号码');
clearLoop();
return;
}
if(min > max){
alert('号码最大值必须大于最小值');
clearLoop();
return;
}
if(!count){
alert('请输入抽取的个数');
clearLoop();
return;
}
if(count > (max - min + 1)){
alert('抽取个数必须小于或等于可抽取范围数');
return;
}
clearLoop();
loop = setInterval(function(){
arr = [];
for(let i = 0;i < count; i++){
arr.push(random(min,max))
}
fillDOM();
},100)
}
function fillDOM(){
oExi.innerHTML = arr.join('、');
}
function stop(){
clearLoop();
fillDOM();
}
function clearLoop(){
clearInterval(loop);
loop = null;
}
function random(min,max){
let randomNum = Math.floor(Math.random() * (max - min + 1)) + min;
if(arr.indexOf(randomNum) > -1){
return random(min,max);
}
return randomNum;
}
</script>
初始化:
结果: