JS+HTML5實(shí)現(xiàn)獲取手機(jī)驗(yàn)證碼倒計時按鈕
更新時間：2018年08月08日 09:32:48 作者：ProsperLee
這篇文章主要介紹了基于JS+HTML5實(shí)現(xiàn)獲取手機(jī)驗(yàn)證碼倒計時按鈕,代碼簡單易懂，非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下
效果圖如下所示：
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ī)短信驗(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)證碼倒計時按鈕，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
這篇文章主要給大家介紹了關(guān)于微信小程序拼接圖片鏈接無底洞深入探究的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用微信小程序具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
你是否知道JavaScript其實(shí)也是一個函數(shù)式編程語言呢？本文將教你如何利用JavaScript的函數(shù)式特性。2015-09-09
JS實(shí)現(xiàn)很酷的水波文字特效實(shí)例
這篇文章主要介紹了JS實(shí)現(xiàn)很酷的水波文字特效,實(shí)例分析了javascript操作圖層特效的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-02-02
javascript getElementsByClassName實(shí)現(xiàn)代碼
根據(jù)元素clsssName得到元素集合的函數(shù)，需要的朋友可以參考下。2010-10-10
這篇文章主要為大家詳細(xì)介紹了JS控制TreeView的結(jié)點(diǎn)選擇,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-11-11
這篇文章主要介紹了Bootstrap表單布局樣式代碼的相關(guān)資料,非常不錯具有參考借鑒價值，需要的朋友可以參考下2016-05-05
JavaScript知識點(diǎn)總結(jié)(十一)之js中的Object類詳解
這篇文章主要介紹了JavaScript知識點(diǎn)總結(jié)(十一)之js中的Object類詳解的相關(guān)資料,需要的朋友可以參考下2016-05-05
JavaScript繼承的實(shí)現(xiàn)方式詳解
JavaScript 是一門基于原型的語言,它的繼承機(jī)制與傳統(tǒng)的基于類的面向?qū)ο缶幊逃兴煌?盡管 ES6 引入了 class 語法,但本質(zhì)上仍然是基于原型鏈的繼承,本文將詳細(xì)介紹 JavaScript 繼承的幾種實(shí)現(xiàn)方式,需要的朋友可以參考下2025-03-03
bootstrap datetimepicker日期插件使用方法
這篇文章主要為大家詳細(xì)介紹了bootstrap datetimepicker的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-01-01
JavaScript實(shí)現(xiàn)點(diǎn)擊按鈕切換網(wǎng)頁背景色的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)點(diǎn)擊按鈕切換網(wǎng)頁背景色的方法,涉及JavaScript基于鼠標(biāo)事件動態(tài)操作頁面元素樣式的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-10-10