JavaScript實現(xiàn)10秒后再次獲取驗證碼

更新時間：2020年12月02日 13:13:23 作者：我是Dreamer啊

這篇文章主要為大家詳細(xì)介紹了JavaScript實現(xiàn)10秒后再次獲取驗證碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

JavaScript網(wǎng)頁制作–10秒后再次獲取驗證碼，供大家參考，具體內(nèi)容如下

通常在注冊或者登陸頁面時，都會需要短信驗證碼，在點擊按鈕獲取驗證碼后會有一段時間無法點擊按鈕，避免短時間內(nèi)大量的獲取驗證碼。今天制作這樣一個功能。

功能實現(xiàn)：

1、點擊獲取驗證碼后禁用按鈕
2、按鈕中的文字內(nèi)容改變，每一秒都改變
3、按鈕倒計時變?yōu)?時恢復(fù)按鈕，改回文字，重置倒計時t

代碼實現(xiàn)：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>再次獲取驗證碼</title>
</head>
<body>
  <input type="text">
  <button>獲取驗證碼</button>
  <script>
    var btn = document.querySelector('button');
    var t = 10;
 
    //設(shè)置監(jiān)聽事件，按下按鈕后禁用按鈕
    btn.addEventListener('click',function(){
      btn.disabled = true;
      //添加定時器，時間間隔為一秒
      var time = setInterval(function(){
        if(t==0){//如果倒計時等于0了，清除計時器，恢復(fù)按鈕，將t重置為10，否則按鈕中文字改變，t遞減。
          clearInterval(time);
          btn.disabled=false;
          btn.innerHTML='獲取驗證碼';
          t=10;
        }else{
        btn.innerHTML='您可以在'+t+'秒后再次獲取';
        t--;
        }
      }, 1000);
      
    })
  </script>
</body>
</html>

頁面預(yù)加載后出現(xiàn)獲取驗證碼的按鈕

按下獲取驗證碼的按鈕后，按鈕禁用，倒計時，計時結(jié)束后恢復(fù)

這個程序看起來不是很難，但是在自己寫的時候?qū)τ趧偨佑|語言的同學(xué)們來說，邏輯的實現(xiàn)還是得好好想一想。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

js
驗證碼

相關(guān)文章

如何使用Javascript正則表達(dá)式來格式化XML內(nèi)容
本篇文章是對使用Javascript正則表達(dá)式來格式化XML內(nèi)容的方法進(jìn)行了詳細(xì)的分析介紹，需要的朋友可以參考下
2013-07-07
JavaScript進(jìn)制數(shù)之間的互相轉(zhuǎn)換
這篇文章主要介紹了JavaScript進(jìn)制數(shù)之間的互相轉(zhuǎn)換，進(jìn)制轉(zhuǎn)換是人們利用符號來計數(shù)的方法，下文基于JavaScript實現(xiàn)進(jìn)制數(shù)之間的轉(zhuǎn)換，有一定的知識性參考價值，需要的小伙伴可以參考一下
2022-05-05
解決javascript 全局變量失效的問題
這篇文章主要介紹了解決javascript 全局變量失效的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2016-04-04
JavaScript 替換Html標(biāo)簽實現(xiàn)代碼
這種技術(shù)被廣泛應(yīng)用于表單驗證，語法高亮和危險字符過濾中。一段話如果很長，如果不想像下面那樣替換，我們得想些辦法了。
2009-10-10
js檢測離開或刷新頁面時表單數(shù)據(jù)是否更改的方法
這篇文章主要介紹了js檢測離開或刷新頁面時表單數(shù)據(jù)是否更改的方法,涉及javascript表單操作及事件響應(yīng)的相關(guān)技巧,需要的朋友可以參考下
2016-08-08
JScript分割字符串示例代碼
分割字符串的方法有很多，下面為大家介紹下使用JScript簡單實現(xiàn)下，喜歡的朋友可以參考下
2013-09-09
ES11屢試不爽的新特性,你用上了幾個
這篇文章主要介紹了ES11屢試不爽的新特性,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-10-10
JavaScript位置參數(shù)實現(xiàn)原理及過程解析
這篇文章主要介紹了JavaScript位置參數(shù)實現(xiàn)原理及過程解析,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
2020-09-09
JS返回上一頁實例代碼通過圖片和按鈕分別實現(xiàn)
返回上一頁的方法有很多，本代碼通過圖片和按鈕分別實現(xiàn)，感興趣的朋友可以參考下，希望對大家有所幫助
2013-08-08
js前端加密庫Crypto-js進(jìn)行MD5/SHA256/BASE64/AES加解密的方法與示例
js加密解密可以使用crypto-js它可以進(jìn)行MD5、SHA-1、SHA-256、Base64、AES、DES、等算法和加密,這是一個對稱加密的庫,可以使用 AES、DES、但沒有rsa等非對稱加密的方法
2023-12-12