效果圖如下所示：
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
總結
以上所述是小編給大家介紹的JS+HTML5實現獲取手機驗證碼倒計時按鈕，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
