用JavaScript實現一個簡單的抽獎系統，有【開始】按鈕和【停止】按鈕。
功能：
- 點開始按鈕開始抽獎，隨機出現獎品名稱；
- 點停止按鈕即可停止抽獎；
- 按下回車鍵可切換開始抽獎和停止抽獎。
html代碼：
創建html結構，最基礎的要含有顯示的獎品名稱和開始、停止按鈕。
<!doctype html><html><head> <title>抽獎系統</title> <meta charset="utf-8"> <link type="text/css" rel="stylesheet" href="css/style.css"> <script type="text/javascript" src="js/script.js"></script></head><body> <div id="title" class="title">開始抽獎啦！</div> <div class="btns"> <span id="play">開 始</span> <span id="stop">停 止</span> </div></body></html>
js主要代碼片段：
首先，定義data數組，寫入各獎品名稱。并初始化timer定時器，和鍵盤事件狀態flag(一開始狀態為0，按下鍵盤變成1，再按鍵盤變成0，如此切換).
var data=['Phone7','Ipad','三星筆記本','佳能相機','惠普打印機','謝謝參與','100元充值卡','1000元超市購物券']; timer = null, flag = 0;
定義開始抽獎函數playFun();
function playFun() { var title = document.getElementById('title'); var play = document.getElementById('play'); //每次都先清除上一次的定時器任務，避免抽獎效果累加頻率會越來越快 clearInterval(timer); //定時器50毫秒觸發一次 timer = setInterval(function(){ //獲取獎品下標隨機數 var random = Math.floor(Math.random() * data.length); //顯示隨機的獎品名稱 title.innerHTML = data[random]; }, 50); //改變將開始按鈕背景色 play.style.background = '#666';}定義停止抽獎函數stopFun();
function stopFun(){ //清除定時器即可結束抽獎 clearInterval(timer); var play = document.getElementById('play'); //改變將停止按鈕背景色 play.style.background = '#036';}按回車鍵切換抽獎狀態事件；
document.onkeyup = function(event){ event = event || window.event; //回車鍵鍵碼為13 if (event.keyCode == 13) { //如果狀態flag值為0則開始抽獎，并把狀態值改為1，否則停止抽獎并把狀態值改為0 if (flag == 0){ playFun(); flag = 1; }else{ stopFun(); flag = 0; } }}js完整代碼：
var data = ['Phone7', 'Ipad', '三星筆記本', '佳能相機', '惠普打印機', '謝謝參與', '100元充值卡', '1000元超市購物券'], timer = null, //定時器 flag = 0; //用于鍵盤事件狀態標記window.onload = function() { var play = document.getElementById('play'), stop = document.getElementById('stop'); // 開始抽獎 play.onclick = playFun; stop.onclick = stopFun; // 鍵盤事件 document.onkeyup = function(event) { event = event || window.event; if (event.keyCode == 13) { if (flag == 0) { playFun(); flag = 1; } else { stopFun(); flag = 0; } } }}// 開始抽獎function playFun() { var title = document.getElementById('title'); var play = document.getElementById('play'); //每次都先清除上一次的定時器任務，避免抽獎效果累加頻率會越來越快 clearInterval(timer); timer = setInterval(function() { var random = Math.floor(Math.random() * data.length); title.innerHTML = data[random]; }, 50); play.style.background = '#999';}//停止抽獎function stopFun() { clearInterval(timer); var play = document.getElementById('play'); play.style.background = '#036';}css樣式：
* { margin: 0; padding: 0;}.title { font-size: 24px; font-weight: bold; width: 400px; height: 70px; margin: 0 auto; padding-top: 30px; text-align: center; color: #f00;}.btns { width: 190px; height: 30px; margin: 0 auto;}.btns span { font-family: '微軟雅黑'; font-size: 14px; line-height: 27px; display: block; float: left; width: 80px; height: 27px; margin-right: 10px; cursor: pointer; text-align: center; color: #fff; border: 1px solid #eee; border-radius: 7px; background: #036;}以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
