当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 学习知识题目之js实现抽奖系统功能

学习知识题目之js实现抽奖系统功能

2017年12月12日  | 移动技术网IT编程  | 我要评论

本文实例为大家分享了js实现抽奖系统功能的具体代码，供大家参考，具体内容如下

要求实现功能：

1.点击左侧按键，开始抽奖，点击右侧按键，停止抽奖；

2.敲击回车键，开始抽奖，再次敲击回车键，停止抽奖；

3.开始抽奖后，左侧按钮变色；

html： 

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>抽奖</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">开始抽奖啦！</div>
  <div id="btn">
    <span id="start">开始</span>
    <span id="stop">结束</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元话费", "ipad", "佳能相机", "苹果手机", "3ds", "switch", "1000元超市购物卡"];
var timer = null;
var flag = 0;


window.onload = function () {

  // var header = document.getelementbyid("header");优化前
  var start = document.getelementbyid("start");
  var stop = document.getelementbyid("stop");
//鼠标抽奖
  eventutil.addhandler(start, "click", getstart);
  eventutil.addhandler(stop, "click", getstop);
//键盘抽奖；
  document.onkeyup = function (event) {
    var e = event || window.event;
    //检测按键键值；
    // 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");//优化后
    timer = setinterval(function () {
      //代码优化前
      //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;
    }
  },
  //阻止事件默认行为；
  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;
    }
  }
};

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网