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实现不重复随机抽号功能详解

总结

以上介绍了使用JavaScript实现随机抽号的基本方法,希望能为读者提供帮助。如有疑问欢迎留言,小编将及时回复。感谢大家的支持!

作者最新文章