网页点击按钮触发倒计时计时器，显示后随页面加载完成消失的问题排查求助

嘿，我一眼就看出问题所在啦！你遇到的计时器短暂显示后消失，核心原因是点击按钮触发了页面的默认刷新行为——如果你的按钮是放在<form>标签里，或者没有明确指定按钮类型，浏览器会默认把它当成提交按钮，点击后就会触发表单提交，页面一刷新，之前创建的计时器自然就被重置了。

下面给你几个简单有效的解决方案：

方案1：给按钮指定type="button" #

这是最直接的方法，明确告诉浏览器这个按钮只是普通按钮，不会触发提交行为：

<button type="button" onclick="StartTimer()">开始倒计时</button>
<p id="demo"></p>

方案2：阻止按钮的默认行为 #

如果不想改按钮类型，也可以在函数里或者点击事件里阻止默认的提交动作：

• 方法A：在onclick里返回false

<button onclick="StartTimer(); return false;">开始倒计时</button>

• 方法B：在函数中接收事件参数并调用preventDefault()

function StartTimer(event) {
    event.preventDefault(); // 阻止默认提交行为
    // 下面是你原来的倒计时逻辑
    var countDownDate = new Date().getTime() + 10000;
    var x = setInterval(function() {
        var now = new Date().getTime();
        var distance = countDownDate - now;
        
        var days = Math.floor(distance / (1000 * 60 * 60 * 24));
        var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
        var seconds = Math.floor((distance % (1000 * 60)) / 1000);
        
        document.getElementById("demo").innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s ";
        
        if (distance < 0) {
            clearInterval(x);
            document.getElementById("demo").innerHTML = "EXPIRED";
        }
    }, 1000);
}

对应的按钮写法：

<button onclick="StartTimer(event)">开始倒计时</button>

额外小提示 #

你原来的代码里在页面加载时就调用了StartTimer();，如果你的需求是点击按钮才开始倒计时，记得把这行代码删掉哦，不然页面一加载就会自动启动倒计时啦。

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