美文网首页
三种按钮倒计时方法

三种按钮倒计时方法

作者: 遨游在bug中 | 来源:发表于2017-06-16 11:56 被阅读0次

    1.遇到阅读协议时的倒计时

    <!--html 倒计时确定 -->
    <input type="button" id="bt" value="请仔细阅读协议(5)" disabled="true" />
    
    <script type="text/javascript">
        var time = 5, //计数器
         timer=null;        //定时器
        window.onload = function(){
            var bt = document.getElementById('bt')
            timer = setInterval("daojishi()", 1000);//执行方法
        }
        function daojishi() {
            if(time <= 1) {
                bt.value = "确定";
                bt.removeAttribute("disabled");//删除按钮disabled属性
                clearInterval(timer);//清除定时器
                return;
            }else{
                time--;
                bt.value = ("请仔细阅读协议(" + time +")");
        }
    }
    
    </script>
    

    第二种获取验证码,传参的方式,这个方法没有点击延迟

    <!-- 获取验证码 -->
    <input type="button" value="免费获取验证码" onclick="settime(this)"/> 
    
    <script>
        var countdown=5;//计数器
        function settime(val) {//方法里面传参数
            if (countdown == 0) {
                val.removeAttribute("disabled");//指向按钮本身
                val.value="免费获取验证码";
                countdown=5;
            } else {
                val.setAttribute("disabled", true);
                val.value="重新发送(" + countdown + ")";
                countdown--;
                setTimeout(function() {
                    settime(val)
                },1000)
            }
        }
    </script>
    

    第三章普通的方法,这种方法点击有延迟

    <input type="button" id="btn" value="获取验证码"/>
    
    <script>
        var count=5,
        timer2 = null;
        var btn = document.getElementById("btn")
        btn.onclick = function(){
        timer2=setInterval(function(){
            if (count==0) {
                clearInterval(timer2)
                btn.removeAttribute("disabled");
                btn.value="免费获取验证码";
                count=5;
            }else{
                btn.value = "重新发送(" + count + ")";
                count--;
                btn.setAttribute("disabled",true)
            }
        },1000)
    }
    </script>
    

    相关文章

      网友评论

          本文标题:三种按钮倒计时方法

          本文链接:https://www.haomeiwen.com/subject/bqwpqxtx.html