效果图如下所示:
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实现获取手机验证码倒计时按钮,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对武林网网站的支持!
新闻热点
疑难解答