                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /JavaScript进阶篇

为什么加了一个时间恢复的按钮，然后再按停止却没用了？

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>计时器</title>
<script type="text/javascript">
   function clock(){
      var time=new Date();                     
      document.getElementById("clock").value = time;
   }
  var stop=setInterval(clock,100);
  function start(){
    var stop=setInterval(clock,100); 
  }
</script>
</head>
<body>
  <form>
    <input type="text" id="clock" size="50"  />
    <input type="button" value="Stop" onclick="clearInterval(stop)"  />
    <input type="button" value="start" onclick="start()" />
  </form>
</body>
</html>

加了一个start 的恢复按钮，按了一下确实恢复了，但是再按停止的时候就不行了，为什么？

weibo_吾乃凤凰院凶真3999740

2016-11-29

源自：JavaScript进阶篇 8-4

关注问题我要回答

810

操作

收起

1 回答

老唐哥
2016-11-29

function clock(){

var time=new Date();

document.getElementById("clock").value = time;

}

var timer = setInterval(clock);

function stop(){

clearInterval(timer);

}

function start(){

timer = setInterval(clock);

}

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

收起回答

weibo_吾乃凤凰院凶真3999740 提问者

我知道哪里出问题了在于start子函数里面多了一个var stop的声明。这样stop变量名重复了，一个是全局变量一个是局部变量。然后在子函数里局部变量的值会覆盖全局变量的值。所以当第二次按start的时候，onclick里stop的变量是全局变量，全局变量在第一次按的时候已经改变了，并没有恢复。我们第一次按的恢复是重新定义了一个局部stop变量，所以onclick里的stop对他无效