JavaScript实现不重复随机抽号功能详解
作者:异步漫步时间:2026-10-22 07:00:06浏览:456
本文介绍一个基于JavaScript编写的随机抽号小程序,支持设定最大值、生成不重复的随机整数,并实时显示结果与已抽取列表。通过数组遍历与标记位实现去重逻辑,适合初学者理解随机数处理与DOM操作。
JavaScript实现不重复随机抽号功能详解
本文分享一个使用JavaScript编写的简易随机抽号程序,供读者参考学习。
该程序主要实现以下功能:
1. 在输入框中设定抽取号码的最大值。
2. 点击按钮后,程序将随机生成1到最大值之间的整数。
3. 确保已抽取的号码不会再次出现,保证号码的唯一性。
4. 将当前生成的号码显示在结果区域(result)。
5. 将历史生成的号码列表保存在exist区域中展示。
具体代码实现如下:
<body>
<input type="text" id="txt" placeholder="请在里面输入号码最大值!">
<input type="button" id="btn" value="抽号">
<div>
<span>结果:</span>
<span id="result"></span>
</div>
<div>
<span>已抽取:</span>
<span id="exist"></span>
</div>
<script type="text/javascript">
var oBtn = document.getElementById("btn");
var oTxt = document.getElementById("txt");
var oRes = document.getElementById("result");
var oExi = document.getElementById("exist");
var arr = []; //存放座号
oBtn.onclick = function() {
getSeat(oTxt.value);
}
function getSeat(maxnum) {
for(var i = 0; i < maxnum; i++){
var num = Math.floor(Math.random() * maxnum) + 1;
var j;
for(j = 0; j < arr.length; j++) {
if(num == arr[j])
break;
}
if(j == arr.length) {
arr.push(num);
oRes.innerHTML = num;
oExi.innerHTML = arr;
return;
}
}
}
</script>
</body>
运行效果如下所示:

总结
以上介绍了使用JavaScript实现随机抽号的基本方法,希望能为读者提供帮助。如有疑问欢迎留言,小编将及时回复。感谢大家的支持!
作者最新文章
D3.js 比例尺与坐标轴的配置详解
2026-11-05 16:54:46
JavaScript怎么遍历对象的Symbol键和不可枚举属性
2026-11-05 13:13:39
封装一个健壮的JS字符串判空工具函数
2026-11-05 12:16:14
JavaScript合并数组的三种常用方法:concat、扩展运算符与push
2026-11-05 11:22:29
JavaScript立即执行函数(IIFE)是什么及基本语法
2026-11-05 10:51:19
