                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /DOM事件探秘

代码如下，我的抽奖停止需要2按2次才停下来，求助

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>抽奖</title>
  <style>
  *{margin:0;padding:0;}
  #title{
      width:200px;height:50px;
      margin:100px auto 0;
      text-align:center;
      font-size:24px;
      font-weight:bold;
      color:red;
      }
  #btn{
      width:200px;height:20px;
      margin:10px auto 0;
      text-align:center;
      
      }
  #btn input{
      width:50px;height:30px;
      background-color:grey;
      font-size:16px;
      margin-right:10px;
      }
  </style>
  <script>
    var data=['爱疯','苹果','女朋友','游戏机']
    window.onload=function(){
        var timer;
        var flag=0;
        var start=document.getElementById('start');
        var stop=document.getElementById('stop');
		 var title=document.getElementById('title');
        //鼠标点击
        start.onclick=function(){
            start.style.background='#234';
            play();
		//设置flag的变化可以键盘鼠标配合使用，更加人性化
			flag=1;
            }
        stop.onclick=function(){
            start.style.background="#036";
			if(title.innerHTML=='爱疯'){
				clearInterval(timer);}
			else{
				play();}
				//clearInterval(timer);
		   flag=0;
           
            }
            function play(){
                 clearInterval(timer);
            timer=setInterval(function(){
            var title=document.getElementById('title');
            var num=Math.floor(Math.random()*data.length);
            title.innerHTML=data[num];
			
            },30)
                }
        //点击回车键
        document.onkeyup=function(e){
            e=event||window.event;
            if(e.keyCode==13){
                 if(flag==0){
            start.style.background='#234';
            play();
            flag=1;}
            else{
                start.style.background="#036";
				if(title.innerHTML=='爱疯'){
				clearInterval(timer);
				flag=0;}
			else{
				play();}
           //clearInterval(timer);
           
                }
                }
           
            }
        
        }
    </script> 
  
  </head>
  
  <body>
  <div id="title">
  开始抽奖
  </div>
  <div id="btn">
  <input type="button" value="开始" id="start">
  <input type="button" value="停止" id="stop">
  </div>
  </body>
  </html>

小尼采

2016-04-03

源自：DOM事件探秘 4-4

关注问题我要回答

943

操作

收起

2 回答

湛瞳回答被采纳 +3 积分
2016-08-23

var data = ['iphone5', 'ipad', '佳能单反', '迪拜双人游', '巴厘岛三人游', '科颜氏套装', 'NewBalance复古鞋'],
 timer = null;

window.onload = function(){
 var title = document.getElementById('title'),
  play = document.getElementById('play'),
  stop = document.getElementById('stop');

 // 开始抽奖
 play.onclick = playFun;

 // 停止
 stop.onclick = stopFun;
}

function playFun(){
 timer = setInterval(function(){
  // 随机
  var random = Math.floor(Math.random() * data.length);
  title.innerHTML = data[random];
 }, 50);
}

function stopFun(){
 clearInterval(timer);
 title.innerHTML = data[0];//每次停止时都显示iphone5
}

js文件如上。不知道你是不是这个意思

0 回复有任何疑惑可以回复我~

收起回答

跳芭蕾舞的蓝胖子
2016-04-03

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
  <title>抽奖</title>
  <style type="text/css">
   /*标签样式部分开始*/
   span{display:inline-block;width:100px;height:50px;text-align:center;line-height:50px;cursor:pointer;font-size: 24px;font-weight:bold;color:#F7F7F7;background: #268BD2;}
   /*标签样式部分开始*/
   /*类样式部分开始*/
   .title{width:400px;height:70px;text-align:center;line-height:70px;font-size:36px;font-weight:bold;color:red;margin:0 auto;margin-top:50px;}
   .play{margin-left:41.5%;margin-top:10px;}
   /*.play:hover{background:#B9BFBF;}*/
   /*类样式部分结束*/
  </style>
  <script type="text/javascript">
   //奖品信息
   var date = ['Iphone5S','佳能相机','50元充值卡','三星S7','小米5','电冰箱','小汽车','惠普打印机','LG显示器'],
    timer = null,//定时器
    flag = 0;
  window.onload = function(){

   var play = document.getElementById("play"),//开始
    stop = document.getElementById("stop");//结束
   //鼠标开始
   play.onclick = function(){
    flag=1;
    this.style.backgroundColor = "#B9BFBF";
    clearInterval(timer);
   var title = document.getElementById("title");
    clearInterval(timer);
    timer = setInterval(function(){
    var title = document.getElementById("title"),
     //获取角标
     dateM = Math.floor(Math.random()*date.length);
    title.innerHTML = date[dateM];
    },50)
   }
   //鼠标暂停
   stop.onclick = function(){
    clearInterval(timer);
    var play = document.getElementById("play");
    play.style.backgroundColor="#268BD2";
   }
   //键盘开始
   document.onkeydown = function(event){
    var event = event?window.event:event;
    clearInterval(timer);
    if(event.keyCode==13){
     if(flag==0){
      playFun();
      console.log(event.keyCode);
      flag=1;
     }else{
      clearInterval(timer);
      flag=0;
     }
    }

   }
  }
  //开始抽奖
  function playFun(){
   //抽奖前清除定时器
   clearInterval(timer);
   var title = document.getElementById("title");
   timer = setInterval(function(){
    var title = document.getElementById("title"),
     //获取角标
     dateM = Math.floor(Math.random()*date.length);
    title.innerHTML = date[dateM];
   },50)
  }
  </script>
</head>
<body>
  <div id="title" class="title"></div>
  <span id="play" class="play" >开始</span>
  <span id="stop" class="stop">停止</span>
</body>
</html>