js实现计数器

先介绍两个函数：

  • setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。
  • clearTimeout() 方法可取消由 setTimeout() 方法设置的定时操作。如果方法还未被执行，我们可以使用 clearTimeout() 来阻止它。
<!DOCTYPE html>
<html>
<head>
  <title>js实现计数器</title>
</head>
<body>
  <button onclick="startCount()">开始计数!</button>
  <input type="text" id="counter">
  <button onclick="stopCount()">停止计数!</button>
<p>
点击 "开始计数!" 按钮开始执行计数程序。输入框从 0 开始计算。 点击 "停止计数!" 按钮停止后，可以再次点击点击 "开始计数!" 按钮会接着计数。
</p>

<script>
var cnt = 0;
var t;
var timer_is_on = 0;

function timedCount() {
    document.getElementById("counter").value = cnt;
    cnt = cnt + 1;
    t = setTimeout(function(){ timedCount() }, 1000);
}

function startCount() {
    if (!timer_is_on) {
        timer_is_on = 1;
        timedCount();
    }
}

function stopCount() {
    clearTimeout(t);
    timer_is_on = 0;
}
</script>

</body>
</html>

 

 

参考链接：https://www.runoob.com/jsref/met-win-settimeout.html

posted @ 2020-01-15 09:31  Rogn  阅读(5641)  评论(0)  编辑  收藏  举报