按照提示做了一个倒计时器的微信小程序,可以开始倒计时以及中途停止,现在想增加一个button的功能是点击“重新开始”按钮可以回到倒计时开始时的样子。
<view class='box' hidden='{{hidden}}'>
<view class='title'>倒计时器view>
<view class='time'>{{num}}view>
<view class='btnLayout'>
<button bindtap='start' disabled="{{btnDisabled}}">开始计时button>
<button bindtap='stop'>停止计时button>
<button bindtap='return'>重新开始button>
view>
view>
// index.js
var num = 100;
var timerSet;
Page({
data: {
hidden: true,
num: num
},
onLoad: function(options) {
var that = this;
setTimeout(() => {
that.show()
}, 2000)
},
show: function () {
var that = this;
that.setData({
hidden: false
})
},
start: function() {
var that = this;
timerSet = setInterval(() => {
that.timer()
}, 1000)
},
stop: function() {
clearInterval(timerSet)
},
return: function(){//希望在这里加入一个return的功能可以重新开始程序
},
timer: function() {
var that = this;
console.log(num)
if (num > 0) {
that.setData({
num: num--
})
} else {
that.setData({
num: 0
})
}
console.log(num)
}
})
无法做到重新开始程序
点击重新开始按钮可以让小程序从头开始
data中添加一个initNum保存初始值
data: {
hidden: true,
num: num,
initNum: num,
},
具体逻辑
return: function(){//希望在这里加入一个return的功能可以重新开始程序
clearInterval(timerSet) // 如果是从头计时,这行注释掉
num = this.data.initNum
this.setData({
num: num
})
},
设置num的初始值就可以了
就是 写个事件 然后 this.setData({num:"初始值"})