新聞中心
用JavaScript實(shí)現(xiàn)一個簡單的抽獎系統(tǒng),有【開始】按鈕和【停止】按鈕。
十余年的巧家網(wǎng)站建設(shè)經(jīng)驗(yàn),針對設(shè)計(jì)、前端、開發(fā)、售后、文案、推廣等六對一服務(wù),響應(yīng)快,48小時及時工作處理。營銷型網(wǎng)站的優(yōu)勢是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同,自動調(diào)整巧家建站的顯示方式,使網(wǎng)站能夠適用不同顯示終端,在瀏覽器中調(diào)整網(wǎng)站的寬度,無論在任何一種瀏覽器上瀏覽網(wǎng)站,都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì),從而大程度地提升瀏覽體驗(yàn)。成都創(chuàng)新互聯(lián)公司從事“巧家網(wǎng)站設(shè)計(jì)”,“巧家網(wǎng)站推廣”以來,每個客戶項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。
功能:
- 點(diǎn)開始按鈕開始抽獎,隨機(jī)出現(xiàn)獎品名稱;
- 點(diǎn)停止按鈕即可停止抽獎;
- 按下回車鍵可切換開始抽獎和停止抽獎。
html代碼:
創(chuàng)建html結(jié)構(gòu),最基礎(chǔ)的要含有顯示的獎品名稱和開始、停止按鈕。
抽獎系統(tǒng) 開始抽獎啦!開 始 停 止
js主要代碼片段:
首先,定義data數(shù)組,寫入各獎品名稱。并初始化timer定時器,和鍵盤事件狀態(tài)flag(一開始狀態(tài)為0,按下鍵盤變成1,再按鍵盤變成0,如此切換).
var data=['Phone7','Ipad','三星筆記本','佳能相機(jī)','惠普打印機(jī)','謝謝參與','100元充值卡','1000元超市購物券']; timer = null, flag = 0;
定義開始抽獎函數(shù)playFun();
function playFun() { var title = document.getElementById('title'); var play = document.getElementById('play'); //每次都先清除上一次的定時器任務(wù),避免抽獎效果累加頻率會越來越快 clearInterval(timer); //定時器50毫秒觸發(fā)一次 timer = setInterval(function(){ //獲取獎品下標(biāo)隨機(jī)數(shù) var random = Math.floor(Math.random() * data.length); //顯示隨機(jī)的獎品名稱 title.innerHTML = data[random]; }, 50); //改變將開始按鈕背景色 play.style.background = '#666'; }
定義停止抽獎函數(shù)stopFun();
function stopFun(){ //清除定時器即可結(jié)束抽獎 clearInterval(timer); var play = document.getElementById('play'); //改變將停止按鈕背景色 play.style.background = '#036'; }
按回車鍵切換抽獎狀態(tài)事件;
document.onkeyup = function(event){ event = event || window.event; //回車鍵鍵碼為13 if (event.keyCode == 13) { //如果狀態(tài)flag值為0則開始抽獎,并把狀態(tài)值改為1,否則停止抽獎并把狀態(tài)值改為0 if (flag == 0){ playFun(); flag = 1; }else{ stopFun(); flag = 0; } } }
js完整代碼:
var data = ['Phone7', 'Ipad', '三星筆記本', '佳能相機(jī)', '惠普打印機(jī)', '謝謝參與', '100元充值卡', '1000元超市購物券'], timer = null, //定時器 flag = 0; //用于鍵盤事件狀態(tài)標(biāo)記 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'); //每次都先清除上一次的定時器任務(wù),避免抽獎效果累加頻率會越來越快 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; }
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持創(chuàng)新互聯(lián)。
當(dāng)前標(biāo)題:基于JavaScript實(shí)現(xiàn)抽獎系統(tǒng)
文章源于:http://fisionsoft.com.cn/article/gociid.html