当前位置：首页 > JavaScript

js实现倒计时跳转页面

2026-01-30 20:36:38JavaScript

使用JavaScript实现倒计时跳转页面

通过JavaScript可以轻松实现倒计时后自动跳转页面的功能。以下是两种常见的实现方法：

js实现倒计时跳转页面

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

// 设置倒计时秒数
let countdown = 5;

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

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

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

// 立即显示初始值
updateCountdown();

// 每秒更新一次
const timer = setInterval(updateCountdown, 1000);

方法二：使用setTimeout实现倒计时

// 设置倒计时秒数
const countdown = 5;

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

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

    if (seconds > 0) {
        setTimeout(() => startCountdown(seconds - 1), 1000);
    } else {
        window.location.href = "https://example.com";
    }
}

// 开始倒计时
startCountdown(countdown);

HTML部分

两种方法都需要在HTML中添加显示倒计时的元素：

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

注意事项

倒计时时间单位是毫秒，1000毫秒=1秒跳转目标URL需要替换为实际要跳转的页面地址可以添加样式美化倒计时显示建议提供手动跳转按钮作为备选方案

完整示例

<!DOCTYPE html>
<html>
<head>
    <title>倒计时跳转示例</title>
    <style>
        #countdown {
            font-size: 24px;
            color: #333;
            margin: 20px;
        }
        #manualJump {
            padding: 10px 20px;
            background: #4CAF50;
            color: white;
            border: none;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="countdown"></div>
    <button id="manualJump">立即跳转</button>

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

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

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

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

        manualJumpBtn.addEventListener('click', () => {
            clearInterval(timer);
            window.location.href = "https://example.com";
        });
    </script>
</body>
</html>

以上代码实现了5秒倒计时后自动跳转页面，并提供了手动立即跳转按钮。可以根据实际需求调整倒计时时间和跳转目标URL。

js实现倒计时跳转页面