（setTimeout与clearTimeout的运用）
实现效果：
1.jpg
点击“开始”，在文本框内开始读秒
2.jpg
点击“暂停”，在文本框内暂停读秒，“开始”变成“继续”
3.jpg
附上代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>计时器</title>
</head>
<body>
<input type="text" name="time" placeholder="此处显示时间" id="text">
<input type="button" name="start" value="开始" id="button1">
<input type="button" name="stop" value="暂停" id="button2">
<script type="text/javascript">
//获取文本框、开始按钮和暂停按钮
var btn1=document.getElementById("button1"),
btn2=document.getElementById("button2"),
time=document.getElementById("text"),
num=0;
//给开始按钮绑定鼠标点击事件
btn1.onclick=function btn1(){
time.value=num;
num++;
var timeoutid=setTimeout(btn1,1000);
//给暂停按钮绑定鼠标点击事件
btn2.onclick=function(){
button1.value="继续";
clearTimeout(timeoutid);
}
}
</script>
</body>
</html>
网友评论