效果如下图：点击按钮出现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>28 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>38 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 ????????????????sendsms(e)61 ????????????},1000)62 ????????}63 ????}64 </script>65 </body>66 </html>JS实现60s倒计时(亲测有效)，及span标签如何使用和禁用onclick事件
原文地址：http://www.cnblogs.com/enjoyphp/p/7505513.html