慕課網(wǎng)題目之js實(shí)現(xiàn)抽獎(jiǎng)系統(tǒng)功能

本文實(shí)例為大家分享了js實(shí)現(xiàn)抽獎(jiǎng)系統(tǒng)功能的具體代碼，供大家參考，具體內(nèi)容如下

成都創(chuàng)新互聯(lián)公司主要從事成都做網(wǎng)站、網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)噶爾,10余年網(wǎng)站建設(shè)經(jīng)驗(yàn),價(jià)格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):18980820575

要求實(shí)現(xiàn)功能：

1.點(diǎn)擊左側(cè)按鍵，開始抽獎(jiǎng)，點(diǎn)擊右側(cè)按鍵，停止抽獎(jiǎng)；

2.敲擊回車鍵，開始抽獎(jiǎng)，再次敲擊回車鍵，停止抽獎(jiǎng)；

3.開始抽獎(jiǎng)后，左側(cè)按鈕變色；

html：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>抽獎(jiǎng)</title>
  <link rel="stylesheet" href="style.css">
  <script src="eventUtil.js"></script>
  <script src="js.js"></script>
</head>
<body>
<div class="box">
  <div id="header">開始抽獎(jiǎng)啦！</div>
  <div id="btn">
    <span id="start">開始</span>
    <span id="stop">結(jié)束</span>
  </div>
</div>
</body>
</html>

css:

body{
  margin: 0;
  padding: 0;
}
.box{
  width: 400px;
  height: 200px;
  border: 1px solid #0C4E7C;
  margin: 0 auto;
}
#header{
  color:darkred;
  font-size: 24px;
  text-align: center;
  width: 400px;
  height: 60px;
  line-height: 60px;
}
#btn{
  width: 200px;
  overflow: hidden;
  margin: 30px auto 0;
}
#btn span{
  cursor: pointer;
  border: 2px solid #a09a09;
  border-radius: 7px;
  margin-right: 10px;
  color: #000;
  display: inline-block;
  height: 40px;
  width: 80px;
  background-color: #f2ec55;
  line-height: 40px;
  text-align: center;
}

JavaScript:

js.js:
var date = ["謝謝參與", "謝謝參與", "謝謝參與", "50元話費(fèi)", "ipad", "佳能相機(jī)", "蘋果手機(jī)", "3DS", "switch", "1000元超市購(gòu)物卡"];
var timer = null;
var flag = 0;


window.onload = function () {

  // var header = document.getElementById("header");優(yōu)化前
  var start = document.getElementById("start");
  var stop = document.getElementById("stop");
//鼠標(biāo)抽獎(jiǎng)
  eventUtil.addHandler(start, "click", getStart);
  eventUtil.addHandler(stop, "click", getStop);
//鍵盤抽獎(jiǎng)；
  document.onkeyup = function (event) {
    var e = event || window.event;
    //檢測(cè)按鍵鍵值；
    // console.log(e.keyCode);
    if (e.keyCode === 13) {
      if (flag === 0) {
        getStart();
        flag = 1;
      } else {
        getStop();
        flag = 0;
      }
    }
  };

  function getStart() {
    clearInterval(timer);
    var header = document.getElementById("header");//優(yōu)化后
    timer = setInterval(function () {
      //代碼優(yōu)化前
      //var x = parseInt(Math.random()*10);
      var random = Math.floor(Math.random() * date.length);
      header.innerHTML = date[random];
    }, 50);
    start.style.backgroundColor = "#999";
    flag = 1;
  }

  function getStop() {
    clearInterval(timer);
    start.style.backgroundColor = "#f2ec55";
    flag = 0;
  }
};

eventUtil.js

var eventUtil = {
  getEvent:function (event) {
    return event?event:window.event;
  },
  getType: function (event) {
    return event.type;
  },
  getTarget:function (event) {
    return event.target||event.srcElement;
  },
  //阻止冒泡
  stopPropagation:function (event) {
    if(event.stopPropagation){
      event.stopPropagation();
    }else {
      event.cancelBubble=true;
    }
  },
  //阻止事件默認(rèn)行為；
  preventDefault:function(event){
    if(event.preventDefault){
      event.preventDefault();
    }else {
      event.returnValue = false;
    }
  },
  //添加具柄；
  addHandler: function (element, type, Handler) {
    if (element.ç) {
      element.addEventListener(type, Handler, false);
    } else if (element.attachEvent) {
      element.attachEvent("on" + type, Handler);
    } else {
      element["on" + type] = Handler;
    }
  },
  //刪除具柄；
  removeHandler: function (element, type, Handler) {
    if (element.removeEventListener) {
      element.removeEventListener(type, Handler, false);
    } else if (element.detachEvent) {
      element.detachEvent("on" + type, Handler);
    } else {
      element["on" + type] = null;
    }
  }
};

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

文章名稱：慕課網(wǎng)題目之js實(shí)現(xiàn)抽獎(jiǎng)系統(tǒng)功能
文章出自：http://muchs.cn/article46/ghgjhg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站營(yíng)銷、網(wǎng)站制作、響應(yīng)式網(wǎng)站、微信小程序、Google、域名注冊(cè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)

成都定制網(wǎng)站網(wǎng)頁設(shè)計(jì)