小程序?qū)崿F(xiàn)短信登錄倒計時
更新時間：2019年07月12日 11:31:53 作者：smile@qingqing
這篇文章主要為大家詳細介紹了小程序?qū)崿F(xiàn)短信登錄倒計時，具有一定的參考價值，感興趣的小伙伴們可以參考一下
在平時的短信登錄中，當發(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;
}
效果圖
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章介紹了，js中的Replace()的一些高級的使用方法，有需要的朋友可以參考一下2013-06-06
用js統(tǒng)計用戶下載網(wǎng)頁所需時間的腳本
下面的方法是個不錯的思路，建議對于js感興趣的朋友，推薦看2008-10-10
本文通過js和cas代碼分別給大家介紹了移動端判斷手機橫豎屏狀態(tài)的相關(guān)知識，非常不錯，具有一定的參考借鑒價值，需要的朋友參考下吧2018-07-07
JS 控制小數(shù)位數(shù)的實現(xiàn)代碼
上網(wǎng)查一查的確存在這種Bug，除了位數(shù)上控制之外也沒什么也好的方法（希望高手能提出其它思路）。2011-08-08
這篇文章主要為大家詳細介紹了javascript實現(xiàn)貪吃蛇的小練習，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-07-07
獲取當前月（季度/年）的最后一天（set相關(guān)操作及應(yīng)用）
本文主要介紹了setset相關(guān)操作及應(yīng)用，通過獲取當前月（季度/年）的最后一天具體事例來解析說明，具有一定的參考價值，下面跟著小編一起來看下吧2016-12-12
這篇文章主要為大家介紹了JavaScript進階之前端文件上傳和下載示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09
日期聯(lián)動算是一個比較常見的功能了，隨便度娘一下，你就能找到N多代碼，今天給大家介紹的是個人比較常用，代碼很簡潔，高效，這里推擠給大家。2015-01-01
這篇文章主要介紹了Web打印解決方案之普通報表打印功能的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-08-08
JS的時間格式化和時間戳轉(zhuǎn)換函數(shù)示例詳解
這篇文章主要介紹了JS的時間格式化和時間戳轉(zhuǎn)換函數(shù)，本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-07-07