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 }
更多专业前端知识,请上 【猿2048】www.mk2048.com