首頁 > 開發者 > JavaScript
本文執行個體為大家分享了js實現簡單的抽獎系統，供大家參考，具體內容如下
<!doctype html><html lang="en"><head> <meta charset="gb2312"> <title>抽獎活動</title> <style>*{ margin:0;padding:0;}#title{ color:red;text-align:center;margin:0 auto;width:240px;height:70px;padding-top:10px;background:opacity(0);}.btns{ width:190px;height:30px;margin:0px auto;} .btns span{ display:block;float:left;width:80px;height:28px;text-align:center;background:#036;color:#fff;cursor:pointer;border:1px solid #eee;border-radius:8px;font-family:"微軟雅黑";font-size:14px;line-height:28px;margin-right:10px;}#txt{ font-size:14px;color:#ccc999;text-align:center;margin:0 auto;width:190px;height:50px;padding-top:10px;} </style> <script> var mytype=["iPhone6s","iPad Air2","DELL外星人","鍵鼠套裝","1000元超市購物卡","200元話費儲值卡","謝謝參與","品牌耳機","港澳台7日遊","50元優惠券"],//定義獎品池 timer=null, count=0;//載入時觸發 window.onload=function(){ var start = document.getElementById("start"); var stop = document.getElementById("stop"); start.onclick=startFun;//這個函數後面加括弧，就直接調用了該函數，所以不要加 stop.onclick=stopFun; //綁定鍵盤事件 document.onkeyup=function(e){ e = e || window.event; if(e.keyCode==13){ if(count==0){ startFun(); count=1; } else{ stopFun(); count=0; } } } } //點擊開始，標題列開始輪動 function startFun(){ clearInterval(timer);//開始時，清除計時器，避免二次觸發 var title = document.getElementById("title"); var start = document.getElementById("start"); timer = setInterval(function(){ var num= Math.floor(Math.random()*mytype.length); title.innerHTML=mytype[num]; },50); start.style.background="#ccc"; } //點擊停止，標題列停止輪動並輸出輪動結果 function stopFun(){ var start = document.getElementById("start"), txt = document.getElementById("txt"), title = document.getElementById("title"); clearInterval(timer);//清除計時器，停止計時器 start.style.background="#036"; } </script><body> <div> <h2 id="title">開始抽獎！</h2> </div> <div class="btns"> <span id="start">開始</span> <span id="stop">停止</span> </div> <div id="txt">支援斷行符號鍵(Enter)開始/停止。</div></body></html>
效果圖：
想要學習更多關於javascript抽獎功能，請參考此專題：javascript實現抽獎功能
實現的功能就是這麼簡單，希望大家可以中大獎哦！
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
