慕课网题目之js实现抽奖系统功能
编程学习 2021-07-04 17:32www.dzhlxh.cn编程入门
这篇文章主要为大家详细介绍了慕课网题目之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;
}
}
};
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持狼蚁SEO。