当前位置：首页 > JavaScript

js实现倒计时跳转页面

2026-04-04 12:25:40JavaScript

实现倒计时跳转页面的JavaScript代码

倒计时跳转页面可以通过setInterval和setTimeout函数实现，以下是一个完整的实现方案：

// 设置倒计时时间（秒）
let countdown = 5;

// 获取显示倒计时的DOM元素
const countdownElement = document.getElementById('countdown');

// 更新倒计时显示
function updateCountdown() {
  countdownElement.textContent = `页面将在 ${countdown} 秒后自动跳转...`;

  if (countdown <= 0) {
    clearInterval(timer);
    window.location.href = "https://example.com"; // 替换为目标URL
  }

  countdown--;
}

// 立即显示初始倒计时
updateCountdown();

// 设置定时器，每秒更新一次
const timer = setInterval(updateCountdown, 1000);

HTML部分代码

需要在HTML中添加一个用于显示倒计时的元素：

<div id="countdown"></div>

添加手动跳转按钮

为了更好的用户体验，可以添加一个手动跳转按钮：

js实现倒计时跳转页面

<div id="countdown"></div>
<button id="jumpBtn">立即跳转</button>

<script>
  document.getElementById('jumpBtn').addEventListener('click', function() {
    window.location.href = "https://example.com"; // 替换为目标URL
  });
</script>

完整示例代码

<!DOCTYPE html>
<html>
<head>
  <title>倒计时跳转页面</title>
</head>
<body>
  <div id="countdown"></div>
  <button id="jumpBtn">立即跳转</button>

  <script>
    let countdown = 5;
    const countdownElement = document.getElementById('countdown');

    function updateCountdown() {
      countdownElement.textContent = `页面将在 ${countdown} 秒后自动跳转...`;

      if (countdown <= 0) {
        clearInterval(timer);
        window.location.href = "https://example.com";
      }

      countdown--;
    }

    updateCountdown();
    const timer = setInterval(updateCountdown, 1000);

    document.getElementById('jumpBtn').addEventListener('click', function() {
      window.location.href = "https://example.com";
    });
  </script>
</body>
</html>