您的位置：首页 > Web前端 > JavaScript

JavaScript实现抽奖系统，包括键盘事件

2017-02-27 22:16 363 查看

keyDown:当用户按下键盘上的任意键时触发，而且如果按住不放的话，会重复触发此事件

keyPress:当用户按下键盘上的字符键时触发，而且如果按住不放的话，会重复触发此事件

keyUp:当用户释放键盘上的键时触发

EVENT对象的keyCode属性用于得到键盘对应键的键码值

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#title {
text-align: center;
color: red;
font-size: 24px;
}

.btns {
text-align: center;
margin-top: 30px;
}

.btns span {
display: inline-block;
width: 100px;
height: 30px;
line-height: 30px;
cursor: pointer;
background: #000;
color: #fff;
border-radius: 10px;
}
</style>
</head>

<body>
<div class="" id="title">
开始抽奖啦！
</div>
<div class="btns">
<span id="start">
开始
</span>
<span id="stop">
停止
</span>
</div>
<script type="text/javascript">
var data = ["刘英帅", "李登昌", "李旭峰", "韩宇鹏", "连宇杰", "李俊奇"];
var timer = null;

window.onload = function() {
var start = document.getElementById("start");
var stop = document.getElementById("stop");
var flag = 0;
//开始抽奖
start.onclick = playFun;
stop.onclick = stopFun;
//键盘事件
document.onkeypress = function(event) {
event = event || window.event;
if(event.keyCode == 13) {//键码等于13时表明按下的是回车键
if(flag == 0) {
playFun();
flag = 1;
} else {
stopFun();
flag = 0;
}

}
}
}

function playFun() {

var title = document.getElementById("title");
var start = document.getElementById("start");
clearInterval(timer);
timer = setInterval(function() {
var random = Math.floor(Math.random() * data.length);
title.innerHTML = data[random];

}, 50)
start.style.background = '#999';
}

function stopFun() {
clearInterval(timer);
var start = document.getElementById("start");
start.style.background = '#000';
}
</script>
</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航