小程序?qū)崿F(xiàn)短信登錄倒計(jì)時(shí)
在平時(shí)的短信登錄中,當(dāng)發(fā)送短信驗(yàn)證碼后會顯示倒計(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="請輸入手機(jī)號" name="phonenumber" /> <input type="number" class="message" placeholder="請輸入短信驗(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; }
效果圖
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
用js統(tǒng)計(jì)用戶下載網(wǎng)頁所需時(shí)間的腳本
下面的方法是個(gè)不錯(cuò)的思路,建議對于js感興趣的朋友,推薦看2008-10-10JS 控制小數(shù)位數(shù)的實(shí)現(xiàn)代碼
上網(wǎng)查一查的確存在這種Bug,除了位數(shù)上控制之外也沒什么也好的方法(希望高手能提出其它思路)。2011-08-08javascript實(shí)現(xiàn)貪吃蛇小練習(xí)
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)貪吃蛇的小練習(xí),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-07-07獲取當(dāng)前月(季度/年)的最后一天(set相關(guān)操作及應(yīng)用)
本文主要介紹了setset相關(guān)操作及應(yīng)用,通過獲取當(dāng)前月(季度/年)的最后一天具體事例來解析說明,具有一定的參考價(jià)值,下面跟著小編一起來看下吧2016-12-12JavaScript進(jìn)階之前端文件上傳和下載示例詳解
這篇文章主要為大家介紹了JavaScript進(jìn)階之前端文件上傳和下載示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-09-09JS的時(shí)間格式化和時(shí)間戳轉(zhuǎn)換函數(shù)示例詳解
這篇文章主要介紹了JS的時(shí)間格式化和時(shí)間戳轉(zhuǎn)換函數(shù),本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-07-07