JS+HTML5实现获取手机验证码倒计时按钮

这篇文章主要介绍了基于JS+HTML5实现获取手机验证码倒计时按钮,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下

效果图如下所示:

JS+HTML5实现获取手机验证码倒计时按钮

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实现获取手机验证码倒计时按钮,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

您可能感兴趣的文章:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/1212dfc89912770acda8424ac1011e89.html