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

猜你喜欢

转载自www.cnblogs.com/lfri/p/12195087.html