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

来源：懂视网责编：小OO 时间：2020-11-27 22:29:35

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

本文实例为大家分享了js实现抽奖系统功能的具体代码，供大家参考，具体内容如下：要求实现功能。1.点击左侧按键，开始抽奖，点击右侧按键，停止抽奖。2.敲击回车键，开始抽奖，再次敲击回车键，停止抽奖。3.开始抽奖后，左侧按钮变色。html。

推荐度：

导读本文实例为大家分享了js实现抽奖系统功能的具体代码，供大家参考，具体内容如下：要求实现功能。1.点击左侧按键，开始抽奖，点击右侧按键，停止抽奖。2.敲击回车键，开始抽奖，再次敲击回车键，停止抽奖。3.开始抽奖后，左侧按钮变色。html。

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

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

推荐度：

点击下载本文 文档为doc格式

标签：抽奖系统实现功能 js实现抽奖系统功能

热门焦点

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

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

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

最新推荐

猜你喜欢

热门推荐