HTML:
<input type="button" value="获取验证码">
CSS:
1 input[type=button] { 2 width: 150px; 3 height: 30px; 4 background-color: #ff3000; 5 border: 0; 6 border-radius: 15px; 7 color: #fff; 8 } 9 10 input[type=button].on {11 background-color: #eee;12 color: #ccc;13 cursor: not-allowed;14 }
JavaScript:
1 $("input[type='button']").click(btnCheck); 2 3 /** 4 * [btnCheck 按钮倒计时常用于获取手机短信验证码] 5 */ 6 function btnCheck() { 7 8 $(this).addClass("on"); 9 10 var time = 5;11 12 $(this).attr("disabled", true);13 14 var timer = setInterval(function() {15 16 if (time == 0) {17 18 clearInterval(timer);19 20 $("input").attr("disabled", false);21 22 $("input").val("获取验证码");23 24 $("input").removeClass("on");25 26 } else {27 28 $('input').val(time + "秒");29 30 time--;31 32 }33 34 }, 1000);35 36 }