问答详情
源自：4-5 [DOM事件] 抽奖系统（下）

为什么把flag的赋值放在函数里面不行

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

<title>抽奖</title>

<style type="text/css">

*{margin: 0;padding: 0;}

#top{width: 400px;height: 50px;margin: 20px auto;color: #f00;font-size: 30px;line-height: 50px;}

#btn{margin: 0 auto;display: block;width: 400px;}

#start,#end{width: 100px;height: 40px;line-height: 40px;display: inline-block;font-size: 25px;background-color: #00f;color: #fff;margin-right: 50px;border-radius: 10px;}

</style>

<script type="text/javascript">

var tid=["谢谢参与","100元超市代金券","50元充值卡","索尼数码相机","三星笔记本","iphone6","ipadMini"];

var flag=0;

var timer=null;

window.onload=function(){

var top=document.getElementById('top');

var start=document.getElementById('start');

var end=document.getElementById('end');

            start.onclick=startFun;

            end.onclick=endFun;

            document.onkeyup=function(event){

            event= event||window.event;

            if (event.keyCode==13) {

            if (flag==0) {

            startFun();

            // flag=1;

            }

            else{

            endFun();

            // flag=0;

            }

            }

            }

            function startFun(){

            clearInterval(timer);

            timer=setInterval(function(){

            var xxx=Math.floor(Math.random()*tid.length);

            top.innerHTML=tid[xxx];

            },50);

                start.style.background="#999";

                flag=1;

            }

            function endFun(){

            clearInterval(timer);

            start.style.background="#00f";

            flag=0;

            }

}

</script>

</head>

<body>

<div id="top">开始抽奖啦！</div>

<div id="btn">

<input type="button" id="start" value="开始">

<input type="button" id="end" value="停止">

</div>

</body>

</html>


提问者：良辰瑾空人心 2016-07-21 21:08

个回答

  • 隼丶
    2016-08-03 17:37:09
    已采纳

    把flag的赋值放在函数里面，每执行一次函数就定义flag为0，flag永远为0，只能执行 startFun()。


    0
  • Vectores
    2016-10-20 19:33:42

    你把flag放在函数里面的话就是一个局部变量，当函数执行的话，这个变量会存在，当函数调用完成后，你的变量flag就会消失，当下次调用这个函数的时候又会重新定义。所以只能放在函数外面当作全局变量使用。

    0
  • 湛瞳
    2016-08-23 11:09:15

    试了一下是可以的，我的js文件如下：

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

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

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

 // 停止
 stop.onclick = stopFun;

 // 键盘事件
 document.onkeyup = function(event){
  event = event || window.event;

  if (event.keyCode == 13) {
   if (flag == 0) {
    playFun();
    // flag = 1;
   }else {
    stopFun();
    // flag = 0;
   }
  }
 }
}

function playFun(){
 play.style.backgroundColor = '#999';
 clearInterval(timer);
 timer = setInterval(function(){
  // 随机
  var random = Math.floor(Math.random() * data.length);

  title.innerHTML = data[random];

 }, 50);
 flag = 1;
}

function stopFun(){
 clearInterval(timer);
 play.style.backgroundColor = '#036';
 flag = 0;
}


    0
  • Farris
    2016-07-30 20:07:54

    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();
}


    1
  • 良辰瑾空人心
    2016-07-22 09:31:40

    为什么这个又可以 我第一次发的那个就不行

    0
  • 良辰瑾空人心
    2016-07-22 09:30:35

    <!doctype html>

    <html>

     <head>

       <title>抽奖</title>

       <meta charset="utf-8">

       <style type="text/css">

     *{margin:0;

      padding:0;}


    .title{width:400px;

           height:70px;

           margin:0 auto;

           padding-top:30px;

           text-align:center;

           font-size:24px;

           font-weight:bold;

           color:#F00;}


    .btns{width:190px;

          height:30px;

          margin:0 auto;}


    .btns span{display:block;

               float:left;

               width:80px;

               height:27px;

               line-height:27px;

               background:#036;

               border:1px solid #eee;

               border-radius:7px;

               margin-right:10px;

               color:#FFF;

               text-align:center;

               font-size:14px;

               font-family:"微软雅黑";

               cursor:pointer;}

       </style>

       <script type="text/javascript" >

          var data=['Phone5','Ipad','三星笔记本','佳能相机','惠普打印机','谢谢参与','50元充值卡','1000元超市购物券'],

        timer=null,

        flag=0;


    window.onload=function(){

        var play=document.getElementById('play'),

            stop=document.getElementById('stop');


        // 开始抽奖

        play.onclick=playFun;

        stop.onclick=stopFun;


       // 键盘事件

       document.onkeyup=function(event){

          event = event || window.event;

          if(event.keyCode==13){

             if(flag==0){

               playFun();

              

             }else{

               stopFun();

             }

          }

       }

    }


    function playFun(){

    var title=document.getElementById('title');

    var play=document.getElementById('play');

    clearInterval(timer);

    timer=setInterval(function(){

      var random=Math.floor(Math.random()*data.length);

      title.innerHTML=data[random];

    },50);

        play.style.background='#999';

      flag=1;

    }


    function stopFun(){

    clearInterval(timer);

    var play=document.getElementById('play');

    play.style.background='#036';

    flag=0;

    }

       </script>

     </head>

     <body>

        <div id="title" class="title">开始抽奖啦！</div>

        <div class="btns">

           <span id="play">开 始</span>

           <span id="stop">停 止</span>

        </div>

     </body>

    </html>


    0
  • 良辰瑾空人心
    2016-07-22 08:46:28

    能详细点说那个的问题吗

    0
  • 当下0
    2016-07-21 23:09:34

    全局变量与局部变量http://blog.csdn.net/zyz511919766/article/details/7276089

    0