溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
本篇內(nèi)容介紹了“怎么用JavaScript編寫簡單的抽獎程序”的有關(guān)知識，在實(shí)際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！
1.需求說明
某公司年終抽獎，需要有如下功能
1）可以根據(jù)實(shí)際情況設(shè)置到場人數(shù)的***值
2） 點(diǎn)擊“開始”，大屏幕滾動，點(diǎn)擊“停止”，獲獎?wù)叩木幪柍霈F(xiàn)在大屏幕上
3）在界面里顯示全部獎項(xiàng)獲獎人編號
4）不重復(fù)獲獎
5）不會因?yàn)檩斎脲e誤而導(dǎo)致抽獎結(jié)果異常。
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("請輸入正整數(shù)"); 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>系統(tǒng)設(shè)置</h4> <table width="300" height="30" border="1"> <tr> <td>活動人數(shù)</td> <td><input type="text" id="real_num" style="width:11em"></td> <td><input id="set_number" type="button" value="設(shè)置" 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編寫簡單的抽獎程序”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機(jī)網(wǎng)站二維碼