首頁 > web前端 > js教程 > js實作簡訊驗證碼倒數實例分享

js實作簡訊驗證碼倒數實例分享

小云云
發布: 2018-03-10 16:03:19
原創
1521 人瀏覽過


1.目標取得驗證碼後,按鈕顯示重新傳送倒數計時,倒數結束後按鈕重新可用。本文主要和大家分享js實作簡訊驗證碼倒數實例,希望能幫助大家。

2.用到的兩個關鍵api

#每秒執行:setInterval

指定時間結束後執行:setTimeout

3.程式碼

<span style="font-size: 14px;">function createTimer(time,interval,timeout){<br/><br/>  let hasStartTime = 0//已经走了的时间<br/>  interval(hasStartTime)//立即执行一次<br/>  let _interval = setInterval(()=>{<br/>    hasStartTime = hasStartTime+1000<br/>    interval(hasStartTime)<br/>  }, 1000)<br/>  setTimeout(()=>{<br/>    clearInterval(_interval)<br/>    timeout()<br/>  }, time || 60000)<br/>}<br/></span>
登入後複製

其中time為設定的總時間,interval為每秒執行的操作,timeout為時間結束後執行的操作。記得倒數結束後要將每秒執行的操作取消掉。

呼叫者只要自己傳入每秒要刷新的內容。例如

<span style="font-size: 14px;">let time = 10000<br/>createTimer(time,timeStart=>{<br/>    let btn_text = `重新发送(${(time- timeStart)/1000}s)`<br/>    let btn_lock = true<br/>  },()=>{<br/>    let btn_text = `重新发送`,<br/>    let btn_lock = false<br/>  })<br/></span>
登入後複製

相關推薦:

js實作簡訊驗證碼讀取秒功能

Laravel中開發簡訊驗證碼傳送功能的「規格」(圖)

JS實作使用者註冊時取得簡訊驗證碼和倒數功能的範例程式碼分享

以上是js實作簡訊驗證碼倒數實例分享的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板