JS+HTML5實現(xiàn)獲取手機驗證碼倒計時按鈕
效果圖如下所示:
HTML:
<input type="button" value="獲取驗證碼">
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 按鈕倒計時常用于獲取手機短信驗證碼] */ 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("獲取驗證碼"); $("input").removeClass("on"); } else { $('input').val(time + "秒"); time--; } }, 1000); }
GitHub:Fuck me on GitHub Fuck me on GitHub
總結(jié)
以上所述是小編給大家介紹的JS+HTML5實現(xiàn)獲取手機驗證碼倒計時按鈕,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
JS實現(xiàn)區(qū)分中英文并統(tǒng)計字符個數(shù)的方法示例
這篇文章主要介紹了JS實現(xiàn)區(qū)分中英文并統(tǒng)計字符個數(shù)的方法,涉及JavaScript事件響應(yīng)、正則匹配及數(shù)值運算相關(guān)操作技巧,需要的朋友可以參考下2018-06-06JavaScript學(xué)習(xí)筆記--常用的互動方法
本文對JavaScript中常用的互動方法進行實例分析介紹,圖文并茂,有需要的朋友可以看下2016-12-12BOM系列第一篇之定時器setTimeout和setInterval
這篇文章主要介紹了BOM系列第一篇之定時器setTimeout和setInterval 的相關(guān)資料,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2016-08-08iOS和Android用同一個二維碼實現(xiàn)跳轉(zhuǎn)下載鏈接的方法
這篇文章給大家分享的是iOS和Android掃描同一個二維碼,分別跳到各自的下載鏈接的實現(xiàn)方法,文中給出了實例代碼,有需要的朋友們可以參考借鑒。2016-09-09一個js隨機顏色腳本(用于標(biāo)簽頁面,也可用于任何頁面)
一個js隨機顏色腳本(用于標(biāo)簽頁面,也可用于任何頁面)...2007-09-09