用Javascript實(shí)現(xiàn)發(fā)送短信驗(yàn)證碼間隔功能

更新時(shí)間：2021年02月08日 10:40:33 作者：愛(ài)前端的茂茂

這篇文章主要介紹了用Javascript實(shí)現(xiàn)發(fā)送短信驗(yàn)證碼間隔功能,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

在很多app和網(wǎng)站中，我們登陸或者注冊(cè)賬號(hào)，會(huì)有一個(gè)發(fā)送短信驗(yàn)證碼的地方1，然而為了防止惡意獲取驗(yàn)證碼，我們一般都設(shè)置了可點(diǎn)擊的時(shí)間間隔，時(shí)間間隔1完了過(guò)后，便又可以繼續(xù)發(fā)送，接下來(lái)用代碼實(shí)現(xiàn)

代碼如下

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
手機(jī)號(hào)碼：<input type="text"><button>發(fā)送驗(yàn)證碼</button>
<script>
  var btn=document.querySelector('button')
  var time=3
  btn.addEventListener('click',function () {
    btn.disabled=true
    var timer=setInterval(function () {
      if (time<0){
        clearInterval(timer)
        btn.disabled=false
        btn.innerHTML='發(fā)送驗(yàn)證碼'
        time=3
      }else {
        btn.innerHTML = '還剩' + time + '秒'
        time -= 1
      }
    },1000)
  })
</script>
</body>
</html>

效果如下

在這里插入圖片描述

代碼解釋
這里因?yàn)槲覀冎桓淖儼粹o的樣式和功能，所以只獲取了按鈕，然后設(shè)置一個(gè)time變量，這是倒計(jì)時(shí)的時(shí)間。然后設(shè)置點(diǎn)擊事件，當(dāng)我們點(diǎn)擊這個(gè)按鈕過(guò)后讓這個(gè)按鈕的disable變?yōu)閠rue，意思是不能夠點(diǎn)擊。
然后設(shè)置定時(shí)器，判斷如果倒計(jì)時(shí)小于0，那么清除定時(shí)器，倒計(jì)時(shí)結(jié)束，讓按鈕變?yōu)榭牲c(diǎn)擊，里面的1文字變?yōu)榘l(fā)送驗(yàn)證碼，接著重新給倒計(jì)時(shí)賦值為3.
如果倒計(jì)時(shí)大于0，把按鈕里面的文字改為'還剩' + time + ‘秒'，time–，每循環(huán)一次都判斷一次

到此這篇關(guān)于用Javascript實(shí)現(xiàn)發(fā)送短信驗(yàn)證碼間隔的文章就介紹到這了,更多相關(guān)js發(fā)送短信驗(yàn)證碼內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

webpack+vue-cil中proxyTable處理跨域的方法
這篇文章主要介紹了webpack+vue-cil中proxyTable處理跨域的方法,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-07-07
js與C#進(jìn)行時(shí)間戳轉(zhuǎn)換
最近在做一個(gè)項(xiàng)目，需要JS時(shí)間戳轉(zhuǎn)成C#里的時(shí)間，再把C#里的時(shí)間戳轉(zhuǎn)成JS的時(shí)間,就仔細(xì)研究了下js與C#進(jìn)行轉(zhuǎn)換的注意要點(diǎn)，這里記錄下來(lái)，有需要的小伙伴自己拿走。
2014-11-11
js驗(yàn)證整數(shù)加保留小數(shù)點(diǎn)的簡(jiǎn)單實(shí)例
這篇文章主要介紹了js驗(yàn)證整數(shù)加保留小數(shù)點(diǎn)的簡(jiǎn)單實(shí)例，有需要的朋友可以參考一下
2013-12-12
js表單序列化判斷空值的實(shí)例
下面小編就為大家?guī)?lái)一篇js表單序列化判斷空值的實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-09-09
js如何去除數(shù)組中的empty?undefined空項(xiàng)
這篇文章主要介紹了js如何去除數(shù)組中的empty?undefined空項(xiàng)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-08-08
js中怎么判斷兩個(gè)字符串相等的實(shí)例
在本篇文章里小編給大家分享了關(guān)于js中怎么判斷兩個(gè)字符串相等的實(shí)例和代碼，需要的朋友們學(xué)習(xí)參考下。
2019-01-01
Prototype 1.5.0_rc1 及 Prototype 1.5.0 Pre0小抄本
Prototype 1.5.0_rc1 及 Prototype 1.5.0 Pre0小抄本...
2006-09-09
微信小程序版翻牌小游戲
這篇文章主要為大家詳細(xì)介紹了微信小程序版翻牌小游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2018-01-01
關(guān)于Iframe父頁(yè)面與子頁(yè)面之間的相互調(diào)用
下面小編就為大家?guī)?lái)一篇關(guān)于Iframe父頁(yè)面與子頁(yè)面之間的相互調(diào)用。小編覺(jué)得挺不錯(cuò)的，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧，祝大家游戲愉快哦
2016-11-11
用js實(shí)現(xiàn)層隨著內(nèi)容大小動(dòng)態(tài)漸變改變推薦
以前做谷歌的小工具時(shí)，api里提供了一個(gè)很有用的函數(shù)，那就是在程序運(yùn)行時(shí)可以使層動(dòng)態(tài)隨內(nèi)容大小而變化，而且是平滑變換，在一些jquery的lightbox里也普遍有這種效果，看起來(lái)很酷的樣子。
2009-12-12