一、项目简介
本案例使用微信小程序原生开发，实现一个可视化计时器页面。页面包含左上角实时时间、页面标题、蓝色倒计时显示框（带背景水印文字），以及开始、停止、重置三个功能按钮，打开页面 2 秒后才展示计时器面板。
页面效果：
- 紫色外边框容器
- 左上角实时时分
- 粉色标题：计时器函数的应用
- 蓝色圆角矩形倒计时区域，黄色大号数字
- 背景水印文字：一寸光阴一寸金，寸金难买寸光阴
- 底部 3 个绿色操作按钮
二、wxml 页面结构 index.wxml
<!--index.wxml--> <scroll-view class="scrollarea" scroll-y type="list"> <view class="box" hidden="{{hidden}}"> <view class="top-time">{{currentTime}}</view> <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>三、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
- 编译运行模拟器，即可查看效果
