JavaScript 中怎么实现一个倒计时计数器功能-js教程-PHP中文网

倒计时计数器用原生js实现：设目标时间、算剩余时间、定时更新显示、结束触发回调；基础版用setinterval每秒递减，归零时清除定时器并执行onend。

javascript 中怎么实现一个倒计时计数器功能

用 JavaScript 实现倒计时计数器，核心是 设置目标时间、计算剩余时间、定时更新显示、结束时触发回调。不需要复杂库，原生 JS 就能搞定。

1. 基础倒计时：固定秒数倒数

适合简单场景（如按钮禁用 5 秒、弹窗自动关闭）。用 setInterval 每秒减 1，到 0 停止并清理定时器：

function startCountdown(seconds, onTick, onEnd) {
  let remaining = seconds;
  const timer = setInterval(() => {
    if (remaining // 使用示例：倒数 10 秒
startCountdown(10,
sec => console.log(<code>${sec}秒</code>),
() => console.log("倒计时结束！")
);

2. 精确倒计时：按目标时间计算（推荐）

避免 setInterval 累积误差，每次重新计算当前到目标时间的差值。更稳定，尤其用于活动截止、订单超时等关键场景：

Java Maven Code Review

审查Java Maven项目（ZIP压缩包或GitLab仓库URL），检查代码规范、命名、模块边界、可维护性问题以及重复代码。

下载

function startTargetCountdown(targetTime, onTick, onEnd) {
  const target = new Date(targetTime).getTime();
  let timer;
<p>function tick() {
const now = Date.now();
const diff = target - now;</p><pre class="brush:php;toolbar:false;">if (diff <p>}</p><p>timer = setInterval(tick, 1000);
tick(); // 立即执行一次，避免首帧延迟
}</p>

调用示例（倒计时到明天 0 点）：

const tomorrow = new Date();
tomorrow.setDate(tomorrow.getDate() + 1);
tomorrow.setHours(0, 0, 0, 0);
<p>startTargetCountdown(
tomorrow,
({ hours, minutes, seconds }) => {
document.getElementById("countdown").textContent = 
<code>${hours}h ${minutes}m ${seconds}s</code>;
},
() => alert("时间到！")
);</p>

3. 可控倒计时：支持暂停、恢复、重置

封装成对象，便于交互控制：

class Countdown {
  constructor(targetTime) {
    this.target = new Date(targetTime).getTime();
    this.timer = null;
    this.isRunning = false;
  }
<p>start(onTick, onEnd) {
if (this.isRunning) return;
this.isRunning = true;
this.timer = setInterval(() => {
const diff = this.target - Date.now();
if (diff </p><p>pause() {
if (this.isRunning) {
clearInterval(this.timer);
this.isRunning = false;
}
}</p><p>resume(onTick, onEnd) {
if (!this.isRunning) this.start(onTick, onEnd);
}</p><p>reset(newTargetTime) {
this.pause();
this.target = new Date(newTargetTime).getTime();
}</p><p>format(ms) {
return {
days: Math.floor(ms / 86400000),
hours: Math.floor((ms % 86400000) / 3600000),
minutes: Math.floor((ms % 3600000) / 60000),
seconds: Math.floor((ms % 60000) / 1000)
};
}</p><p>stop() {
clearInterval(this.timer);
this.timer = null;
this.isRunning = false;
}
}</p><p>// 使用
const cd = new Countdown(Date.now() + 60000); // 60秒后
cd.start(
t => console.log(<code>${t.minutes}:${t.seconds}</code>),
() => console.log("完成")
);</p>