如何使用JavaScript实现HTML元素自动定时切换效果

完整可运行示例代码 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>文本切换示例</title>
</head>
<body>
  <!-- 承载切换文本的容器 -->
  <div id="textContainer">
    <p>Text1</p>
  </div>

  <script>
    // 获取容器元素
    const container = document.getElementById('textContainer');
    // 启动定时器，每隔1000毫秒（1秒）执行一次切换逻辑
    setInterval(() => {
      const currentP = container.querySelector('p');
      // 判断当前文本内容，切换为对应值
      currentP.textContent = currentP.textContent === 'Text1' ? 'Text2' : 'Text1';
    }, 1000)
  </script>
</body>
</html>

实现逻辑说明 #

• 首先在HTML中定义承载p标签的容器，方便JS选中操作
• 使用setInterval定时器设置1秒的执行间隔
• 每次定时器触发时，读取当前p标签的文本内容，判断后替换为另一段文本
• 如果后续需要停止切换，可以把定时器赋值给变量，调用clearInterval(定时器变量)即可停止

可选方案：预定义两个p标签切换显隐 #

如果你的场景是预先就写好两个p标签，仅切换显示状态，可以用下面的实现：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>文本切换示例</title>
  <style>
    .hidden { display: none; }
  </style>
</head>
<body>
  <div id="textContainer">
    <p class="toggle-text">Text1</p>
    <p class="toggle-text hidden">Text2</p>
  </div>

  <script>
    const textEls = document.querySelectorAll('.toggle-text');
    setInterval(() => {
      textEls.forEach(el => el.classList.toggle('hidden'));
    }, 1000)
  </script>
</body>
</html>

内容的提问来源于stack exchange，提问作者user11262992