如何让Start加上暂停功能，Stop加上重置功能
如题，以现学习阶段思想能解决不
__zz
2016-08-29
2 回答
这个怎么样：
<!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/150
提交
取消
