setTimeout()实现的计数器功能代码实例
分类：实例代码
本章节分享一段代码实例，它使用setTimeout()方法实现了计数器功能。
代码实例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<script>
var count = 0;
var timer;
var timerOn = false;
var dom=null;
function timedCount() {
count++;
dom.innerHTML=count;
timer = setTimeout(function(){
timedCount()
}, 1000);
}
function doTimer() {
if (!timerOn) {
timerOn = true;
timedCount();
}
}
function stopCount() {
clearTimeout(timer);
timerOn = false;
}
window.onload=function(){
dom=document.getElementById("antzone");
var beginBt=document.getElementById("beginBt");
var stopBt=document.getElementById("stopBt");
beginBt.onclick=function(){doTimer()}
stopBt.onclick=function(){stopCount()}
}
</script>
</head>
<body>
<div id="antzone"></div>
<input type="button" id="beginBt" value="开始计数"/>
<input type="button" id="stopBt" value="停止计数"/>
</body>
</html>
上面的代码实现了我们的要求，下面介绍一下它的实现过程。
一.代码注释:
（1）.var count = 0,声明一个变量用来存储计数。
（2）.var timer,用来作为定时器函数的标识。
（3）.var timerOn = false，声明一个变量并赋初值为false，用来作为计数器是否开启的标识。
（4）.var dom=null,此变量用来存储dom元素对象。
（5）.function timedCount() {
count++;
dom.innerHTML=count;
timer = setTimeout(function(){
timedCount()
}, 1000);
}，实现了计数功能，这里采用了递归。
（6）.function doTimer() {
if (!timerOn) {
timerOn = true;
timedCount();
}
}，此函数可以实现开启计数的功能。
首先判断当前是否是开启的，如果不是开启。
就设置timerOn为开启状态。
然后执行计数功能timedCount()。
（7）.function stopCount() {
clearTimeout(timer);
timerOn = false;
}，能够停止计数功能，也就是停止递归循环。
二.相关阅读:
（1）.setTimeout()方法可以参阅setTimeout()一章节。
（2）.innerHTML可以参阅js innerHTML一章节。
一线大厂高级前端编写，前端初中阶面试题，帮助初学者应聘，需要联系微信：javadudu