小程序?qū)崿F(xiàn)短信登錄倒計時

2019-11-19 11:11:33

字體：大中小

供稿：網(wǎng)友

在平時的短信登錄中，當發(fā)送短信驗證碼后會顯示倒計時，那么這個倒計時如何實現(xiàn)呢？

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后重新發(fā)送",  })  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;}

效果圖