微信小程序实验：计时器

本案例实现倒计时计时器，页面初始 2 秒空白后展示计时面板，支持开始计时、停止计时、重新计时；倒计时初始值 60，暂停后可继续计时，计数到 0 自动停止。拓展功能使用 CSS 伪元素在计时框增加背景文字。

知识点：setTimeout延时定时器、setInterval周期定时器、clearInterval清除定时器、条件渲染hidden、CSS 伪元素与绝对定位。

开发环境

• 微信开发者工具
• 渲染引擎：webview
• 项目：不使用云服务、不使用模板

一、需求分析

1. 小程序打开先空白 2 秒，2 秒后渲染计时界面。
2. 倒计时初始数值为 60。
3. 点击开始计时，每秒数字减 1；
4. 点击停止计时暂停倒计时，未到 0 时再次点击开始可继续计时；
5. 倒计时归 0 后，点击开始 / 停止都不会继续变化；
6. 点击重新计时，重置为 60 并启动倒计时。
7. ✨拓展作业：计时框内部增加背景文字 “逝者如斯夫，不舍昼夜”。

二、实现原理

1. setTimeout延时定时器：只执行一次，实现页面 2 秒后才显示计时面板。
2. setInterval周期定时器：每隔 1000ms 执行一次，实现数字每秒递减；保存timerId定时器编号。
3. clearInterval(timerId)：传入定时器编号，终止周期计时，实现暂停。
4. hidden条件渲染：控制整个计时模块显示与隐藏。
5. CSS 伪元素::before+ 相对 / 绝对定位，叠加背景水印文字，不改动 DOM 结构。
6. 边界处理：倒计时等于 0 时，清除定时器，禁止继续计时。

三、完整代码实现

1.app.json

{ "pages": [ "pages/index/index" ], "window": { "navigationBarTextStyle": "black", "navigationStyle": "custom" }, "style": "v2", "renderer": "webview", "componentFramework": "glass‑easel", "sitemapLocation": "sitemap.json", "lazyCodeLoading": "requiredComponents" }

2.pages/index/index.wxml

<!--index.wxml--> <navigation-bar title="计时器" back="{{false}}" color="black" background="#FFF"></navigation-bar> <scroll-view class="scrollarea" scroll-y type="list"> <view class="box" hidden="{{hidden}}"> <view class="title">计时器函数的应用</view> <view class="time">{{num}}</view> <view class="btn-layout"> <button type="primary" size="mini" bind:tap="start">开始计时</button> <button type="primary" size="mini" bind:tap="stop">停止计时</button> <button type="primary" size="mini" bind:tap="restart">重新计时</button> </view> </view> </scroll-view>

3.pages/index/index.js

// index.js let num = 60 let isTime = true let timerId Page({ data: { hidden: true, num }, onLoad() { //延时2000ms执行，2秒后显示计时界面 setTimeout(() => { this.show() }, 2000) }, show() { this.setData({ hidden: false }) }, //开始计时 start() { if (isTime) { timerId = setInterval(() => { this.timer() }, 1000) } }, //每秒执行的计时逻辑 timer() { console.log(num); this.setData({ num }) if (num > 0) { num-- } else { //倒计时到0，清除定时器，禁止计时 clearInterval(timerId) isTime = false } }, //停止计时 stop() { clearInterval(timerId) isTime = true }, //重新计时 restart() { clearInterval(timerId) isTime = true num = 60 this.setData({ num }) this.start() } })

4.pages/index/index.wxss（含拓展伪元素）

/**index.wxss**/ page { height: 100vh; display: flex; flex-direction: column; } .scrollarea { flex: 1; overflow-y: hidden; } .time { width: 90%; background-color: blue; color: yellow; font-size: 200rpx; text-align: center; border: 2rpx solid red; border-radius: 60rpx; margin: 30rpx; position: relative; z-index: 1; } /*拓展：CSS伪元素实现背景水印文字*/ .time::before { content: "逝者如斯夫，不舍昼夜"; position: absolute; z-index: 0; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 40rpx; color: #cccccc; } .btn-layout { display: flex; flex-direction: row; }

5.app.wxss

/**app.wxss**/ .box { margin: 20rpx; padding: 20rpx; border: 2rpx solid purple; } .title { font-size: 40rpx; font-weight: bolder; text-align: center; margin-bottom: 30rpx; color: pink; }

四、核心 API 讲解

1. setTimeout(callback, delay)一次性延时定时器，等待 delay 毫秒执行回调，只执行一次；本案例用于 2 秒延迟展示页面。
2. setInterval(callback, delay)周期性定时器，每隔 delay 毫秒重复执行回调，返回timerId编号。
3. clearInterval(timerId)根据定时器编号，关闭周期定时器，停止循环执行，实现暂停计时。
4. hidden="{{hidden}}"条件渲染属性，true隐藏组件，false显示组件。
5. CSS ::before 伪元素不需要增加 DOM 标签，直接给元素添加虚拟内容；配合relative+absolute实现文字叠加水印效果。

五、踩坑记录

1. ❌忘记保存timerId，无法停止定时器，计时无法暂停。 注意：setInterval返回编号，停止时必须传入该编号给clearInterval。
2. 多次点击开始计时，会开启多个定时器，数字加速递减。 处理：用isTime标记，计时运行时禁止重复开启定时器
3. 倒计时到 0 没有清除定时器，会出现负数；判断num>0再递减，归 0 调用clearInterval。
4. 调用restart重新计时，没有先clearInterval，旧定时器还在后台运行，出现计时错乱。
5. 伪元素不显示：父盒子没有设置position:relative，绝对定位找不到参照。

六、运行效果

1. 进入小程序，前 2 秒页面空白；2 秒后出现蓝色计时框，初始数字 60。
2. 点击开始计时，数字每秒减 1，控制台打印数值。
3. 点击停止计时，数字暂停；再次点击开始，继续往下倒计时。
4. 数字降到 0，自动停止，再点开始不再变化。
5. 点击重新计时，数字重置 60，自动开始倒计时；计时框底层显示灰色背景文字 “逝者如斯夫，不舍昼夜”。

七、总结

本案例实现小程序倒计时计时器，setTimeout实现 2 秒延迟显示界面，setInterval与clearInterval控制倒计时启停，完成开始、停止、重新计时业务逻辑；利用 CSS 伪元素实现水印背景文字。掌握延时定时器、周期定时器、定时器销毁、条件渲染，注意管理 timerId 防止多定时器并发问题。