• JS倒计时,不会重复执行


    直接上代码,亲自测试了的,没问题咯

    第一种是按钮上直接显示倒计时,

    <html> 
    <head> 
    <title>点击获取验证码按钮后按钮变灰,倒计时一段时间后又可重复点击</title> 
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.js"></script>
    </head> 
    <body> 
    <input type="button" id="btn" value="免费获取验证码" onclick="timer(10)" /> 
    <script type="text/javascript"> 
    function timer(time) {
        var btn = $("#btn");
        btn.attr("disabled", true);  //按钮禁止点击
        btn.val(time <= 0 ? "免费获取验证码" : ("" + (time) + "秒后可发送"));
        var hander = setInterval(function() {
            if (time <= 0) {
                clearInterval(hander); //清除倒计时
                btn.val("免费获取验证码");
                btn.attr("disabled", false);
                return false;
            }else {
                btn.val("" + (time--) + "秒后可发送");
            }
        }, 1000);
    }
    </script> 
    </body> 
    </html>

     第二种效果是点击按钮后,按钮被禁用,在另一处显示倒计时

    <!doctype html>
    <html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="https://cdn.bootcss.com/jquery/2.0.0/jquery.min.js">
        </script>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
    
            #ant {
                 150px;
                height: 50px;
                color: red;
                text-align: center;
                line-height: 50px;
                margin: 0px auto;
            }
        </style>
        <script>
            function test() {
               
                var count = 10;
                var timer = null;
                timer = setInterval(function () {
                    if (count > 0) {
                        count = count - 1;
                        $("#ant").html(count + "秒后再试");
                        $("#sendCode").attr("disabled", "disabled");
                    }
    
                    else {
                        $("#sendCode").removeAttr("disabled", "disabled");
                        $("#sendCode").html("发送验证码");
                        clearInterval(timer);
                    }
                }, 1000);
            }
        </script>
    </head>
    <body>
        <input type="button" value="发送验证码" onclick="test()" id="sendCode" />
        <div id="ant">0</div>
    </body>
    </html>

    有的朋友说第一种有问题,当使用来发送短信的时候,会发送两条短信,毛病还没找到,有解决了的大神麻烦指点下,谢谢了

  • 相关阅读:
    [tip]build x86+x64 parrelly for your VS solution
    float double的内存表示及比较大小的方法
    [Problem 13]欧拉
    Interface Project
    [复习]内存对齐
    [tip]VS online Gallery in Extention Manager
    [Problem 14]欧拉
    “火柴棍式”程序员面试题打破惯性思维
    [复习]时间复杂度及计算
    ModuleCatalog配置文件
  • 原文地址:https://www.cnblogs.com/LoveQin/p/5380702.html
Copyright © 2020-2023  润新知