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

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中文網其他相關文章！