js实现自定义倒计时器

2026-03-02 03:34:41JavaScript

实现自定义倒计时器的步骤

1. 创建HTML结构
在HTML中定义一个容器用于显示倒计时，并添加必要的按钮控制：

<div id="countdown">00:00:00</div>
<button id="startBtn">开始</button>
<button id="pauseBtn">暂停</button>
<button id="resetBtn">重置</button>

2. 定义CSS样式（可选）
为倒计时器添加基础样式：

js实现自定义倒计时器

#countdown {
  font-size: 2rem;
  text-align: center;
  margin: 20px;
}
button {
  padding: 8px 16px;
  margin: 5px;
}

3. JavaScript核心逻辑
通过setInterval和clearInterval实现计时功能：

let timer;
let seconds = 0;
const countdownEl = document.getElementById('countdown');
const startBtn = document.getElementById('startBtn');
const pauseBtn = document.getElementById('pauseBtn');
const resetBtn = document.getElementById('resetBtn');

// 格式化时间显示（HH:MM:SS）
function formatTime(secs) {
  const hours = Math.floor(secs / 3600).toString().padStart(2, '0');
  const minutes = Math.floor((secs % 3600) / 60).toString().padStart(2, '0');
  const seconds = (secs % 60).toString().padStart(2, '0');
  return `${hours}:${minutes}:${seconds}`;
}

// 开始计时
startBtn.addEventListener('click', () => {
  if (!timer) {
    timer = setInterval(() => {
      seconds++;
      countdownEl.textContent = formatTime(seconds);
    }, 1000);
  }
});

// 暂停计时
pauseBtn.addEventListener('click', () => {
  clearInterval(timer);
  timer = null;
});

// 重置计时
resetBtn.addEventListener('click', () => {
  clearInterval(timer);
  timer = null;
  seconds = 0;
  countdownEl.textContent = formatTime(seconds);
});

高级功能扩展

1. 自定义初始时间
修改代码以支持设置初始时间：

js实现自定义倒计时器

let totalSeconds = 3600; // 初始化为1小时
// 在计时逻辑中将seconds++改为seconds--

2. 添加完成回调
倒计时结束时触发事件：

if (seconds <= 0) {
  clearInterval(timer);
  alert('倒计时结束！');
}

3. 本地存储持久化
使用localStorage保存计时状态：

// 页面加载时读取
if (localStorage.getItem('countdownTime')) {
  seconds = parseInt(localStorage.getItem('countdownTime'));
  countdownEl.textContent = formatTime(seconds);
}

// 在计时逻辑中添加保存
localStorage.setItem('countdownTime', seconds.toString());