昨晚搞那个双十一预热页面的时候，产品经理突然跑来问：“那个‘立即抢购’的按钮，能不能做个倒计时？还有5分钟就失效。” 我当时心里就咯噔一下。以前我肯定直接甩个现成的JS库上去，或者找个在线生成器，两分钟搞定。但这次，我想着干脆自己撸一个，顺便把里面的坑都填了，省得以后别人再问。
说实话，现在网上搜“制作网页倒计时按钮”，出来的全是些花里胡哨的教程，要么代码冗长，要么依赖一堆乱七八糟的库。对于咱们这种追求极致加载速度的前端来说，真的没必要。我就用原生JS加一点点CSS，搞定一个轻量级的倒计时按钮，不仅性能好，而且完全可控。
先说HTML结构。别搞得太复杂，就是一个button标签，里面放个span用来显示时间。
`html
05:00 抢购
`
注意，我一开始把button设为了disabled，这是为了防止用户在倒计时结束前误触。很多教程这里会忽略，导致用户疯狂点击，服务器直接崩给你看。
然后是CSS。这里有个小细节，很多人喜欢用transition做动画，但我发现对于倒计时这种高频变化的元素，直接改text-content或者opacity更稳。不过为了好看，我加了个简单的呼吸灯效果，让那个“抢购”两个字有点律动感，增加紧迫感。
`css
countdownBtn {
background: #ff4d4f;
color: white;
border: none;
padding: 10px 20px;
border-radius: 4px;
cursor: not-allowed;
opacity: 0.8;
}
countdownBtn.active {
cursor: pointer;
opacity: 1;
animation: pulse 1s infinite;
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}
`
重点来了，JS逻辑。这里有个大坑，就是用setInterval。很多新手直接用setInterval去减时间，结果浏览器一后台运行，时间就对不上了。比如你切出去回个微信，再切回来，按钮显示的时间还是你切出去那一刻的，而不是当前时间。这体验太糟糕了。
我的做法是：记录一个目标时间戳（targetTime），然后每次刷新时，用Date.now()去减这个目标时间戳，算出剩余毫秒数，再转换成分秒。这样不管用户怎么切页面，时间都是准的。
`javascript
const btn = document.getElementById('countdownBtn');
const timeSpan = btn.querySelector('.time');
// 假设目标时间是5分钟后
let targetTime = Date.now() + 5 60 1000;
function updateCountdown() {
const now = Date.now();
const diff = targetTime - now;
if (diff <= 0) {
clearInterval(timer);
btn.disabled = false;
btn.classList.add('active');
timeSpan.textContent = '00:00';
return;
}
const minutes = Math.floor((diff / 1000 / 60) % 60);
const seconds = Math.floor((diff / 1000) % 60);
// 补零操作，比如9秒显示为09
timeSpan.textContent = ${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')};
}
let timer = setInterval(updateCountdown, 1000);
`
这里有个细节，padStart这个方法兼容性很好，但在极老的IE浏览器上可能会报错，如果你还要兼容IE，得自己写个补零函数。不过现在谁还用IE啊，对吧？
最后，点击事件处理。当倒计时结束，按钮变为active状态，这时候用户点击，你可以触发一个请求，比如“领取资格”。为了防止重复提交，我在点击后立刻把按钮再次disabled，并显示“已领取”。
`javascript
btn.addEventListener('click', function() {
if (btn.disabled) return;
btn.disabled = true;
btn.classList.remove('active');
timeSpan.textContent = '已抢';
// 这里可以发ajax请求
console.log('用户点击了抢购');
});
`
整个流程跑下来，代码不到50行，没有任何第三方依赖，加载速度飞快。我在测试的时候，发现如果倒计时时间很短，比如10秒，用户可能会觉得卡顿，这时候可以把interval改成100ms，提高刷新频率，视觉上更流畅。
总之，做这种小功能，别总想着依赖库。自己写一遍，才能知道里面的门道。下次再有人问你“制作网页倒计时按钮”怎么做，你就把这段代码甩给他，顺便告诉他那个时间同步的坑，保证他对你刮目相看。
本文关键词：制作网页倒计时按钮
