PDD倒计时实现

概述

本文档描述了PDD系统中高精度倒计时功能的实现，支持以100毫秒为单位的精确显示格式。该实现能够精确显示时、分、秒、百毫秒（100毫秒）四个时间单位。

功能特性

• 高精度倒计时，精确到100毫秒
• 支持60分钟以下任意时长倒计时
• 实时更新显示，每100毫秒刷新一次
• 完善的开始、停止、更新机制
• 自动处理倒计时结束状态

核心函数

1. startCountdown(remainingMs)

开始倒计时函数。

参数：

• remainingMs (number): 剩余时间，单位为毫秒

功能描述：

• 清除可能存在的旧定时器
• 记录开始时间和初始剩余时间
• 设置运行状态为true
• 立即执行一次时间更新
• 启动定时器，每100毫秒更新一次显示

示例：

// 开始10秒倒计时
startCountdown(10000);

2. stopCountdown()

停止倒计时函数。

功能描述：

• 清除定时器
• 重置运行状态
• 清空定时器引用

示例：

// 停止当前倒计时
stopCountdown();

3. updateCountdown()

更新倒计时显示的内部函数。

功能描述：

• 计算已流逝时间
• 计算剩余时间
• 将剩余时间分解为时、分、秒、百毫秒
• 更新状态中的时间显示
• 处理倒计时结束逻辑

时间计算逻辑：

hours = Math.floor(remaining / 3600000)      // 小时
minutes = Math.floor(remaining / 60000)       // 分钟  
seconds = Math.floor(remaining / 1000)        // 秒
hectoMs = Math.floor((remaining % 1000) / 100) // 百毫秒 (0-9)

完整代码实现

// 倒计时状态管理
const state = {
  timer: null,           // 定时器引用
  startTime: 0,          // 开始时间戳
  isRunning: false,      // 运行状态
  countDown: {           // 时间显示状态
    hour: "00",
    minute: "00", 
    second: "00",
    millisecond: "00",
    intDiff: 0
  }
};

/**
 * 开始倒计时
 * @param {number} remainingMs - 剩余时间（毫秒）
 */
const startCountdown = (remainingMs) => {
  // 清除可能存在的旧定时器
  if (state.timer) {
    clearInterval(state.timer);
  }
  
  const startTime = Date.now();
  state.countDown.intDiff = remainingMs;
  state.startTime = startTime;
  state.isRunning = true;
  
  // 立即更新一次显示
  updateCountdown();
  
  // 启动定时器，每100毫秒更新一次
  const timer = setInterval(() => {
    updateCountdown();
  }, 100);
  
  state.timer = timer;
};

/**
 * 停止倒计时
 */
const stopCountdown = () => {
  if (state.timer) {
    clearInterval(state.timer);
    state.isRunning = false;
    state.timer = null;
  }
};

/**
 * 更新倒计时显示
 */
const updateCountdown = () => {
  if (!state.isRunning) return;
  
  // 计算已流逝时间
  const elapsed = Date.now() - state.startTime;
  let remaining = state.countDown.intDiff - elapsed;
  
  // 检查是否倒计时结束
  if (remaining <= 0) {
    console.log("倒计时结束");
    
    // 重置时间显示
    state.countDown = {
      hour: "00",
      minute: "00",
      second: "00", 
      millisecond: "00",
      intDiff: 0,
    };
    
    stopCountdown();
    return; // 可在此处添加倒计时结束回调
  }
  
  // 计算各部分时间
  const hours = Math.floor(remaining / 3600000);
  remaining %= 3600000;
  
  const minutes = Math.floor(remaining / 60000);
  remaining %= 60000;
  
  const seconds = Math.floor(remaining / 1000);
  const hectoMs = Math.floor((remaining % 1000) / 100); // 100毫秒为单位 (0-9)
  
  // 格式化为字符串
  const hoursStr = hours.toString().padStart(2, "0");
  const minutesStr = minutes.toString().padStart(2, "0");
  const secondsStr = seconds.toString().padStart(2, "0");
  
  // 更新状态
  state.countDown.hour = hoursStr;
  state.countDown.minute = minutesStr;
  state.countDown.second = secondsStr;
  state.countDown.millisecond = hectoMs;
};

使用示例

基础使用

// 开始1分钟倒计时
startCountdown(60000);

// 获取当前显示时间
console.log(state.countDown); 
// 输出: { hour: "00", minute: "00", second: "59", millisecond: "9", intDiff: 60000 }

// 停止倒计时
stopCountdown();

显示格式化

// 格式化显示时间字符串
const formatTime = () => {
  const { hour, minute, second, millisecond } = state.countDown;
  return `${hour}:${minute}:${second}:${millisecond}`;
};

console.log(formatTime()); // 输出: "00:00:59:9"

与UI绑定

// 假设有HTML元素
// <div id="countdown-display">00:00:00:0</div>

const updateDisplay = () => {
  const { hour, minute, second, millisecond } = state.countDown;
  const display = document.getElementById('countdown-display');
  if (display) {
    display.textContent = `${hour}:${minute}:${second}:${millisecond}`;
  }
};

// 修改updateCountdown函数，添加UI更新
const updateCountdown = () => {
  // ... 原有逻辑 ...
  
  updateDisplay(); // 更新UI显示
};

技术说明

时间精度

• 使用Date.now()获取高精度时间戳
• 定时器间隔为100毫秒，确保显示流畅性
• 百毫秒显示范围：0-9（对应0-900毫秒）

内存管理

• 使用单例模式管理定时器
• 避免定时器泄漏，停止时彻底清理
• 状态集中管理，便于维护

性能优化

• 立即执行一次更新，避免初始延迟
• 使用取模运算减少重复计算
• 字符串格式化仅在需要时执行

注意事项

1. 定时器清理: 确保在组件卸载或页面离开时调用stopCountdown()
2. 时间精度: 由于JavaScript定时器特性，实际精度可能略有偏差
3. 长时间倒计时: 对于超过60分钟的倒计时，建议增加分钟处理逻辑
4. 状态重置: 重新开始倒计时前会自动清理旧定时器

扩展建议

1. 添加暂停/继续功能
2. 支持自定义时间格式
3. 添加倒计时事件回调
4. 实现倒计时历史记录
5. 添加声音提醒功能

版本信息

• 版本: 1.0
• 创建日期: 2026-07-08
• 适用场景: PDD系统倒计时模块