计时器程序无法停止计时-慕课网

计时器程序无法停止计时

来源：8-7 History 对象

连枝

2016-10-17 13:28

写了好多遍，都是能开始就停不了，能停就不能开始，我希望能实现点击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>

写回答关注

5回答

慕村1994845: 2016-10-26 21:30:02

已采纳

您想要的是计时，而你写的是时间的，有点矛盾，计时器用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>

3 0

锦衣无涯回复锦衣无涯

并没有重新计时多此一举

2017-02-05 15:46:52

共 3 条回复 >

qq_灰色头像_17

2017-09-04 12:26:55

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

1 0

qq_灰色头...

这个可以一直用，start和stop自动切换，从大神那里cope的

2017-09-04 12:28:00

共 1 条回复 >
Shero_25

2016-10-19 16:28:03

<!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>
重写了一下这个好像可以了

2 0

Shero_... 回复连枝

在我这是可以正常运行啦但是先点开始会有问题点击停止再点开始这样反复操作是没问题的

2016-10-19 17:00:19

共 2 条回复 >
Shero_25

2016-10-19 16:02:13

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

1 0

Shero_...

还是不对这样只有第一次好使 ☹☹

2016-10-19 16:08:37

共 1 条回复 >
抄袭

2016-10-17 13:32:46

woyebuhui

0 0

JavaScript进阶篇

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

467375 学习 · 21877 问题

查看课程

相似问题

右侧计时器无法停止

回答 2

回答 3

回答 1

回答 2

回答 2