脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js实现抽奖系统功能

慕课网题目之js实现抽奖系统功能

 更新时间：2017年09月19日 08:50:55   作者：喵嘻嘻  
这篇文章主要为大家详细介绍了慕课网题目之js抽奖系统功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了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;
    }
  }
};

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

您可能感兴趣的文章:

相关文章

  • 微信小程序按顺序同步执行的两种方式

    微信小程序按顺序同步执行的两种方式

    这篇文章主要介绍了微信小程序按顺序同步执行的两种方式,本文通过实例代码给大家讲解，代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
    2019-12-12
  • JS数组方法push()、pop()用法实例分析

    JS数组方法push()、pop()用法实例分析

    这篇文章主要介绍了JS数组方法push()、pop()用法,结合实例形式分析了JavaScript数组push()与pop()方法基本功能、原理、使用方法与操作注意事项,需要的朋友可以参考下
    2020-01-01
  • javascript foreach中如何获取数组下标/index

    javascript foreach中如何获取数组下标/index

    这篇文章主要介绍了javascript foreach中如何获取数组下标/index问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2023-07-07
  • JavaScript 自定义弹出窗口的实现代码

    JavaScript 自定义弹出窗口的实现代码

    这篇文章主要介绍了JavaScript 自定义弹出窗口的实现代码,实现一采用html编写弹出窗口内容,实现二采用JavaScript编写弹出窗口内容,结合示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2023-09-09
  • 实例介绍JavaScript中多种组合继承

    实例介绍JavaScript中多种组合继承

    在本篇文章里小编给大家分享了关于JavaScript中多种组合继承的相关知识点内容，有需要的朋友们学习下。
    2019-01-01
  • 微信小程序页面间跳转传参方式总结

    微信小程序页面间跳转传参方式总结

    这篇文章主要给大家总结介绍了关于微信小程序页面间跳转传参方式，文中通过示例代码介绍的非常详细，对大家学习或者使用小程序具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
    2019-06-06
  • 用javascript实现画板的代码

    用javascript实现画板的代码

    用javascript实现画板的代码...
    2007-09-09
  • 基于Bootstrap的标签页组件及bootstrap-tab使用说明

    基于Bootstrap的标签页组件及bootstrap-tab使用说明

    这篇文章主要介绍了基于Bootstrap的标签页组件及bootstrap-tab使用说明,需要的朋友可以参考下
    2017-07-07
  • 使用JS获取SessionStorage的值

    使用JS获取SessionStorage的值

    这篇文章给大家介绍了使用js获取sessionstorage中的值，首先获取它是为了将获得的信息输出或者alert（),其次，在静态页面中，如果使用sessionStorage就相当于在动态页面里连接了数据库一样，具体内容详情大家参考下本文
    2018-01-01
  • ES6中Promise、async、await用法超详细讲解指南

    ES6中Promise、async、await用法超详细讲解指南

    async+await是ES6中引入的异步编程解决方案,旨在解决异步编程中的回调地狱问题,下面这篇文章主要给大家介绍了关于ES6中Promise、async、await用法超详细讲解的相关资料,需要的朋友可以参考下
    2024-08-08

最新评论