微信小程序页面实现一个 从指定时间开始递增的时间计时器

微信小程序页面实现一个 从指定时间开始递增的时间计时器

整体结构

wxml部分

<view class="bottom-item-content">{{ formattedTime }}</view>

js部分

Page({
  data: { ... },
  onLoad() { ... },
  onUnload() { ... },
  formatTime(seconds) { ... }
});

这是一个标准的 微信小程序页面对象定义，包含：
data：页面数据（状态）
onLoad()：页面加载时执行的方法
onUnload()：页面卸载（关闭）时执行的方法
formatTime(seconds)：自定义方法，用于格式化秒数为 HH:mm:ss 格式

data 数据部分

data: {
  elapsedTime: 1526, // 初始时间为 00:25:26
  formattedTime: '00:25:26',
  timer: null
}

onLoad 生命周期函数

onLoad() {
  const timer = setInterval(() => {
    const newElapsedTime = this.data.elapsedTime + 1;
    this.setData({
      elapsedTime: newElapsedTime,
      formattedTime: this.formatTime(newElapsedTime)
    });
  }, 1000);

  this.setData({ timer });
}

🔍 功能说明：
页面加载时启动一个定时器，每 1000 毫秒（即 1 秒） 执行一次操作。
每次执行：
将 elapsedTime 增加 1 秒
调用 formatTime() 方法将新的秒数格式化成 HH:mm:ss
使用 setData() 更新页面数据，触发视图刷新
💡 注意事项：
this.setData() 是小程序更新视图的核心方法
setInterval() 返回一个定时器 ID，后续可用于清除定时器

onUnload 生命周期函数

onUnload() {
  if (this.data.timer) {
    clearInterval(this.data.timer);
  }
}

🔍 功能说明：
页面卸载（用户离开页面）时清除定时器
避免定时器继续运行造成内存泄漏或异常行为

formatTime 方法

formatTime(seconds) {
  const h = String(Math.floor(seconds / 3600)).padStart(2, '0');
  const m = String(Math.floor((seconds % 3600) / 60)).padStart(2, '0');
  const s = String(seconds % 60).padStart(2, '0');
  return `${h}:${m}:${s}`;
}

🔍 功能说明：
将传入的秒数转换为 HH:mm:ss 格式的字符串。
🧮 公式详解：
Math.floor(seconds / 3600) → 计算小时数（1小时=3600秒）
Math.floor((seconds % 3600) / 60) → 计算分钟数
seconds % 60 → 计算剩余秒数
.padStart(2, ‘0’) → 不足两位补前导 0，如 5 → 05

总结

✅ 总结
模块➡功能描述
data➡存储当前时间戳和格式化后的字符串
onLoad➡启动定时器，每秒更新时间
onUnload➡页面关闭时清理定时器
formatTime➡将秒数格式化为 HH:mm:ss 显示格式