一、完成效果

二、制作流程

1.修改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>

2.修改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() } })

三、个人总结

希望可以坚持学下去