一、项目简介本案例使用微信小程序原生开发实现一个可视化计时器页面。页面包含左上角实时时间、页面标题、蓝色倒计时显示框带背景水印文字以及开始、停止、重置三个功能按钮打开页面 2 秒后才展示计时器面板。页面效果紫色外边框容器左上角实时时分粉色标题计时器函数的应用蓝色圆角矩形倒计时区域黄色大号数字背景水印文字一寸光阴一寸金寸金难买寸光阴底部 3 个绿色操作按钮二、wxml 页面结构 index.wxml!--index.wxml-- scroll-view classscrollarea scroll-y typelist view classbox hidden{{hidden}} view classtop-time{{currentTime}}/view 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三、wxss 样式 index.wxss/**index.wxss**/ page { height: 100vh; display: flex; flex-direction: column; background-color: #ffffff; } .scrollarea { flex: 1; overflow-y: hidden; } .box { margin: 30rpx 20rpx 20rpx 20rpx; padding: 30rpx 20rpx 40rpx 20rpx; border: 2rpx solid purple; } .top-time { font-size: 32rpx; color: #333333; text-align: left; margin-bottom:25rpx; } .title { font-size: 38rpx; font-weight: bolder; text-align: center; color: pink; margin-bottom: 30rpx; } .time { width: 92%; background-color: blue; color: yellow; font-size: 200rpx; font-weight: bold; text-align: center; border: 2rpx solid red; border-radius: 40rpx; margin: 0 auto 35rpx auto; padding: 50rpx 0; position: relative; z-index: 2; } /*水印文字你当前代码样式*/ .time::before { content: 一寸光阴一寸金寸金难买寸光阴; position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 36rpx; color: #fda7a7; opacity: 0.5; z-index: 1; } .btn-layout { display: flex; flex-direction: row; justify-content: center; gap:22rpx; }四、js 逻辑代码 index.js// index.js let num 60 let timerId let timeTimer Page({ data: { hidden: true, num, currentTime: }, onLoad() { // 页面加载2秒后显示计时器盒子 setTimeout(() { this.show() }, 2000) // 更新左上角实时时间 this.updateTime() timeTimer setInterval(() { this.updateTime() }, 1000) }, // 更新系统时间函数 updateTime() { const now new Date() let h now.getHours() let m now.getMinutes() h h 10 ? 0 h : h m m 10 ? 0 m : m this.setData({ currentTime: h : m }) }, show() { this.setData({ hidden: false }) }, // 开始倒计时 start() { if (!timerId) { timerId setInterval(() { this.timer() }, 1000) } }, // 数字递减逻辑 timer() { this.setData({ num }) if (num 0) { num-- } else { clearInterval(timerId) timerId null } }, // 停止计时 stop() { clearInterval(timerId) timerId null }, // 重置回到60 restart() { clearInterval(timerId) timerId null num 60 this.setData({ num }) this.start() }, //页面销毁清除定时器防止内存泄露 onUnload() { clearInterval(timeTimer) } })五、app.json{ pages: [ pages/index/index ], window: { backgroundTextStyle: light, navigationBarBackgroundColor: #fff, navigationBarTitleText: 计时器, navigationBarTextStyle: black }, style: v2, sitemapLocation: sitemap.json }六、核心知识点讲解position:relative::before伪元素实现水印.time设置position:relative伪元素.time::before设置absolute可以在蓝色框内部叠加一层文字水印。z-index:1水印放底层黄色数字z-index:2在上层保证数字不会被水印盖住。color:#fda7a7浅红色文字opacity:0.5透明度数值越大文字越深。定时器 setInterval一个定时器用于左上角实时时间每秒刷新一个定时器用于60 秒倒计时点击开始才启用一定要在页面销毁onUnload清除定时器防止定时器后台持续运行。hidden 条件渲染页面加载等待 2 秒再将hidden改为 false展示计时器面板。七、修改小技巧如果水印文字想要更深直接调整opacity:0.5→opacity:0.6数字越大文字越清晰。opacity: 0.6;八、运行步骤微信开发者工具新建小程序项目替换 pages/index 下面 index.wxml/index.wxss/index.js替换 app.json编译运行模拟器即可查看效果
