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í)按鈕,代碼簡(jiǎn)單易懂，非常不錯(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ì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

微信小程序拼接圖片鏈接無(wú)底洞深入探究
這篇文章主要給大家介紹了關(guān)于微信小程序拼接圖片鏈接無(wú)底洞深入探究的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用微信小程序具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-09-09
淺談javascript函數(shù)式編程
你是否知道JavaScript其實(shí)也是一個(gè)函數(shù)式編程語(yǔ)言呢？本文將教你如何利用JavaScript的函數(shù)式特性。
2015-09-09
JS實(shí)現(xiàn)很酷的水波文字特效實(shí)例
這篇文章主要介紹了JS實(shí)現(xiàn)很酷的水波文字特效,實(shí)例分析了javascript操作圖層特效的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-02-02
javascript getElementsByClassName實(shí)現(xiàn)代碼
根據(jù)元素clsssName得到元素集合的函數(shù)，需要的朋友可以參考下。
2010-10-10
JS控制TreeView的結(jié)點(diǎn)選擇
這篇文章主要為大家詳細(xì)介紹了JS控制TreeView的結(jié)點(diǎn)選擇,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-11-11
Bootstrap表單布局樣式代碼
這篇文章主要介紹了Bootstrap表單布局樣式代碼的相關(guān)資料,非常不錯(cuò)具有參考借鑒價(jià)值，需要的朋友可以參考下
2016-05-05
JavaScript知識(shí)點(diǎn)總結(jié)(十一)之js中的Object類詳解
這篇文章主要介紹了JavaScript知識(shí)點(diǎn)總結(jié)(十一)之js中的Object類詳解的相關(guān)資料,需要的朋友可以參考下
2016-05-05
JavaScript繼承的實(shí)現(xiàn)方式詳解
JavaScript 是一門基于原型的語(yǔ)言,它的繼承機(jī)制與傳統(tǒng)的基于類的面向?qū)ο缶幊逃兴煌?盡管 ES6 引入了 class 語(yǔ)法,但本質(zhì)上仍然是基于原型鏈的繼承,本文將詳細(xì)介紹 JavaScript 繼承的幾種實(shí)現(xiàn)方式,需要的朋友可以參考下
2025-03-03
bootstrap datetimepicker日期插件使用方法
這篇文章主要為大家詳細(xì)介紹了bootstrap datetimepicker的使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-01-01
JavaScript實(shí)現(xiàn)點(diǎn)擊按鈕切換網(wǎng)頁(yè)背景色的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)點(diǎn)擊按鈕切換網(wǎng)頁(yè)背景色的方法,涉及JavaScript基于鼠標(biāo)事件動(dòng)態(tài)操作頁(yè)面元素樣式的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-10-10