问答详情
源自:4-5 [DOM事件] 抽奖系统(下)

【BUG疑惑】第一次点击开始后按回车结束抽奖,之后再用回车触发抽奖变成了松开结束,而不是单次触发。

<DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>content</title>
<style type="text/css">
html,body,div,button{margin: 0;padding: 0;}
.title{margin: 0 auto;width: 300px;height: 100px;margin-top: 50px;text-align: center;color: #f00;font-weight: bold;font-size:30px; }
.btns{width: 300px;height: 30px;margin: 0 auto;}
button{display: block;float: left;
	width: 100px;height: 25px;line-height: 25px;background-color: orange;border: 1px solid #eee;border-radius: 5px;outline: none;cursor: pointer;color:#fff;font-family: "微软雅黑"
}
#stop{float: right;}
</style>
</head>
<body>
	<div class="title" id="title">开始抽奖</div>
	<div class="btns">
		<button id="start">开始</button><button id="stop">停止</button>
	</div>
<script type="text/javascript">
		// 绑定事件
		window.onload=function(){
		var start=document.getElementById("start"),
			stop=document.getElementById("stop");
		dontknow.addEvent(start,"click",action);
		dontknow.addEvent(stop,"click",mystop);
		}


	var data=["iphone5","ipad","三星笔记本","佳能相机","50元充值券","谢谢参与"],
		timer=null,
		dontknow={
			addEvent:function(ele,type,handle){
				ele.addEventListener?ele.addEventListener(type,handle):ele.attachEvent("on"+type,handle);
			},
			removeEvent:function(ele,type,handle){
				ele.removeEventListener?ele.removeEventListener(type,handle):ele.detachEvent("on"+type,handle);
			}
		};
		var flag=true; //判断抽奖是否开始进行,若开始则flag=false

		// 抽奖开始函数
	function action(){
		var otitle=document.getElementById("title");
		var start=document.getElementById("start");
		if(timer==null){
		timer=setInterval(change,50);
		start.style.backgroundColor="#ccc";
		flag=!flag;}
		
	};

	// 奖品改变函数
	function change(){
		var otitle=document.getElementById("title");
		var num=Math.floor(Math.random()*data.length);
			otitle.innerHTML=data[num];
	};

	// 抽奖停止函数
	function mystop(){
		var start=document.getElementById("start");
		start.style.backgroundColor="orange";
		clearInterval(timer);
		timer=null;
		flag=!flag;
	}


	// 键盘事件 keyDown  keyPress keyUp   
	 document.onkeyup=function(event){
	 	event=event||window.event;
	 	if(event.keyCode==13){
	 		if(flag){
	 			action();
	 		}
	 		else if(!flag){
	 			mystop();
	 		}
	 	}
	 };
</script>
</body>
</html>


提问者:qq_发条橙子_0 2016-03-08 12:38

个回答

  • jinleli
    2016-05-26 14:11:21

    不知道楼主有没有找到原因,同问

  • tanq
    2016-03-08 20:54:10

     

     dontknow={

                addEvent:function(ele,type,handle){

                    ele.addEventListener?ele.addEventListener(type,handle):ele.attachEvent("on"+type,handle);

                },

                removeEvent:function(ele,type,handle){

                    ele.removeEventListener?ele.removeEventListener(type,handle):ele.detachEvent("on"+type,handle);

                }

            };

    将此换成

    start.onclick=action;

    stop.onclick=mystop;

    之后你所说的问题就解决了但是会出现:

    某次用鼠标操作之后再按回车键就不起作用了