一、完成效果二、制作流程1.修改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-view2.修改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; overflow: hidden; z-index: 1; } .time::before { content: 逝者如斯夫 不舍昼夜; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 40rpx; color: rgba(255, 255, 255, 0.3); white-space: nowrap; z-index: -1; } .btn-layout { display: flex; flex-direction: row; }3.修改app.wxss文件/**app.wxss**/ .container { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 200rpx 0; box-sizing: border-box; } /**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; }4.修改index.js文件// index.js // 计时的初始值 let num 60 // 是否可以计时 let isTime true // 定时器编号停止定时器会用到 let timerId Page({ data: { hidden: true, num }, onLoad() { // 延迟2000毫米执行 setTimeout(() { this.show() }, 2000) }, show() { this.setData({ hidden: false }) }, // 开始计时 start() { if (isTime) { timerId setInterval(() { this.timer() // 每1000毫米执行1次 }, 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() } })三、个人总结希望可以坚持学下去