一、项目功能介绍本次开发的小程序计时器实现了完整的倒计时交互效果核心功能如下默认初始数值为 60 秒点击【开始计时】数字每秒自动减 1倒计时为 0 时自动停止点击【停止计时】可随时暂停当前倒计时点击【重新计时】重置计时器恢复初始 60 秒状态页面添加背景文艺文字逝者如斯夫不舍昼夜利用 CSS 伪元素实现背景水印效果二、核心技术知识点1. 小程序数据双向绑定小程序不支持 DOM 操作所有页面数据更新都依靠Page 数据绑定 setData 更新。我们在 data 中定义 count 存储倒计时数字页面通过 {{count}} 渲染数值修改数据时通过 setData 驱动视图更新这是小程序开发的核心思想。2. JS 定时器 setInterval / clearInterval倒计时的核心原理就是定时器setInterval 可以每隔指定时间执行一次代码配合数字自减实现倒计时。同时需要用 clearInterval 清除定时器避免定时器叠加、页面卡顿等问题。3. CSS 伪元素 ::before 定位特效本次作业重点难点就是伪元素叠加效果。伪元素不属于 DOM 结构无需新增标签即可为盒子添加背景文字。实现关键父盒子设置 relative 相对定位伪元素设置 absolute 绝对定位让文字固定在盒子底层实现水印背景效果。三、开发思路拆解1.结构层wxml搭建页面结构分为标题、计时器展示盒子、功能按钮区通过 bindtap 绑定点击事件。2.样式层wxss美化计时器盒子设置蓝色圆角背景、黄色数字、绿色按钮利用 ::before 添加背景文字并调整透明度实现层次感。3.逻辑层js定义初始数据编写开始、暂停、重置三个核心函数判断定时器状态防止重复触发倒计时结束自动清除定时器。四、开发踩坑总结坑点1多次点击开始计时计时加速原因多次开启定时器会创建多个计时器实例。解决开启定时器前判断定时器是否存在存在则不重复创建。坑点2重置后定时器依旧后台运行解决重置和暂停时必须先 clearInterval 清空定时器再重置数据。坑点3伪元素文字无法居中、层级错乱解决父容器必须开启相对定位伪元素绝对定位居中同时设置透明度不遮挡主数字。五、学习感悟这个计时器案例看似简单却涵盖了前端开发非常重要的思想视图与数据分离、定时器合理使用、CSS 层级与定位。尤其是伪元素的使用让我学会了无需新增标签即可美化页面简化了代码结构让代码更加简洁优雅。“逝者如斯夫不舍昼夜”放在计时器背景格外贴切。时间转瞬即逝代码学习也是日积月累每一个小案例的打磨都是技术提升的积累。未来会继续深耕小程序基础做好每一个实战案例。六、完整代码index.js: // index.js let num60 let isTimetrue let timerId Page({ data: { hidden:true, num }, onLoad(){ setTimeout(() { this.show() },2000) }, show() { this.setData({ hidden:false }) }, start(){ if(isTime){ timerIdsetInterval(() { this.timer() },1000) } }, timer(){ console.log(num); this.setData({ num }) if(num0){ num-- }else{ clearInterval(timerId) isTimefalse } }, stop(){ clearInterval(timerId) isTimetrue }, restart(){ clearInterval(timerId) isTimetrue num60 this.setData({ num }) this.start() } }) index.wxml: !--index.wxml-- navigation-bar title计时器 back{{false}} colorblack background#FFF/navigation-bar scroll-view classscrollarea scroll-y typelist view classbox hidden{{hidden}} view classtitle计时器函数的应用/view view classtime{{num}}/view view classbtn-layout button typeprimary sizemini bind:tapstart开始计时/button button typeprimary sizemini bind:tapstop停止计时/button button typeprimary sizemini bind:taprestart重新计时/button /view /view /scroll-view 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: 200px; text-align: center; border: 2rpx solid red; border-radius: 60rpx; margin: 30rpx; } .time::before{ content:逝者如斯夫 不舍昼夜; position:absolute; font-size:45rpx; text-align: center; color:#cccccc; opacity:1.0; } .btn-layout{ display: flex; flex-direction: row; } app.json: { pages: [ pages/index/index ], window: { navigationBarTextStyle: black, navigationStyle: custom }, style: v2, renderer: webview, rendererOptions: { skyline: { defaultDisplayBlock: true, defaultContentBox: true, tagNameStyleIsolation: legacy, disableABTest: true, sdkVersionBegin: 3.0.0, sdkVersionEnd: 15.255.255 } }, componentFramework: glass-easel, sitemapLocation: sitemap.json, lazyCodeLoading: requiredComponents }七、运行效果