涉及知识
- keyDown:当用户按下键盘上的任意键是触发,而且如果按住不放的话,会重复触发此事件
- keyPress:当用户按下键盘上的自附件是触发,而且如果按住不放的话,会重复触发此事件
- keyUp:当用户释放键盘上的键时触发
- keyCode:event对象的keyCode属性用于得到键盘对应键的键码值
- var random=Math.floor(Math.random()*data.length);//随机数取整(向下取整)
//判断是第几次敲击键盘
var flag = 0;
f(flag == 0){
playFun();//开始
flag = 1;
}else{
stopFun();//停止
flag = 0;
}
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>抽奖</title>
<link type="text/css" rel="stylesheet" href="css/style.css" />
<script src="js/style.js"></script>
</head>
<body>
<div id ="title" class="title">开始抽奖!</div>
<div class="btns">
<span id="play">开 始</span>
<span id="stop">停 止</span>
</div>
</body>
</html>
CSS
*{
margin:0;
padding:0;
}
.title {
width:400px;
height:70px;
margin:0 auto;
margin-top:70px;
text-align:center;
font-size:28px;
color:red;
font-weight:bold;
font-family:"微软雅黑";
}
.btns{
width:210px;
height:30px;
margin:0 auto;
}
.btns span{
display:block;
float:left;
width:90px;
height:25px;
line-height:25px;
text-align:center;
margin-right:10px;
border-radius:7px;
border:1px solid #eee;
background-color:#369;
cursor:pointer;
}
Javascript
var data = ["phone","IPad","三星笔记本","佳能相机","谢谢关注","50元充值卡","1000元购物券","惠普笔记本"],
timer = null,flag = 0;
window.onload = function(){
var title=document.getElementById("title");
var play = document.getElementById("play");
var stop = document.getElementById("stop");
//开始抽奖
play.onclick = playFun;
//停止抽奖
stop.onclick = stopFun;
//键盘按下开始
document.onkeyup = function(event){
event = event || window.event;
if(event.keyCode == 13){
//keyCode 键值
if(flag == 0){ //判断是第几次敲击键盘
playFun();
flag = 1;
}else{
stopFun();
flag = 0;
}
}
}
}
function playFun(){
var title = document.getElementById("title");
var play = document.getElementById("play");
if(timer){
clearInterval(timer);
}
timer = setInterval(function(){
var random = Math.floor(Math.random()*data.length);//随机产生一个数,作为data的下标,但是范围在0-7之间
title.innerHTML = data[random];
},100);
play.style.backgroundColor = "#c1b1b1";
}
function stopFun(){
clearInterval(timer);
play.style.backgroundColor = "#369";
}