微信小程式實現驗證碼倒計時效果

效果圖

wxml

<

input 
class
='input-pwd' 
placeholder
="新密碼"
placeholder-style
='color: 
#000' password focus bindconfirm
='getpwd'
/>
<
input 
class
='input-tel' 
type
='number' 
placeholder
="手機號"
placeholder-style
='color: 
#000' maxlength
='11 
confirm-type
='done' 
/>
<
input 
class
='input-verify' 
type
='number' 
placeholder-style
='color: 
#000' placeholder
='手機驗證碼'
>
input
>
<
button 
class
='verify-btn' 
disabled
='}' 
bindtap
="getverificationcode"
>}
button
>
<
button 
class
='confirm-btn' 
bindtap
='confirm_btn'
>確認修改
button
>

/*

pages/forgetpwd/forgetpwd.wxss 
*/input.input-verify.verify-btn.confirm-btn

//

pages/forgetpwd/forgetpwd.js
var interval = null
//倒計時函式
page(,
/** * 生命週期函式--監聽頁面載入
*/onload: 
function
(options) ,
getpwd:
function
(e),
/** * 確認修改
*/confirm_btn:
function
()) },
getcode: 
function
(options))
if (currenttime <= 0) )
}}, 1000) 
},getverificationcode())
},})

【猿2048】www.mk2048.com

小程式驗證碼倒計時

先定義time文字,和倒計時時間 渲染在view 驗證碼獲取成功後需要倒計時,並且處於不可點選狀態,所以定義乙個函式 我一般呼叫是在請求成功,或者請求失敗以後呼叫getcode此函式,成功以後,建立var interval setinterval 讓currenttime 並且賦值給time,這樣頁...

驗證碼倒計時

獲取驗證碼倒計時功能 1 布局檔案中就是乙個按鈕獲取驗證碼 id btnsms android layout width 120dp android layout height 50dp android layout marginright 5dp android background color ...

驗證碼倒計時

上次寫過系統提供的驗證碼倒計時的乙個類 countdowntimer 但是這個類在使用的時候總是會出現倒計時的偏差，所以只好自 己使用 handler 或者 timer 來實現。專案中 註冊 忘記密碼還 有現在有出現乙個直接拿手機號碼配合驗證碼直接登陸的都用到了驗證碼倒計時，這是後我們不可能每個類裡...