计时器在我们日常生活活跃跑步、健身、制作食品等方面有着广泛的应用场景,在小程序中实现计时功能可以提升小程序的用户体验度。
微信小程序提供了定时器API能力,我们只需要定义计时器的开始时间和结束时间,在每次执行时取当前时间和结束时间的差值,从而得到当前的计时器时间。我们可以通过wx.showModal和wx.showToast等API或者自定义组件的形式将计时器时间进行展示。
以下是其中一个实现计时器开始和结束功能的示例:
<view>
<text>当前计时器时间为{{timeStr}}</text>
<button bindtap="startTimer">开始计时</button>
<button bindtap="stopTimer">停止计时</button>
<button bindtap="resetTimer">重置计时</button>
</view>
Page({
data: {
timeStr: '00:00:00',//定义初始值为00:00:00的计时器时间
timerId: 0,//定义初始值为0的计时器id
startTime: 0 //定义初始值为0的开始时间
},
//计时器开始方法
startTimer: function () {
let that = this
this.setData({ startTime: new Date().getTime() })//设置计时器开始时间
let timerId = setInterval(function () {//定义计时器
let time = (new Date().getTime() - that.data.startTime) / 1000//获取当前时间和开始时间的差值
let h = parseInt(time / 3600)
let m = parseInt(time % 3600 / 60)
let s = parseInt(time % 60)
that.setData({
timeStr: (h < 10 ? ('0' + h) : h) + ':' + (m < 10 ? ('0' + m) : m) + ':' + (s < 10 ? ('0' + s) : s)//将时间戳格式化为时分秒
})
}, 1000)
this.setData({ timerId: timerId })
},
//计时器停止方法
stopTimer: function () {
clearInterval(this.data.timerId)//清除计时器
},
//计时器重置方法
resetTimer: function () {
this.setData({
timeStr: '00:00:00',
startTime: 0
})
this.stopTimer()
}
})
<weui-countdown id="countdown" time="{{time}}" bindfinish="finish"></weui-countdown>
<button bindtap="startTimer">开始计时</button>
<button bindtap="pauseTimer">暂停计时</button>
<button bindtap="continueTimer">继续计时</button>
<button bindtap="resetTimer">重置计时</button>
Page({
data: {
time: 0,
timerStatus: 'pause'
},
startTimer: function () {
if (this.data.time == 0 || this.data.timerStatus == 'finish') {
this.setData({ time: 3600 })//定义计时器时间为3600秒
}
this.selectComponent('#countdown').start()
this.setData({ timerStatus: 'start' })
},
pauseTimer: function () {
this.selectComponent('#countdown').pause()
this.setData({ timerStatus: 'pause' })
},
continueTimer: function () {
this.selectComponent('#countdown').continue()
this.setData({ timerStatus: 'start' })
},
resetTimer: function () {
this.selectComponent('#countdown').reset()
this.setData({ timerStatus: 'pause' })
},
finish: function () {
wx.showToast({
title: '计时结束',
})
this.setData({ timerStatus: 'finish' })
}
})
以上是微信小程序实现计时器开始和结束功能的攻略说明,通过简单实现,可以提供小程序用户更好的使用体验。
本文链接:http://task.lmcjl.com/news/8559.html