在平時的短信登錄中,當發送短信驗證碼后會顯示倒計時,那么這個倒計時如何實現呢?
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;}
效果圖
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持武林網。
新聞熱點
疑難解答