⼩程序倒计时功能实现代码
倒计时功能是⼀个⽐较常见的功能,⽐如⽤户获取验证码就需要⽤到。这⾥记录⼀下在⼩程序⾥⾯倒计时功能的简单实现。
直接看看代码吧
//倒计时60秒
function countDown(that,count) {
if (count == 0) {
that.setData({
timeCountDownTop: '获取验证码',
counting:false
})
return;
}
that.setData({
counting:true,
timeCountDownTop: count + '秒后重新获取',
})
setTimeout(function(){
count--;
countDown(that, count);
}, 1000);
}
写文章的小程序
在需要倒计时的地⽅调⽤
Page({
data:{
counting:false
},
//⽣成验证码
generateVerifyCode:function() {
var that = this;
if (!unting) {
wx.showToast({
title: '验证码已发送',
})
/
/开始倒计时60秒
countDown(that, 60);
}
},
})
下⾯简单介绍下功能的实现
⾸先倒计时的⽅法是写在Page的外⾯,这个别搞错了
实现倒计时关键的地⽅在于setTimeout⽅法,也即下⾯这段代码。setTimeout⽅法可以设置在指定的时间间隔执⾏某个函数。应⽤的格式是setTimeout(function(),time),function就是对应要执⾏的⽅法,time就是时间间隔,这⾥的1000表⽰1000毫秒,也就是间隔1秒执⾏⼀次countDown⽅法。
setTimeout(function(){
count--;
countDown(that, count);
}, 1000);
countDown⽅法中利⽤count字段来设置倒计时的时间,⽐如这⾥是60秒
countDown⽅法中把that也传递进去是为了在倒计时状态改变时利⽤setData⽅法更新页⾯
countDown⽅法中利⽤counting字段来判断是否已经在倒计时了,避免重复开始倒计时
倒计时结束是通过count来判断,通过return直接退出
总结
以上所述是⼩编给⼤家介绍的⼩程序倒计时功能实现代码,希望对⼤家有所帮助,如果⼤家有任何疑问请给我留⾔,⼩编会及时回复⼤家的。在此也⾮常感谢⼤家对⽹站的⽀持!

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。