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

首页课程实战体系课手记专栏慕课教程

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

来源：4-5 [DOM事件] 抽奖系统（下）

良辰瑾空人心

2016-07-21 21:08

<!DOCTYPE html>

<html>

<head>

*{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>

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>

</body>

</html>

写回答关注

8回答

隼丶

2016-08-03 17:37:09

已采纳

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

2 0

良辰瑾空人心

非常感谢！

2016-10-20 22:25:06

共 2 条回复 >
Vectores

2016-10-20 19:33:42

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

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

0 1

良辰瑾空人心

2016-07-22 09:31:40

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

0 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 0
良辰瑾空人心

2016-07-22 08:46:28

能详细点说那个的问题吗

0 0
当下0

2016-07-21 23:09:34

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

0 0

DOM事件探秘

DOM事件？本课程会通过实例来给小伙伴们讲解如何使用这些事件

99532 学习 · 1305 问题

查看课程

相似问题

为什么要把对addEvent函数的调用写在window.onload=function(){}里面

回答 4

为什么给button的onclick属性赋值已经定义好的函数会不行呢

回答 2

为什么dom2级里面的函数参数不加（）

回答 2

为什么我把关闭的函数写在onload外面，就报错了？

回答 1

释放的代码为什么一定要放在fnDown里面

回答 1

打开慕课网App查看更多内容