微信小程序验证码倒计时60秒

最新推荐文章于 2025-06-29 21:00:44 发布

原创最新推荐文章于 2025-06-29 21:00:44 发布 · 1.2w 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序

本文介绍了一款微信小程序中实现验证码倒计时功能的方法，包括wxml布局、wxss样式及js逻辑处理。通过定时器实现了从指定时间开始倒计时直至允许重新获取验证码的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

wxml 
<button
class="buttonget"
disabled="{{disabled}}"
data-id="2"
bindtap="getBtn"
>
{{time}}
</button>
wxss
/*获取验证码 */

.buttonget {
background-color: 
#fff;
display: inline-block;
font-size: 26rpx;
color: rgb(136,
136, 136);
border: 1px
solid #888;
border-radius: 
10rpx;
width: 160rpx;
height: 70rpx;
line-height: 
70rpx;
position: absolute;
top: 0;
right: 20rpx;
z-index: 2;
padding-right: 
0;
padding-left: 
0; 
margin-top: 10rpx;
}

js
//验证码倒计时函数
getCode: function (options) {
var that = this;
var currentTime = that.data.currentTime;
that.setData({
time: currentTime + '秒'
})
interval = setInterval(function () {
that.setData({
time: (currentTime - 1) + 
'秒'
})
currentTime--;
if (currentTime <= 
0) {
clearInterval(interval)
that.setData({
time: '重新获取',
currentTime: 60,
disabled: false
})
}
}, 1000)
},
//验证码倒计时结束