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> <h1>獲獎小夥伴</h1> <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"> <h3>系統設定</h3> <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實現的簡單抽獎程式碼JavaScript
- js實現刮刮樂抽獎效果程式碼例項JS
- php實現抽獎的簡單概率演算法PHP演算法
- 簡易版抽獎小程式
- 簡單實現分行輸出的javascript程式碼JavaScript
- JavaScript實現隨機抽獎效果JavaScript隨機
- javascript實現的動畫效果簡單例項程式碼JavaScript動畫單例
- javascript實現的簡單驗證碼效果程式碼例項JavaScript
- 抽獎轉盤的簡單思路
- javascript實現的圖片簡單切換程式碼例項JavaScript
- 簡單工廠模式(simple factory)及程式碼實現模式
- 實現簡單的`Blazor`低程式碼Blazor
- JavaScript中的繼承及實現程式碼JavaScript繼承
- 九宮格抽獎–手擼程式碼
- jQuery實現的簡單投票簡單程式碼例項jQuery
- 微信小程式抽獎-翻牌微信小程式
- PHP實現的簡單日曆程式碼PHP
- js不重複抽獎效果程式碼例項JS
- 按照獎品概率分佈抽獎的實現概率分佈
- tensorflowrnn最簡單實現程式碼RNN
- Excel VBA活動抽獎小程式Excel
- 微信小程式:抽獎轉盤微信小程式
- 微信小程式翻牌抽獎效果微信小程式
- jQuery九宮格抽獎效果程式碼例項jQuery
- Android 抽獎轉盤的實現Android
- 幾句程式碼簡單實現IoC容器
- javascript如何實現模組程式設計簡單介紹JavaScript程式設計
- JavaScript抽獎效果詳解JavaScript
- 微信抽獎小程式如何製作?教你快速製作微信公眾號抽獎小程式!
- html實現簡單ListViews效果的例項程式碼HTMLView
- 一個簡單的區塊鏈程式碼實現區塊鏈
- 順序審批流的簡單程式碼實現
- 用程式碼簡單的實現跑馬燈效果
- EasyUI實現的form表單提交簡單程式碼例項UIORM
- 程式猿生存指南-2 抽獎事件事件
- 用VB編寫抽獎程式 (轉)
- javascript實現的放大效果程式碼JavaScript
- javascript閉包簡單程式碼例項JavaScript