📌  相关文章
📜  在 javascript 中计数计时器 - Html (1)

📅  最后修改于: 2023-12-03 15:37:22.089000             🧑  作者: Mango

在 JavaScript 中使用计数计时器

在 JavaScript 中，我们可以使用计时器（timer）来执行一些定时操作。本文将介绍如何使用计数计时器，即在一定时间间隔内执行一次操作并计数，可以用于实现一些类似于轮播图或计数器的效果。

1. 创建计数计时器

我们可以使用 setInterval 函数来创建一个计时器，该函数将在一定时间间隔内重复执行某个函数。

let counter = 0;
 
let timerId = setInterval(function() {
  console.log(counter);
  counter++;
}, 1000);

代码解释：

  • counter：计数器变量，初始值为 0。
  • setInterval：创建一个计时器，并返回一个唯一的 timerId。
  • 匿名函数：每一秒打印一次 counter 的值，并将其加 1。
2. 停止计数计时器

我们可以使用 clearInterval 函数来停止一个正在运行的计时器。

clearInterval(timerId);

代码解释：

  • clearInterval：停止一个正在运行的计时器。
3. 完整示例

下面是一个完整的示例，实现了一个在 HTML 页面中显示计数器的效果。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>计数计时器</title>
  </head>
  <body>
    <h1>计数器：<span id="counter">0</span></h1>
    <button onclick="start()">开始</button>
    <button onclick="stop()">停止</button>
 
    <script>
      let counter = 0;
      let timerId = null;
      let el = document.getElementById('counter');
 
      function start() {
        timerId = setInterval(function() {
          el.innerText = counter;
          counter++;
        }, 1000);
      }
 
      function stop() {
        if (timerId != null) {
          clearInterval(timerId);
          timerId = null;
        }
      }
    </script>
  </body>
</html>

代码解释：

  • el：HTML 页面中的计数器元素。
  • start：开始计数器，创建一个计数计时器，并将计数器元素的值设置为当前计数器的值。
  • stop：停止计数器，停止当前计时器并清空计时器变量。