如何实现页面加载时自动启动倒计时跳转按钮？

当然可以实现页面访问时自动启动倒计时！我们只需要把倒计时的逻辑抽成独立函数，然后在页面加载完成后自动触发它，同时保留按钮的点击功能（比如点击后直接跳转，提升用户体验）。

以下是修改后的完整代码：

<button id="myButton" class="butstyle" style="float:right">Click To Redirect</button>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
var counter = 10;
var countdownInterval; // 存储定时器ID，方便后续控制

// 把倒计时逻辑抽成独立函数，方便复用
function startCountdown() {
    // 先清除可能存在的定时器，避免重复触发导致倒计时混乱
    if(countdownInterval) clearInterval(countdownInterval);
    
    counter = 10; // 重置倒计时数值
    updateButtonText(); // 初始化按钮显示文本
    
    countdownInterval = setInterval(function() {
        counter--;
        updateButtonText();
        
        if(counter <= 0) {
            clearInterval(countdownInterval);
            // 倒计时结束，跳转到Google
            window.location.href = "https://google.com";
        }
    }, 1000);
}

// 辅助函数：更新按钮上的显示文本
function updateButtonText() {
    $('.butstyle').text(`Redirecting in ${counter} seconds...`);
}

// 页面DOM加载完成后，自动启动倒计时
$(document).ready(function() {
    startCountdown();
    
    // 保留按钮点击事件：点击后直接跳过倒计时，立即跳转
    $('.butstyle').on('click', function(e) {
        e.preventDefault();
        e.stopPropagation();
        clearInterval(countdownInterval); // 清除正在运行的定时器
        window.location.href = "https://google.com";
    });
});
</script>

关键改动说明： #

• 抽离独立函数：把倒计时核心逻辑放到startCountdown中，既支持自动触发，也能在需要时手动调用。
• 页面加载自动触发：借助$(document).ready()，在页面DOM加载完成后立即启动倒计时，满足打开页面就倒计时的需求。
• 按钮交互优化：点击按钮时直接清除定时器并跳转，避免用户等待，提升体验。
• 定时器控制：用countdownInterval变量存储定时器ID，防止重复触发导致多个倒计时同时运行的问题。

如果你的原有代码里还有其他逻辑（比如hasClass相关的判断），直接把对应的逻辑整合到startCountdown或者按钮点击事件里即可。

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