溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容介紹了“怎么用JavaScript編寫簡單的抽獎程序”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！
1.需求說明
某公司年終抽獎，需要有如下功能
1）可以根據實際情況設置到場人數的***值
2） 點擊“開始”，大屏幕滾動，點擊“停止”，獲獎者的編號出現在大屏幕上
3）在界面里顯示全部獎項獲獎人編號
4）不重復獲獎
5）不會因為輸入錯誤而導致抽獎結果異常。
2.代碼呈上
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 TRANSITIONAL//EN"> <html> <head> <title>某公司周年慶抽獎</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script language="javascript"> var timer; var flag = new Array(100); var existingnum = new Array(100); var clickTimes = 0; var randnum; var cellnum =1; var mobile; var num ; function check_input(){ var input = document.getElementById("real_num").value; var re = /^[1-9]+[0-9]*]*$/; if (!re.test(input)){ alert("請輸入正整數"); window.location.href=window.location.href; return false; } } //get the random numbers from the mobile array every 0.05s function setTimer(){ timer = setInterval("getRandNum();",50); document.getElementById("start").disabled = true; document.getElementById("end").disabled = false; } function getRandNum(){ document.getElementById("result").value = mobile[GetRnd(0,num)]; } function GetRnd(min,max){ randnum = parseInt(Math.random()*(max-min+1)); return randnum; } //------------------------------------------------ //turn the input's running down function clearTimer(){ noDupNum(); clearInterval(timer); document.getElementById("start").disabled = false; document.getElementById("end").disabled = true; } // Re defined array:change the length of the array and delete the checked one function noDupNum(){ mobile.removeEleAt(randnum); var o = 0; for(p=0; p<mobile.length;p++){ if(typeof mobile[p]!="undefined"){ mobile[o] = mobile[p]; o++; } } num = mobile.length-1; } function setValues(){ document.getElementById(cellnum).value = document.getElementById("result").value ; cellnum++; } function set_array(){ var real_num = document.getElementById("real_num").value ; mobile= new Array(real_num); var o = 0; for(i=1; i<=real_num;i++){ mobile[o] = i; o++; } num = mobile.length-1; document.getElementById("set_number").disabled = true; } Array.prototype.removeEleAt = function(dx){ if(isNaN(dx)||dx>this.length){return false;} this.splice(dx,1); } </script> </head> <body> <center> <div id="main"> <div> <h2>獲獎小伙伴</h2> <p> <input id="result" type="text" size="30" style="height:130px;width:800px;border:2px solid red;font-size:120;" readonly/> </p> <p> <input id="start" type="button" value="開始" style="border: 1px solid; border-color: #aaa 000 #000 #aaa;width:4em; background: #fc0;" onclick="setTimer()" /> <input id="end" type="button" value="停" style="border: 1px solid; border-color: #aaa 000 #000 #aaa;width:4em; background: #fc0;"onclick="clearTimer();setValues();" disabled/> </p> <p><strong>一等獎（1名）</strong></p> <table width="190" height="30" border="1"> <tr> <td><input name="text1" type="text" id="3" style="height:30px;width:190px;border:1px solid red;font-size:25;" size="28" readonly/></td> </tr> </table> <p>二等獎（2名）</p> <table width="380" height="30" border="1"> <tr> <td><input name="text2" type="text" id="2" style="height:30px;width:190px;border:1px solid red;font-size:25;" size="28" readonly/></td> <td><input name="text3" type="text" id="1" style="height:30px;width:190px;border:1px solid red;font-size:25;" size="20" readonly/></td> </tr> </table> </div> </div> <p></p> <p></p> <div id="setter" style="border:1px solid;width:45em"> <h4>系統設置</h4> <table width="300" height="30" border="1"> <tr> <td>活動人數</td> <td><input type="text" id="real_num" style="width:11em"></td> <td><input id="set_number" type="button" value="設置" style="border: 1px solid; border-color: #aaa 000 #000 #aaa;width:4em; background: #fc0;" onclick="check_input();set_array();"/></td> </tr> <tr> </tr> </table> <br/> <input id="set_number" type="button" value="重新開始抽獎" style="border: 1px solid; border-color: #aaa 000 #000 #aaa;width:45em;height: 3em;background: #fc0;" onclick="window.location.href=window.location.href;"/> <p></p> </div> <center> </body> </html>3.丑陋截圖
我很丑，但是我很溫柔~
“怎么用JavaScript編寫簡單的抽獎程序”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
