溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文實例為大家分享了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;
}
}
};
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
