JS实现60s倒计时(亲测有效)，及span标签如何使用和禁用onclick事件

来源：互联网发布：oracl 显示所有数据库编辑：程序博客网时间：2024/05/20 15:59

效果如下图：点击按钮出现60秒倒计时，60s内按钮不可用，倒计时到了时间方可再次点击获取。

另外还有一个知识点，只有input 及button这样的表单元素有disbale属性，如何设置是否可用属性的方法一般用$("#id").attr('disbaled','true')及$("#id").prop('disbaled','false')，对span img这样的没有disbale的属性，这种方法就不起作用了，此时可用$("#id").setAttribute('onclick',function())或$("#id").removeAttribute("onclick")方法来设置事件是否可用。

以下是所有代码，复制即可使用：

<!DOCTYPE html><html><head>    <title>验证码倒计时</title>    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>    <style type="text/css" >        .validate-div input{            width:130px;            float:left;            line-height:30px;        }        .validation{            float:left;            width: 85px;            background-color: #2eaef1;            border-radius: 5px;            margin-left: 20px;            text-align: center;            margin-top: 3px;        }        .validation span{            color: #fff;            line-height:30px;            font-size: 14px;        }    </style></head><body><div class="validate-div">    <input type="text" class="validation-code" id="validation-code" name="smscode" placeholder="输入验证码" >    <div class="validation">        <span class="" id="validate_span" onclick="sendsms(this);">获取验证码</span>    </div></div></body></html><script type="text/javascript">    //发送验证码函数    function sendsms(e){        /*发送验证码功能*/        countdown(e);                                   //若发送验证码成功，则调用倒计时函数    }    //倒计时函数    var time = 10;    function countdown(e){        if (time == 0) {            //e.setAttribute('disabled',false);         对没有disbaled属性的span标签，此方法无效            e.setAttribute("onclick","sendsms(this)");            $("#validate_span").html("获取验证码");            time = 10;        }else{            //e.attr('disabled',true);                  对没有disbaled属性的span标签，此方法也无效            //e.setAttribute("onclick", '');            这样写也可以            e.removeAttribute("onclick");            $("#validate_span").html("重新发送(" + time + ")");            time--;            setTimeout(function() {                countdown(e)            },1000)        }    }</script></body></html>

阅读全文

0 0