使用JS編寫的隨機抽取號碼的小程序

更新時間：2017年08月11日 09:50:21 作者：WXDEE

這篇文章主要介紹了使用JS編寫的隨機抽取號碼的小程序功能,非常不錯，具有參考借鑒價值，需要的朋友可以參考下

剛開始學習JavaScript，寫了一個隨機抽取號碼的小程序，附上body里的所有代碼，供大家參考。

本程序可以實現(xiàn)功能如下：

1、在文本框中輸入抽號最大值

2、點擊按鈕，開始抽號，隨機生成1~最大值之間的整數(shù)

3、已經(jīng)抽取的號碼不能再次抽取到，保證號碼的唯一性

4、將號碼結(jié)果放入result中顯示出來

5、將已經(jīng)生成的號碼存入exist中顯示出來

具體代碼如下:

<body>
  <input type="text" id="txt" placeholder="請在里面輸入號碼最大值！">
  <input type="button" id="btn" value="抽號">
  <div>
   <span>結(jié)果：</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>

運行結(jié)果如下：

總結(jié)

以上所述是小編給大家介紹的使用JS編寫的隨機抽取號碼的小程序，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

網(wǎng)頁和瀏覽器兼容性問題匯總(draft1)
由于IE擴展了許多私有的DOM、CSS等導(dǎo)致許多網(wǎng)頁的開發(fā)者都根據(jù)IE開發(fā)，才導(dǎo)致許多網(wǎng)頁的不規(guī)范，從而導(dǎo)致現(xiàn)在的瀏覽器瀏覽相同網(wǎng)頁效果不盡相同。
2009-06-06
JavaScript新增樣式規(guī)則(推薦)
這篇文章主要介紹了JavaScript新增樣式規(guī)則(推薦)的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下
2016-07-07
Vuex模塊化應(yīng)用實踐示例
這篇文章主要介紹了Vuex模塊化應(yīng)用實踐示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2020-02-02
JavaScript異步操作的方法小結(jié)
在現(xiàn)代Web開發(fā)中,異步編程是不可或缺的一部分,JavaScript通過多種方式支持異步操作,允許開發(fā)者處理非阻塞代碼執(zhí)行,從而提高應(yīng)用性能和響應(yīng)速度,本文給大家介紹了JavaScript異步操作的常見方法,需要的朋友可以參考下
2025-01-01
異步JS框架的作用以及實現(xiàn)方法
這篇文章主要介紹了異步JS框架的作用以及使用方法
2015-10-10
layui時間控件選擇時間范圍的實現(xiàn)方法
今天小編就為大家分享一篇layui時間控件選擇時間范圍的實現(xiàn)方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-09-09
Jquery 常用方法一覽表(集合)
之前腳本之家發(fā)過相關(guān)的文章，這里又是一篇關(guān)于jquery常用方法的收集整理，我們給放到一起，學習jquery的朋友可以參考下。
2010-03-03
js open() 與showModalDialog()方法使用介紹
項目開發(fā)中經(jīng)常要用到j(luò)s open() 與showModalDialog()方法，下面有個不錯的示例，喜歡的朋友可以研究下
2013-09-09
JavaScript將數(shù)組轉(zhuǎn)換成CSV格式的方法
這篇文章主要介紹了JavaScript將數(shù)組轉(zhuǎn)換成CSV格式的方法,實例分析了javascript使用valueOf方法將數(shù)組值轉(zhuǎn)換為csv格式字符串的技巧,非常具有實用價值,需要的朋友可以參考下
2015-03-03
JS中判斷某個字符串是否包含另一個字符串的五種方法
本文給大家?guī)鞪S中判斷某個字符串是否包含另一個字符串的五種方法，有string對象的方法，match() 方法，RegExp對象的方法，test() 方法，exec() 方法，具體內(nèi)容詳情大家參考下本文
2018-05-05