欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間：2021年02月08日 10:40:33   作者：愛前端的茂茂  
這篇文章主要介紹了用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完了過后，便又可以繼續(xù)發(fā)送，接下來用代碼實(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è)按鈕過后讓這個(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)文章

  • JavaScript之instanceof方法手寫示例詳解

    JavaScript之instanceof方法手寫示例詳解

    這篇文章主要為大家介紹了JavaScript之instanceof方法手寫示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
    2022-10-10
  • JavaScript利用發(fā)布訂閱模式編寫事件監(jiān)聽函數(shù)

    JavaScript利用發(fā)布訂閱模式編寫事件監(jiān)聽函數(shù)

    發(fā)布訂閱是一種設(shè)計(jì)模式，EventHub可以被看作是一種Pub/Sub實(shí)現(xiàn)。本文就來講講如何利用eventHub發(fā)布訂閱寫一個(gè)事件監(jiān)聽函數(shù)，感興趣的可以了解一下
    2023-04-04
  • Javascript 中 null、NaN和undefined的區(qū)別總結(jié)

    Javascript 中 null、NaN和undefined的區(qū)別總結(jié)

    js中的數(shù)據(jù)類型有undefined,boolean,number,string,object等5種，前4種為原始類型，第5種為引用類型，接下來與大家分享下它們之間的區(qū)別
    2013-04-04
  • javascript實(shí)現(xiàn)秒表計(jì)時(shí)器的制作方法

    javascript實(shí)現(xiàn)秒表計(jì)時(shí)器的制作方法

    這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)秒表計(jì)時(shí)器的制作方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2017-02-02
  • 微信小程序 列表的上拉加載和下拉刷新的實(shí)現(xiàn)

    微信小程序 列表的上拉加載和下拉刷新的實(shí)現(xiàn)

    本文主要介紹了微信小程序中實(shí)現(xiàn)列表的上拉加載和下拉刷新的方法。具有很好的參考價(jià)值。下面跟著小編一起來看下吧
    2017-04-04
  • js基于canvas實(shí)現(xiàn)時(shí)鐘組件

    js基于canvas實(shí)現(xiàn)時(shí)鐘組件

    這篇文章主要介紹了js基于canvas實(shí)現(xiàn)時(shí)鐘組件的方法，幫助大家更好的理解和使用JavaScript，感興趣的朋友可以了解下
    2021-02-02
  • 微信小程序?qū)崿F(xiàn)移動(dòng)端滑動(dòng)分頁(yè)效果（ajax）

    微信小程序?qū)崿F(xiàn)移動(dòng)端滑動(dòng)分頁(yè)效果（ajax）

    這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)移動(dòng)端滑動(dòng)分頁(yè)效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2017-06-06
  • 詳解TypeScript中type與interface的區(qū)別

    詳解TypeScript中type與interface的區(qū)別

    在寫 ts 相關(guān)代碼的過程中，總能看到 interface 和 type 的身影。它們的作用好像都一樣的，相同的功能用哪一個(gè)都可以實(shí)現(xiàn)，也都很好用，所以也很少去真正的理解它們之間到底有啥區(qū)別，因此本文將詳細(xì)講解二者的區(qū)別，需要的可以參考一下
    2022-04-04

    • 最新評(píng)論