一、案例简介
本案例是微信小程序计时器实现，基础功能实现计时、暂停、重置。扩展需求：在时间显示界面底层添加背景文字 “时间如流水”，作为页面装饰文字。本案例学习定时器、时间戳、页面布局 z-index 层级控制。
二、实现思路
- 计时原理：使用
Date.now()获取时间戳，计算时间差值，不使用累加计数（避免误差）。 - 格式化函数：把毫秒数转为
hh:mm:ss.xx时分秒毫秒格式，不足两位补 0。 - 三个按钮绑定 tap 事件：开始、暂停、重置。
- 扩展背景文字：利用
position:absolute绝对定位，z-index控制层级，背景文字放在底层，设置浅灰色大字体，实现水印式背景文字效果。 - 页面生命周期 onUnload 清除定时器，防止内存泄漏。
三、核心代码解析
formatTime(ms)时间格式化函数
接收总毫秒数，换算小时、分钟、秒、百分秒，使用 padStart 补零，保证显示格式整齐。- startTimer ()
判断计时器没有运行时，记录起始时间戳，开启 setInterval 定时刷新时间。 - pauseTimer ()
清除定时器，修改标记isRunning，停止计时更新。 - resetTimer ()
清除定时器，重置所有数据，时间归零。 - 背景文字布局
bg-text 使用position:absolute，z-index:1放在底层；时间盒子 z-index:2，保证数字在背景文字上方。
四、页面样式说明
页面垂直居中布局，背景文字浅灰色，字号大，作为背景，不影响计时器文字阅读。三个按钮横向均匀分布，控制计时器。
五、运行效果
- 点击【开始】，计时器开始走动；
- 点击【暂停】，时间停止；
- 点击【重置】，时间清零；
- 页面底层可见淡色背景文字：时间如流水，满足扩展要求。
六、知识点总结
- 小程序点击事件 bindtap
- JS 时间戳 Date.now ()
- setInterval /clearInterval 定时器
- setData 更新视图
- CSS 定位 position、z-index 层叠顺序
- 字符串补零 padStart
七、源码
完整页面包含 wxml/wxss/js/json，可直接导入微信开发者工具运行。
