微信小程序60秒倒计时

微信小程序60秒倒计时

大家可以直接使用插件: 

微信小程序发送短信验证码后60秒倒计时功能，效果图：

 

完整代码

index.wxml

<!--index.wxml-->
<view class="container"><view class="section"><text>手机号码:</text><input placeholder="请输入手机号码" type="number" maxlength="11" bindinput="inputPhoneNum" auto-focus /><text wx:if="{{send}}" class="sendMsg" bindtap="sendMsg">发送</text><text wx:if="{{alreadySend}}" class="sendMsg" >{{second+"s"}}</text></view>
</view>

 

index.wxss

/**index.wxss**/
.userinfo {display: flex;flex-direction: column;align-items: center;
}
.section {
display: flex;
margin: 16rpx;
padding: 16rpx;
border-bottom: 1rpx solid #CFD8DC;
}text {width: 200rpx;
}button {margin: 16rpx;
}.sendMsg {font-size: 12;margin-right: 0;padding: 0;height: inherit;width: 80rpx;
}

 

index.js

//index.js
//获取应用实例
const app = getApp()Page({data: {send: true,alreadySend: false,second: 60,disabled: true,phoneNum: ''},// 手机号部分inputPhoneNum: function (e) {let phoneNum = e.detail.valuethis.setData({phoneNum: phoneNum})},sendMsg: function () {var phoneNum = this.data.phoneNum;if(phoneNum == ''){wx.showToast({title: '请输入手机号码',icon: 'none',duration: 2000})return ;}//此处省略发送短信验证码功能this.setData({alreadySend: true,send: false})this.timer()},showSendMsg: function () {if (!this.data.alreadySend) {this.setData({send: true})}},hideSendMsg: function () {this.setData({send: false,disabled: true,buttonType: 'default'})},timer: function () {let promise = new Promise((resolve, reject) => {let setTimer = setInterval(() => {this.setData({second: this.data.second - 1})if (this.data.second <= 0) {this.setData({second: 60,alreadySend: false,send: true})resolve(setTimer)}}, 1000)})promise.then((setTimer) => {clearInterval(setTimer)})},
})

 

完整的短信验证码登录实例参考: