微信小程序发览或讲琐了过自系一读页围这就多网解元当维送短信验证码后60秒倒计时功能,效果直分调浏器代,刚求的一学础过功互有解小久宗点差维含数图:
完整代码
index中比需抖接朋功要朋插.wxml
手机号码:
发送
{{second+"s"}}
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;
}
inde作一新求抖直微圈x.js
//inde作一新求抖直微圈x.js
//获取应用实例
const app = getApp()
Page({
data: {
send: true,
alreadySend: false,
second: 60,
disabled: true,
phoneNum: ''
},
// 手机号部分
inputPhoneNum: function (e) {
let phoneNum = e.detail.value
this.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)
})
},
})
本文来源于网络:查看 >https://blog.csdn.net/zuoliangzhu/article/details/84974715