效果如下图：点击按钮出现60秒倒计时，60s内按钮不可用，倒计时到了时间方可再次点击获取。
另外还有一个知识点，只有input 及button这样的表单元素有disbale属性，如何设置是否可用属性的方法一般用$("#id").attr('disbaled','true')及$("#id").prop('disbaled','false')，对span img这样的没有disbale的属性，这种方法就不起作用了，此时可用$("#id").setAttribute('onclick',function())或$("#id").removeAttribute("onclick")方法来设置事件是否可用。
以下是所有代码，复制即可使用：
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>验证码倒计时</title>
5 <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
6 <style type="text/css" >
7 .validate-div input{
8 width:130px;
9 float:left;
10 line-height:30px;
11 }
12 .validation{
13 float:left;
14 width: 85px;
15 background-color: #2eaef1;
16 border-radius: 5px;
17 margin-left: 20px;
18 text-align: center;
19 margin-top: 3px;
20 }
21 .validation span{
22 color: #fff;
23 line-height:30px;
24 font-size: 14px;
25 }
26 </style>
27 </head>
29 <body>
30 <div class="validate-div">
31 <input type="text" class="validation-code" id="validation-code" name="smscode" placeholder="输入验证码" >
32 <div class="validation">
33 <span class="" id="validate_span" onclick="sendsms(this);">获取验证码</span>
34 </div>
35 </div>
36 </body>
37 </html>
39 <script type="text/javascript">
40 //发送验证码函数
41 function sendsms(e){
42 /*发送验证码功能*/
43 countdown(e); //若发送验证码成功，则调用倒计时函数
44 }
45 //倒计时函数
46 var time = 10;
47 function countdown(e){
48 if (time == 0) {
49 //e.setAttribute('disabled',false); 对没有disbaled属性的span标签，此方法无效
50 e.setAttribute("onclick","sendsms(this)");
51 $("#validate_span").html("获取验证码");
52 time = 10;
53 }else{
54 //e.attr('disabled',true); 对没有disbaled属性的span标签，此方法也无效
55 //e.setAttribute("onclick", ''); 这样写也可以
56 e.removeAttribute("onclick");
57 $("#validate_span").html("重新发送(" + time + ")");
58 time--;
59 setTimeout(function() {
60 countdown(e)
61 },1000)
62 }
63 }
64 </script>
65 </body>
66 </html>
