基于JavaScript實(shí)現(xiàn)抽獎(jiǎng)系統(tǒng)

更新時(shí)間：2018年01月16日 10:04:39 作者：小m077

這篇文章主要為大家詳細(xì)介紹了基于JavaScript實(shí)現(xiàn)抽獎(jiǎng)系統(tǒng)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

用JavaScript實(shí)現(xiàn)一個(gè)簡單的抽獎(jiǎng)系統(tǒng)，有【開始】按鈕和【停止】按鈕。

功能：

- 點(diǎn)開始按鈕開始抽獎(jiǎng)，隨機(jī)出現(xiàn)獎(jiǎng)品名稱；
- 點(diǎn)停止按鈕即可停止抽獎(jiǎng)；
- 按下回車鍵可切換開始抽獎(jiǎng)和停止抽獎(jiǎng)。

html代碼：

創(chuàng)建html結(jié)構(gòu)，最基礎(chǔ)的要含有顯示的獎(jiǎng)品名稱和開始、停止按鈕。

<!doctype html>
<html>

<head>
 <title>抽獎(jiǎng)系統(tǒng)</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">開始抽獎(jiǎng)啦！</div>
 <div class="btns">
  <span id="play">開 始</span>
  <span id="stop">停 止</span>
 </div>
</body>

</html>

js主要代碼片段：

首先，定義data數(shù)組，寫入各獎(jiǎng)品名稱。并初始化timer定時(shí)器，和鍵盤事件狀態(tài)flag(一開始狀態(tài)為0，按下鍵盤變成1，再按鍵盤變成0，如此切換).

var data=['Phone7','Ipad','三星筆記本','佳能相機(jī)','惠普打印機(jī)','謝謝參與','100元充值卡','1000元超市購物券'];
 timer = null,
 flag = 0;

定義開始抽獎(jiǎng)函數(shù)playFun();

function playFun() {
 var title = document.getElementById('title');
 var play = document.getElementById('play');
 //每次都先清除上一次的定時(shí)器任務(wù)，避免抽獎(jiǎng)效果累加頻率會(huì)越來越快
 clearInterval(timer);
 //定時(shí)器50毫秒觸發(fā)一次
 timer = setInterval(function(){
  //獲取獎(jiǎng)品下標(biāo)隨機(jī)數(shù)
  var random = Math.floor(Math.random() * data.length);
  //顯示隨機(jī)的獎(jiǎng)品名稱
  title.innerHTML = data[random];
 }, 50);
 //改變將開始按鈕背景色
 play.style.background = '#666';
}

定義停止抽獎(jiǎng)函數(shù)stopFun();

function stopFun(){
 //清除定時(shí)器即可結(jié)束抽獎(jiǎng)
 clearInterval(timer);
 var play = document.getElementById('play');
 //改變將停止按鈕背景色
 play.style.background = '#036';
}

按回車鍵切換抽獎(jiǎng)狀態(tài)事件；

document.onkeyup = function(event){
 event = event || window.event;
 //回車鍵鍵碼為13
 if (event.keyCode == 13) {
  //如果狀態(tài)flag值為0則開始抽獎(jiǎng)，并把狀態(tài)值改為1，否則停止抽獎(jiǎng)并把狀態(tài)值改為0
  if (flag == 0){
   playFun();
   flag = 1;
  }else{
   stopFun();
   flag = 0;
  }
 }
}

js完整代碼：

var data = ['Phone7', 'Ipad', '三星筆記本', '佳能相機(jī)', '惠普打印機(jī)', '謝謝參與', '100元充值卡', '1000元超市購物券'],
 timer = null, //定時(shí)器
 flag = 0; //用于鍵盤事件狀態(tài)標(biāo)記

window.onload = function() {

 var play = document.getElementById('play'),
  stop = document.getElementById('stop');

 // 開始抽獎(jiǎng)
 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;
   }
  }
 }
}
// 開始抽獎(jiǎng)
function playFun() {
 var title = document.getElementById('title');
 var play = document.getElementById('play');
 //每次都先清除上一次的定時(shí)器任務(wù)，避免抽獎(jiǎng)效果累加頻率會(huì)越來越快
 clearInterval(timer);
 timer = setInterval(function() {
  var random = Math.floor(Math.random() * data.length);
  title.innerHTML = data[random];
 }, 50);
 play.style.background = '#999';
}
//停止抽獎(jiǎng)
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)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: