快捷導(dǎo)航

JS+HTML5實(shí)現(xiàn)獲取手機(jī)驗(yàn)證碼倒計(jì)時(shí)按鈕

更新時(shí)間：2018年08月08日 09:32:48 作者：ProsperLee

這篇文章主要介紹了基于JS+HTML5實(shí)現(xiàn)獲取手機(jī)驗(yàn)證碼倒計(jì)時(shí)按鈕,代碼簡單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

效果圖如下所示：

HTML：

 <input type="button" value="獲取驗(yàn)證碼">

CSS：

 input[type=button]
  width: 150px;
  height: 30px;
  background-color: #ff3000;
  border: 0;
  border-radius: 15px;
  color: #fff;
 }
 input[type=button].on {
  background-color: #eee;
  color: #ccc;
  cursor: not-allowed;
 }

JavaScript：

 $("input[type='button']").click(btnCheck);
  /**
  * [btnCheck 按鈕倒計(jì)時(shí)常用于獲取手機(jī)短信驗(yàn)證碼]
  */
  function btnCheck() {
   $(this).addClass("on");
   var time = 5;
   $(this).attr("disabled", true);
   var timer = setInterval(function() {
    if (time == 0) {
     clearInterval(timer);
     $("input").attr("disabled", false);
     $("input").val("獲取驗(yàn)證碼");
     $("input").removeClass("on");
    } else {
     $('input').val(time + "秒");
     time--;
    }
   }, 1000);
  }

GitHub：Fuck me on GitHub Fuck me on GitHub

總結(jié)

以上所述是小編給大家介紹的JS+HTML5實(shí)現(xiàn)獲取手機(jī)驗(yàn)證碼倒計(jì)時(shí)按鈕，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

JS實(shí)現(xiàn)區(qū)分中英文并統(tǒng)計(jì)字符個(gè)數(shù)的方法示例
這篇文章主要介紹了JS實(shí)現(xiàn)區(qū)分中英文并統(tǒng)計(jì)字符個(gè)數(shù)的方法,涉及JavaScript事件響應(yīng)、正則匹配及數(shù)值運(yùn)算相關(guān)操作技巧,需要的朋友可以參考下
2018-06-06
Bootstrap安裝環(huán)境配置教程分享
這篇文章主要為大家分享了Bootstrap安裝環(huán)境配置教程，安裝步驟非常簡單，感興趣的小伙伴們可以參考一下
2016-05-05
JavaScript學(xué)習(xí)筆記--常用的互動(dòng)方法
本文對(duì)JavaScript中常用的互動(dòng)方法進(jìn)行實(shí)例分析介紹，圖文并茂，有需要的朋友可以看下
2016-12-12
BOM系列第一篇之定時(shí)器setTimeout和setInterval
這篇文章主要介紹了BOM系列第一篇之定時(shí)器setTimeout和setInterval 的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2016-08-08
iOS和Android用同一個(gè)二維碼實(shí)現(xiàn)跳轉(zhuǎn)下載鏈接的方法
這篇文章給大家分享的是iOS和Android掃描同一個(gè)二維碼，分別跳到各自的下載鏈接的實(shí)現(xiàn)方法，文中給出了實(shí)例代碼，有需要的朋友們可以參考借鑒。
2016-09-09
JS前端筆試題分析
這篇文章主要介紹了JS前端筆試題,結(jié)合實(shí)例形式分析了javascript字符串、數(shù)組及日期操作相關(guān)技巧,需要的朋友可以參考下
2016-12-12
一個(gè)js隨機(jī)顏色腳本（用于標(biāo)簽頁面，也可用于任何頁面）
一個(gè)js隨機(jī)顏色腳本（用于標(biāo)簽頁面，也可用于任何頁面）...
2007-09-09
JavaScript獲取當(dāng)前cpu使用率的方法
這篇文章主要介紹了JavaScript獲取當(dāng)前cpu使用率的方法,涉及JavaScript針對(duì)系統(tǒng)硬件操作的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-12-12
深入了解JavaScript中遞歸的理解與實(shí)現(xiàn)
本文將通過遞歸的經(jīng)典案例：求斐波那契數(shù)來講解遞歸，通過畫遞歸樹的方式來講解其時(shí)間復(fù)雜度和空間復(fù)雜度以及遞歸的執(zhí)行順序，感興趣的可以了解一下
2022-06-06
JS雙擊變input框批量修改內(nèi)容
這篇文章主要介紹了JS雙擊變input框批量修改內(nèi)容的實(shí)現(xiàn)代碼,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2016-12-12