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

2020-03-21 15:52:12

字體：大中小

供稿：網(wǎng)友

在平時(shí)的短信登錄中，當(dāng)發(fā)送短信驗(yàn)證碼后會(huì)顯示倒計(jì)時(shí)，那么這個(gè)倒計(jì)時(shí)如何實(shí)現(xiàn)呢？

wxml文件

<view class='Form'> <form bindsubmit="formSubmit" bindreset="formReset" class='forms'>  <view class="fidpas">  <input type="number" class="phonenumber" placeholder="請(qǐng)輸入手機(jī)號(hào)" name="phonenumber" />  <input type="number" class="message" placeholder="請(qǐng)輸入短信驗(yàn)證碼" 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: "獲取短信驗(yàn)證碼", }, 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: "獲取短信驗(yàn)證碼",   })  }  }, 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;}

效果圖

小程序,短信登錄,倒計(jì)時(shí)