当前位置：首页 > JavaScript

js实现倒计时页面跳转

2026-04-04 12:16:39JavaScript

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

使用JavaScript实现倒计时并自动跳转页面，可以通过以下步骤完成：

设置倒计时显示和跳转逻辑

在HTML中创建一个用于显示倒计时的元素：

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

在JavaScript中编写倒计时逻辑：

let count = 5; // 设置倒计时初始值
const countdownElement = document.getElementById('countdown');

const timer = setInterval(() => {
    count--;
    countdownElement.textContent = count;

    if (count <= 0) {
        clearInterval(timer);
        window.location.href = 'https://example.com'; // 替换为目标URL
    }
}, 1000); // 每秒更新一次

使用页面加载事件触发倒计时

确保页面加载完成后开始倒计时：

window.onload = function() {
    // 倒计时逻辑代码
};

添加可选的跳过按钮

为用户提供手动跳过的选项：

<button id="skipButton">跳过</button>

document.getElementById('skipButton').addEventListener('click', function() {
    clearInterval(timer);
    window.location.href = 'https://example.com';
});

使用CSS美化倒计时显示

为倒计时添加基本样式：

js实现倒计时页面跳转

#countdown {
    font-size: 24px;
    color: #333;
    text-align: center;
    margin: 20px;
}

完整示例代码

<!DOCTYPE html>
<html>
<head>
    <title>倒计时跳转</title>
    <style>
        #countdown {
            font-size: 24px;
            color: #333;
            text-align: center;
            margin: 20px;
        }
        #skipButton {
            display: block;
            margin: 0 auto;
            padding: 8px 16px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="countdown">5</div>
    <button id="skipButton">跳过</button>

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

        const timer = setInterval(() => {
            count--;
            countdownElement.textContent = count;

            if (count <= 0) {
                clearInterval(timer);
                redirect();
            }
        }, 1000);

        skipButton.addEventListener('click', function() {
            clearInterval(timer);
            redirect();
        });

        function redirect() {
            window.location.href = 'https://example.com';
        }
    </script>
</body>
</html>