当前位置：首页 > JavaScript

js实现倒计时跳转页面

2026-03-01 11:41:03JavaScript

实现倒计时跳转页面的方法

使用JavaScript实现倒计时跳转页面可以通过以下方式完成：

方法一：使用setInterval实现倒计时

let count = 5; // 倒计时秒数
const countdownElement = document.getElementById('countdown'); // 显示倒计时的元素

const timer = setInterval(() => {
  countdownElement.textContent = `页面将在${count}秒后自动跳转`;
  count--;

  if (count < 0) {
    clearInterval(timer);
    window.location.href = 'https://example.com'; // 跳转目标URL
  }
}, 1000);

方法二：使用setTimeout递归实现

let count = 5;
const countdownElement = document.getElementById('countdown');

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

  if (count >= 0) {
    setTimeout(countdown, 1000);
  } else {
    window.location.href = 'https://example.com';
  }
}

countdown();

方法三：使用Promise和async/await

js实现倒计时跳转页面

async function countdown(seconds) {
  const countdownElement = document.getElementById('countdown');

  for (let i = seconds; i >= 0; i--) {
    countdownElement.textContent = `页面将在${i}秒后自动跳转`;
    await new Promise(resolve => setTimeout(resolve, 1000));
  }

  window.location.href = 'https://example.com';
}

countdown(5);

完整HTML示例

<!DOCTYPE html>
<html>
<head>
  <title>倒计时跳转示例</title>
</head>
<body>
  <p id="countdown">页面将在5秒后自动跳转</p>

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

    const timer = setInterval(() => {
      countdownElement.textContent = `页面将在${count}秒后自动跳转`;
      count--;

      if (count < 0) {
        clearInterval(timer);
        window.location.href = 'https://example.com';
      }
    }, 1000);
  </script>
</body>
</html>

注意事项

确保目标URL正确且可访问
考虑添加取消跳转的按钮，提升用户体验
移动端适配可能需要调整样式
跳转前可以添加确认提示，防止意外跳转

高级优化版本

function countdownRedirect(seconds, targetUrl, elementId) {
  let remaining = seconds;
  const element = document.getElementById(elementId);
  let timer;

  function updateDisplay() {
    element.textContent = `将在${remaining}秒后跳转到${targetUrl}`;
  }

  function tick() {
    remaining--;
    updateDisplay();

    if (remaining <= 0) {
      clearInterval(timer);
      window.location.href = targetUrl;
    }
  }

  updateDisplay();
  timer = setInterval(tick, 1000);

  return {
    cancel: () => {
      clearInterval(timer);
      element.textContent = '跳转已取消';
    }
  };
}

// 使用示例
const redirect = countdownRedirect(10, 'https://example.com', 'countdown');

// 如果需要取消跳转
// redirect.cancel();