<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>抽奖系统</title>
<style>
*{margin:0;padding:0;}
input{border:none;outline:none;}
.box{width:130px;margin:40px auto;}
h3{color:#F60;text-align:center;}
.box input{height:24px;line-height:24px;width:50px;margin-left:6px;display:inline-block;font-size:14px;color:#fff;text-align:center;background:#036;border-radius:8px;margin-top:20px;}
</style>
</head>
<body>
<div class="box">
<h3 id="title">开始抽奖了</h3>
<input type="button" value="开始" id="play"/>
<input type="button" value="停止" id="stop"/>
</div>
<script>
var data=['iphone','iPad','惠普打印机','佳能相机','谢谢参与！','50元充值卡','200元购物卡'],
timer=null,
flag=0;
window.onload=function(){
var oTitle=document.getElementById('title'),
oPlay=document.getElementById('play'),
oStop=document.getElementById('stop');
oPlay.onclick=function(){
playFun();
/*flag=1;*/
console.log(flag+'playclick');
}
oStop.onclick=function(){
stopFun();
/* flag=0;*/
console.log(flag+'stopclick');
}
document.onkeyup=function(event){
var e=event||window.event;
if(e.keyCode==13){
if(flag==0){
playFun();
flag=1;
console.log(flag+'playkey');
}else{
stopFun();
flag=0;
console.log(flag+'stopkey');
}
}
}
function playFun(){
clearInterval(timer);
timer=setInterval(function(){
var random=Math.floor(Math.random()*data.length);
oTitle.innerHTML=data[random];
},100);
oPlay.disabled=true;
oPlay.style.background="#ccc";
}
function stopFun(){
clearInterval(timer);
oPlay.disabled=false;
oPlay.style.background="#036";
}
}
</script>
</body>
</html>
代码如上，问题1：当我用空格键触发键盘事件时，只要先用鼠标触发过事件，则空格键再也不能触发事件，有大神知道原因吗？
问题2：只要先用鼠标触发过事件，则在用键盘触发事件时每次都会先执行一个鼠标触发的事件，然后再执行键盘触发的事件，如键盘触发开始，则先执行一次鼠标触发的结束函数，然后再执行开始函数，从打印的flag可以看出,原因是什么？
问题3：鼠标和键盘如何混合使用？
先声明一下，键码13的是回车键，不是空格键
然后我测试了一下，键盘和鼠标单独使用是没有问题的。
鼠标触发后键盘不是不能在触发,鼠标点开始之后，键盘要按两次才能停止。因为第一次执行的是playFun()，第二次才是stopFun()。
两者同时使用会出错是因为flag值的问题，flag的改变只会在使用键盘事件的时候。所以 if() 判断的时候到底执行playFun()还是stopFun()肯定是不准确的。
解决办法：在if(){}else{}中删去flag=0;和flag=1;将flag的改变放到两个函数中；在playFun()的内部末尾加上flag=1;在stopFun()的内部末尾加上flag=0;就可以了。
var data = ["iphone", "ipad", "sony手机", "windowsPhone", "dell电脑"];
var title = document.getElementById("title");
var startBtn = document.getElementById("start");
var stopBtn = document.getElementById("stop");
var timer = null;
var startFlag = false;
function startFunc() {
if (startFlag) {
return null;
}
clearInterval(timer);
timer = setInterval(function () {
var index = Math.floor(Math.random() * data.length);
title.innerHTML = data[index];
}, 50);
startBtn.style.background = "gray";
startBtn.style.cursor = "default";
startFlag = true;
}
function stopFunc() {
clearInterval(timer);
startBtn.style.background = "#036";
startBtn.style.cursor = "pointer";
startFlag = false;
}
startBtn.onclick = startFunc;
stopBtn.onclick = stopFunc;
document.onkeyup = function (e) {
console.log(e.keyCode);
if (e.keyCode !== 13) {
return null;
}
!startFlag ? startFunc() : stopFunc();
}然而这种方法并不行 也有BUG 不知道为什么