为了账号安全，请及时绑定邮箱和手机立即绑定

课程

/前端开发

/JavaScript

/JavaScript进阶篇

计时器程序无法停止计时

写了好多遍，都是能开始就停不了，能停就不能开始，我希望能实现点击start按钮，text框（初始为null）开始计时，点击stop，计时结束。

<!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>
<script type="text/javascript">
function gg_1(){
var s=new Date();
document.getElementById("time").value=s;
}
var i=setInterval(gg_1,100);
function ss(){
clearInterval(i);
}
</script>
</head>

<body>
<input type="button" id="start" value="Start" onclick="gg_1()"/>
<input type="text" id="time" />
<input type="button" id="stop" value="Stop" onclick="ss()"/>
</body>
</html>



连枝

2016-10-17

源自：JavaScript进阶篇  8-7

关注问题 我要回答
2501
操作
收起

正在回答

5 回答

慕村1994845 回答被采纳 +3 积分
2016-10-26

您想要的是计时，而你写的是时间的，有点矛盾，计时器用setTimeout()比较好，看下我的代码：（注意看下注释部分）

<!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>
<script type="text/javascript">
  var i;
  var num=0;
  function st(){
	  document.getElementById("time").value=num;
	  num=num+1;
	   i=setTimeout(st,1000);
}

  function ss(){
	  clearTimeout(i);
	}
	
  //var i;//这里是第二种写法
  //var num=0;
  //var n=true;
  //function gg_1(){
  //	document.getElementById("time").value=num;
  //	num=num+1;
  //	 i=setTimeout(gg_1,1000);
  //}
  //function st(){
  //	if(n==true){
  //		clearTimeout(i);//这里如果把clearTimeout(i);num=0;注释掉，就和上面的类似；不注释掉，再次点击start时，会重新开始计时
  //		num=0;          //但是，上面的方法会有个bug，就是，连续多次点击start按钮，计时会加速
  //		setTimeout(gg_1,1000);
  //		n=false;
  //		}
  //	}
  //
  //function ss(){
  //	if(n==false){
  //	clearTimeout(i);
  //	n=true;
  //	}
  //	}
 </script>
</head>
 
<body>
<input type="button" id="start" value="Start" onclick="st()"/>
<input type="text" id="time" />
<input type="button" id="stop" value="Stop" onclick="ss()"/>
</body>
</html>


0 回复 有任何疑惑可以回复我~
收起回答
#1

连枝 提问者

非常感谢！
2016-10-27 回复 有任何疑惑可以回复我~
#2

锦衣无涯

function st()函数是你定义的开始函数对吧，为什么函数里第二句有clearTimeout(i)这个取消定时器的指定？百思不得其解，已经要开始了为什么要定义先取消再执行。
2017-02-05 回复 有任何疑惑可以回复我~
#3

锦衣无涯 回复 锦衣无涯

并没有重新计时 多此一举
2017-02-05 回复 有任何疑惑可以回复我~
qq_灰色头像_17
2017-09-04

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>计时器</title>

<script type="text/javascript">

  var num=0;

  var i;

  function startCount(){

    document.getElementById('count').value=num;

    num=num+1;

    i=setTimeout("startCount()",1000);

  }

  flag=0;

  function stopCount(){

      if(flag==0){

          flag=1;

          document.getElementById('but').value="Stop";

      startCount();

      }else{

          clearTimeout(i);

          flag=0;

          document.getElementById('but').value="Start";

      }

  }

  function ce(){

      if(flag==0){

      document.getElementById('count').value="清除完毕!";

      num=0;

      setTimeout("document.getElementById('count').value=num",1000);

      }

  }

</script>

</head>

<body>

  <form>

    <input type="text" id="count" />

    <input type="button" id="but" value="Start" onclick="stopCount()" />

    <input type="button" value="Clear"  onclick="ce()" />

  </form>

</body>

</html>


0 回复 有任何疑惑可以回复我~
收起回答
#1

qq_灰色头像_17

这个可以一直用，start和stop自动切换，从大神那里cope的
2017-09-04 回复 有任何疑惑可以回复我~
Shero_25
2016-10-19

<!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>

<script type="text/javascript">

    window.onload=function(){

      timer = setInterval("abc()",1000)

    }

    

    function abc(){

        var s=new Date();

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

    }

     

    function bcd(){

      clearInterval(timer);

    }


    function efg(){

      timer = setInterval("abc()",1)

    }

</script>

</head>

<body>

<input type="button" id="start" value="Start" onclick="efg()"/>

<input type="text" id="time" />

<input type="button" id="stop" value="Stop" onclick="bcd()"/>

</body>

</html>

重写了一下 这个好像可以了

0 回复 有任何疑惑可以回复我~
收起回答
#1

连枝 提问者

谢谢你，我把你的代码全部拷进DW里运行了一下，start和stop全部失效，还是不行
2016-10-19 回复 有任何疑惑可以回复我~
#2

Shero_25 回复 连枝 提问者

在我这是可以正常运行啦 但是先点开始会有问题 点击停止 再点开始 这样反复操作是没问题的
2016-10-19 回复 有任何疑惑可以回复我~
Shero_25
2016-10-19

<!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>

<script type="text/javascript">


function gg_1(){

    var s=new Date();

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

}


function aaa(){

    setInterval(gg_1,100);

}


var i=setInterval(gg_1,100);

function ss(){    

    clearInterval(i);

}

</script>

</head>

 

<body>

<input type="button" id="start" value="Start" onclick="aaa()"/>

<input type="text" id="time" />

<input type="button" id="stop" value="Stop" onclick="ss()"/>

</body>

</html>


0 回复 有任何疑惑可以回复我~
收起回答
#1

Shero_25

还是不对 这样只有第一次好使 ☹☹
2016-10-19 回复 有任何疑惑可以回复我~
抄袭
2016-10-17

woyebuhui

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

举报

0/150
提交
取消
JavaScript进阶篇
  • 参与学习       469071    人
  • 解答问题       22582    个

本课程从如何插入JS代码开始，带您进入网页动态交互世界

进入课程

本课相似问答

2 回答右侧计时器无法停止

3 回答为什么按stop无法停止计时

1 回答请教：计时器无法停止，代码哪里出错了呢?

2 回答怎么点击stop按钮 计时器不停止？

2 回答启用计时器和关闭计时器，关闭计时器时无效
搜索更多本课相关问答

计时器程序无法停止计时

我要回答 关注问题
微信客服

购课补贴
联系客服咨询优惠详情

 帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

 公众号

扫描二维码
关注慕课网微信公众号