网络编程 发布日期:2025/12/20 浏览次数:1
在平时的短信登录中,当发送短信验证码后会显示倒计时,那么这个倒计时如何实现呢?
wxml文件
<view class='Form'>
<form bindsubmit="formSubmit" bindreset="formReset" class='forms'>
<view class="fidpas">
<input type="number" class="phonenumber" placeholder="请输入手机号" name="phonenumber" />
<input type="number" class="message" placeholder="请输入短信验证码" name="msg" />
<button class="{{sendmsg}}" bindtap="sendmessg" class='btn'>{{getmsg}}</button>
</view>
<button class="lgbut" formType="submit" type='warn'>下一步</button>
</form>
</view>
js文件
let timeId = null;
Page({
data: {
sendmsg: "sendmsg",
getmsg: "获取短信验证码",
},
sendmessg: function (e) {
var timer=1;
if (timer == 1) {
timer = 0
var that = this
var time = 60
that.setData({
sendmsg: "sendmsgafter",
})
var inter = setInterval(function () {
that.setData({
getmsg: time + "s后重新发送",
})
time --
if (time < 0) {
timer = 1
clearInterval(inter)
that.setData({
sendmsg: "sendmsg",
getmsg: "获取短信验证码",
})
}
}, 1000)
}
},
})
wxss文件
.Form{
margin-top: 80px;
}
.forms input{
padding: 10px ;
}
.phonenumber{
border-bottom: 1px solid #ccc;}
.message{
display: inline-block
}
.btn{
display: inline-block;
font-size: 14px;
}
.forms button{
margin-top: 15px;
}
效果图
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。