小程序实现短信登录倒计时

2020-03-21 15:52:12

字体：大中小

来源：转载

供稿：网友

在平时的短信登录中，当发送短信验证码后会显示倒计时，那么这个倒计时如何实现呢？

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;}

效果图

小程序,短信登录,倒计时