⏱ 如何使用 setInterval + clearInterval

这是 JavaScript 中用于定期执行重复任务的基本语法。
例如，在以下场景中使用：

  • 🕒 数字时钟：使用 setInterval 每秒更新时间

  • 🖼 图片幻灯片：每隔5秒更换图片

  • 📢 自动通知：定期显示警报或消息

  • 🧮 计数递增或递减：定期更新数字

  • 🎮 动画或游戏：定期更新动作

计数：0
<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>计数器（每秒增加）</title>
  <style>
    body {
      font-family: sans-serif;
      text-align: center;
      padding: 2rem;
    }
    #counter {
      font-size: 2rem;
      margin: 1rem 0;
    }
    button {
      font-size: 1rem;
      padding: 0.5rem 1.2rem;
      margin: 0.5rem;
    }
  </style>
</head>
<body>

  <h1>⏱ 计数器（每秒增加）</h1>
  <div id="counter">计数：0</div>

  <button onclick="startCounting()">开始</button>
  <button onclick="stopCounting()">停止</button>

  <script>
    let count = 0;
    let intervalId = null;

    function startCounting() {
      if (intervalId !== null) return;
      intervalId = setInterval(() => {
        count++;
        document.getElementById("counter").textContent = "计数：" + count;
      }, 1000);
    }

    function stopCounting() {
      clearInterval(intervalId);
      intervalId = null;
    }
  </script>

</body>
</html>

🧩 使用 setInterval 实现“交替切换效果”

setInterval 函数不仅可以用于计数器或定时器，还可以用于实现状态的交替切换。

例如，它在以下场景中非常实用：

  • 💡 让文本闪烁以引起注意
  • 🔁 切换按钮标签为 ON / OFF
  • 🎨 每隔几秒切换背景颜色以增加视觉效果

以下是一个每3秒切换一次背景颜色的示例：

<script>
let isBlue = true;

setInterval(() => {
  document.body.style.backgroundColor = isBlue ? "#cceeff" : "#ffeedd";
  isBlue = !isBlue;
}, 3000);
</script>

正如上面所示，setInterval 可以通过“记录 → 反转 → 重新赋值”的方式，轻松实现具有动态变化的界面。

另外，也可以使用 clearInterval() 来停止这个过程。今后我们还会介绍如“闪烁按钮”或“切换停止按钮”的具体示例。