作者：beat_小然 | 来源：互联网 | 2023-05-17 14:00
效果如下图：点击按钮出现60秒倒计时，60s内按钮不可用，倒计时到了时间方可再次点击获取。另外还有一个知识点，只有input及button这样的表单元素有disbale属性，如何设置是否可用
效果如下图：点击按钮出现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 countdown(e)
61 },1000)
62 }
63 }
64 script>
65 body>
66 html>
京公网安备 11010802041100号