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

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

 更新時(shí)間：2020年12月02日 13:13:23   作者：我是Dreamer啊  
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)10秒后再次獲取驗(yàn)證碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

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

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

功能實(shí)現(xiàn)：

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

代碼實(shí)現(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>再次獲取驗(yàn)證碼</title>
</head>
<body>
  <input type="text">
  <button>獲取驗(yàn)證碼</button>
  <script>
    var btn = document.querySelector('button');
    var t = 10;
 
    //設(shè)置監(jiān)聽(tīng)事件，按下按鈕后禁用按鈕
    btn.addEventListener('click',function(){
      btn.disabled = true;
      //添加定時(shí)器，時(shí)間間隔為一秒
      var time = setInterval(function(){
        if(t==0){//如果倒計(jì)時(shí)等于0了，清除計(jì)時(shí)器，恢復(fù)按鈕，將t重置為10，否則按鈕中文字改變，t遞減。
          clearInterval(time);
          btn.disabled=false;
          btn.innerHTML='獲取驗(yàn)證碼';
          t=10;
        }else{
        btn.innerHTML='您可以在'+t+'秒后再次獲取';
        t--;
        }
      }, 1000);
      
    })
  </script>
</body>
</html>

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

按下獲取驗(yàn)證碼的按鈕后，按鈕禁用，倒計(jì)時(shí)，計(jì)時(shí)結(jié)束后恢復(fù)

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

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

相關(guān)文章

最新評(píng)論