如何让Start加上暂停功能，Stop加上重置功能-慕课网

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

如何让Start加上暂停功能，Stop加上重置功能

来源：8-6 取消计时器clearTimeout()

__zz

2016-08-29 17:41

如题，以现学习阶段思想能解决不

写回答关注

2回答

慕村1994845: 2016-10-25 21:44:34

这个怎么样：

<!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 num=0;
   var i;
   var n=true;
   function st(){
	   document.getElementById("txt").value=num;
	   num=num+1;
	   i=setTimeout("st()",1000);
	   }
	function startCount(){
		if(n==true){//n初始值为true，可以执行以下代码，执行到n=false停止
		    clearTimeout(i);//这里当第一次循环完毕再次开始，clearTimeout(i)只是让计时器停止
			num=0;//而为了再次重新开始计时，必须把初始值再次重置设置为0；下面的函数同样的道理
			setTimeout("st()",1000);
			n=false;
			}
		}   
	function stopCount(){
		if(n==false){//当n=false,执行以下代码，执行到n=true停止
		    clearTimeout(i);
			 num=0;
		    setTimeout("st()",1000);
		    // clearTimeout(i);
		   n=true;//而当n=true;再次执行startCount()函数，按照如此单一的循环模式，
		   //不会再出现多次点击start出现计时加速的现象
		  
		   }
       }
</script> 
<style type="text/css">
*{padding:0; margin:0; font-size:24px; color:#F00;}
#txt{text-align:center;}
/*#tim{ width:200px; margin:200px auto;}*//*这里因为宽度设置太小，才是导致上下分段的原因*/
#tim{ width:400px; margin:200px auto;}
input{color: #C33; font-size:24px; font-family:"华文隶书"; font-weight:bold;}
</style>
</head>

<body>
<form>
<div id="tim">
   <input type="button" value="start" onclick="startCount()" />
   <input type="text" id="txt" />
   <input type="button" value="start" onclick="stopCount()" />
   </div>
</form>
</body>
</html>

0 0

舞动的指尖

2016-08-29 18:47:42

var num=0;
var i;
function startCount(){
document.getElementById('count').value=num;
num=num+1;
i=setTimeout(startCount,1000);
}
function stopCount(){
clearTimeout(i);
num=0;
}
记得采纳哦

0 0

JavaScript进阶篇

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

469201 学习 · 22584 问题

查看课程

相似问题

stop不能停

回答 8

点击两次start计数器会加快相应的得点击2次stop才能停止

回答 2

添加功能无法实现

回答 1

如何暂停和继续？

回答 1

加法功能怎么不好用啊

回答 3

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