我写了一个倒计时函数,但遇到了设置一个一分钟的倒计时,明明结束后已经00:00了,自动又从59分59秒重新开始倒计时
刚开始学小程序,求大佬指正,下面附上代码:
Page({
data: {
showSlider:false,
showCountDown:false,
remainTimeText:'',
hourCountdown: 0,
countdown: "00:00"
},
showPicker: function() {
this.setData({
showSlider: true,
showCountDown: false
});
},
CloseSlider(){
let countdown = this.data.countdown;
if(countdown !== 0){
this.setData({
showSlider:false,
showCountDown:true
})
}
else{
this.setData({
showSlider:false
})
}
},
hideSlider() {
const hourCountdown = this.data.hourCountdown;
if (this.interval) {
clearInterval(this.interval);
}
this.setData({
showSlider: false,
showCountDown: true
});
let countdown = `${hourCountdown.toString().padStart(2, "0")}:00`;
this.setData({
countdown: countdown
});
this.countdownFunc();
},
sliderChange(e) {
this.setData({
hourCountdown: e.detail.value,
});
},
countdownFunc() {
let hourCountdown = this.data.hourCountdown;
let countdown = this.data.countdown.split(":");
let minutes = Number(countdown[0]);
let seconds = Number(countdown[1]);
this.interval = setInterval(() => {
if (hourCountdown > 0 || minutes > 0 || seconds > 0) {
if (seconds === 0) {
if (minutes > 0) {
minutes -= 1;
seconds = 59;
} else if (hourCountdown > 0) {
hourCountdown -= 1;
minutes = 59;
seconds = 59;
}
} else {
seconds -= 1;
}
let formattedTime = `${minutes.toString().padStart(2, "0")}:${seconds.toString().padStart(2, "0")}`;
this.setData({
hourCountdown: hourCountdown,
countdown: formattedTime
});
} else {
this.setData({
hourCountdown: 0,
showCountDown: false
});
}
}, 1000);
if (this.data.hourCountdown === 0) {
clearInterval(this.interval);
}
},
pluspoint(){
wx.showModal({
title: '请输入数字',
showCancel: true,
cancelText: '取消',
confirmText: '确定',
editable:true,
placeholderText:'1min = 1 分',
success: function (res) {
if (res.confirm) {
var input_value = res.content;
if (!isNaN(input_value)) {
console.log(input_value);
} else {
wx.showToast({
title: '请输入正确的数字',
icon: 'none'
})
}
} else if (res.cancel) {
console.log('用户点击取消');
}
},
fail: function (res) {
console.log('弹窗失败');
}
})
},
gotoexchange(e){
wx.navigateTo({
url: '/pages/exchange/exchange',
})
},
undeveloped(){
wx.showToast({
title: '该功能没钱开发',
icon: 'error',
mask: true
})
},
onLoad(options) {
let point = getApp().globalData.point;
this.setData({
point : point
})
this.countdownFunc();
},
onReady() {
},
onShow() {
let point = wx.getStorageSync('point')
this.setData({
point:point
})
},
onHide() {
},
onUnload() {
},
onPullDownRefresh() {
},
上到达底部() {
},
在分享应用消息() {
}
})
和计时器问题无关代码 放的太多了,可以抽离拿个demo说。
写个原生js的倒计时你参考:
<!DOCTYPE html> <html> <body> <p id="demo"></p> <script> // 设置倒计时的持续时间为60秒 var duration = 60; // 获取显示倒计时的元素 var countdownElement = document.getElementById("demo"); // 定义一个函数来实现倒计时功能 function countdown() { // 检查倒计时是否已经结束 if (duration < 0) { clearInterval(countdownTimer); countdownElement.innerHTML = "倒计时已结束"; return; } // 获取倒计时的分钟和秒数 var minutes = Math.floor(duration / 60); var seconds = duration % 60; // 在倒计时元素上显示倒计时结果 countdownElement.innerHTML = minutes + "分" + seconds + "秒"; // 将持续时间减少1秒 duration--; } // 每一秒调用一次倒计时函数 var countdownTimer = setInterval(countdown, 1000); </script> </body> </html>
一个简单的倒计时写了那么多代码,还写了那么多的 if 很难不出错
给你一个思路,细节不知道的话自行度娘:
1、通过 countTime 来控制倒计时的秒数,如2分钟为 120 秒,至于如何显示,通过格式化函数处理
2、通过定时器每秒递减1,当小于等于0时,终止定时器
countdownFunc函数最下面的clearInterval的if是永远不会触发的。
上面的setInterval和this.setData都是异步的,你直接在下面判断if (this.data.hourCountdown === 0)肯定不行。