首頁 > 文章 > web前端 > JavaScript實作抽獎系統實例分享

JavaScript實作抽獎系統實例分享

小云云原創: 2018-01-16 13:24:532628瀏覽

本文主要為大家詳細介紹了基於JavaScript實現抽獎系統，具有一定的參考價值，有興趣的小伙伴們可以參考一下，希望能幫助到大家。

用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>
  <p id="title" class="title">开始抽奖啦！</p>
  <p class="btns">
    <span id="play">开 始</span>
    <span id="stop">停 止</span>
  </p>
</body>

</html>

js主要程式碼片段：

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

var data=[&#39;Phone7&#39;,&#39;Ipad&#39;,&#39;三星笔记本&#39;,&#39;佳能相机&#39;,&#39;惠普打印机&#39;,&#39;谢谢参与&#39;,&#39;100元充值卡&#39;,&#39;1000元超市购物券&#39;];
  timer = null,
  flag = 0;

定義開始抽獎函數playFun();

function playFun() {
  var title = document.getElementById(&#39;title&#39;);
  var play = document.getElementById(&#39;play&#39;);
  //每次都先清除上一次的定时器任务，避免抽奖效果累加频率会越来越快
  clearInterval(timer);
  //定时器50毫秒触发一次
  timer = setInterval(function(){
    //获取奖品下标随机数
    var random = Math.floor(Math.random() * data.length);
    //显示随机的奖品名称
    title.innerHTML = data[random];
  }, 50);
  //改变将开始按钮背景色
  play.style.background = &#39;#666&#39;;
}

#定義停止抽獎函數stopFun();

function stopFun(){
  //清除定时器即可结束抽奖
  clearInterval(timer);
  var play = document.getElementById(&#39;play&#39;);
  //改变将停止按钮背景色
  play.style.background = &#39;#036&#39;;
}

按下回車鍵切換抽獎狀態事件；

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 = [&#39;Phone7&#39;, &#39;Ipad&#39;, &#39;三星笔记本&#39;, &#39;佳能相机&#39;, &#39;惠普打印机&#39;, &#39;谢谢参与&#39;, &#39;100元充值卡&#39;, &#39;1000元超市购物券&#39;],
  timer = null, //定时器
  flag = 0; //用于键盘事件状态标记

window.onload = function() {

  var play = document.getElementById(&#39;play&#39;),
    stop = document.getElementById(&#39;stop&#39;);

  // 开始抽奖
  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(&#39;title&#39;);
  var play = document.getElementById(&#39;play&#39;);
  //每次都先清除上一次的定时器任务，避免抽奖效果累加频率会越来越快
  clearInterval(timer);
  timer = setInterval(function() {
    var random = Math.floor(Math.random() * data.length);
    title.innerHTML = data[random];
  }, 50);
  play.style.background = &#39;#999&#39;;
}
//停止抽奖
function stopFun() {
  clearInterval(timer);
  var play = document.getElementById(&#39;play&#39;);
  play.style.background = &#39;#036&#39;;
}

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: &#39;微软雅黑&#39;;
  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;
}

JavaScript實作抽獎系統實例分享

相關文章