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一章节。

回复

我来回复
  • 暂无回复内容