一、案例简介本案例是微信小程序计时器实现基础功能实现计时、暂停、重置。扩展需求在时间显示界面底层添加背景文字 “时间如流水”作为页面装饰文字。本案例学习定时器、时间戳、页面布局 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:absolutez-index:1放在底层时间盒子 z-index:2保证数字在背景文字上方。四、页面样式说明页面垂直居中布局背景文字浅灰色字号大作为背景不影响计时器文字阅读。三个按钮横向均匀分布控制计时器。五、运行效果点击【开始】计时器开始走动点击【暂停】时间停止点击【重置】时间清零页面底层可见淡色背景文字时间如流水满足扩展要求。六、知识点总结小程序点击事件 bindtapJS 时间戳 Date.now ()setInterval /clearInterval 定时器setData 更新视图CSS 定位 position、z-index 层叠顺序字符串补零 padStart七、源码完整页面包含 wxml/wxss/js/json可直接导入微信开发者工具运行。