在平时的短信登录中，当发送短信验证码后会显示倒计时，那么这个倒计时如何实现呢？
wxml文件
<view> <form bindsubmit="formSubmit" bindreset="formReset"> <view> <input type="number" placeholder="请输入手机号" /> <input type="number" placeholder="请输入短信验证码" /> <button bindtap="sendmessg">{{getmsg}}</button> </view> <button 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; }
效果图
