知识 分享 互助 懒人建站

    懒人建站专注于网页素材下载,提供网站模板、网页设计、ps素材、图片素材等,服务于【个人站长】【网页设计师】和【web开发从业者】的代码素材与设计素材网站。

    懒人建站提供网页素材下载、网站模板
    知识 分享 互助!

    jquery倒计时按钮常用于验证码倒计时按钮

    作者:速博娱乐是什么 来源:郑州网站建设 2016-12-24 人气:
    jquery倒计时按钮代码,常用于验证码倒计时按钮,代码效果就是点击按钮以后按钮上面会出现倒计时读数,倒计时的时间可以自行指定,按钮倒计时的格式有4中格式可选。

    jquery倒计时按钮代码,常用于验证码倒计时按钮,代码效果就是点击按钮以后按钮上面会出现倒计时读数,倒计时的时间可以自行指定,按钮倒计时的格式有4中格式可选。倒计时代码依赖jquery,因为里面有些节点操作是直接用的jq方法,注册自定义事件也是用的jq方法,jquery确实是个非常棒的js库。

    倒计时代码调用方法:

    <h3>使用演示 显示为 秒</h3>
    <p style="margin-bottom: 40px;">
        <button type="button" id="test1">获取验证码</button>
        <button type="button" id="test1-clear">清理验证码</button>
    </p>
    <h3>使用演示 显示为 分:秒</h3>
    <p style="margin-bottom: 40px;">
        <button type="button" id="test2">获取验证码</button>
    </p>
    <h3>使用演示 显示为 天:时:分:秒</h3>
    <p style="margin-bottom: 40px;">
        <button type="button" id="test3">获取验证码</button>
    </p>
    <h3>使用演示 显示为 天:时:分:秒</h3>
    <p style="margin-bottom: 40px;">
        <button type="button" id="test4">获取验证码</button>
    </p>
    

    倒计时显示为 秒

    //使用演示 显示为 秒
    $("#test1").on("click",function(){
        buttonCountdown($(this), 1000 * 60 * 3, "ss");
    }); 

    倒计时显示为 分:秒

    //使用演示 显示为 分:秒
    $("#test2").on("click",function(){
        buttonCountdown($(this), 1000 * 60 * 3, "m:s");
    });
    

    使倒计时显示为 时:分:秒

    //使用演示 显示为 时:分:秒
    $("#test3").on("click",function(){
        buttonCountdown($(this), 1000 * 60 * 3, "h:m:s");
    }); 

    倒计时显示为 天:时:分:秒

    //使用演示 显示为 天:时:分:秒
    $("#test4").on("click",function(){
        buttonCountdown($(this), 1000 * 60 * 3, "d:h:m:s");
    });
    

    清理$("#test1")的倒计时 比如请求出错或者什么原因要清理倒计时按钮

    //清理$("#test1")的倒计时  比如请求出错或者什么原因要清理倒计时按钮
    $("#test1-clear").on("click",function(){
        $("#test1").trigger("bc.clear");
    });
    

    jquery倒计时按钮常用语验证码倒计时按钮

    倒计时代码函数

    //懒人建站,服务于【个人站长】【网页设计师】和【web开发从业者】的代码素材与设计素材网站。
    //懒人建站http://sbylssm.985sunbet.com/
    //jquery倒计时按钮常用于验证码倒计
    function buttonCountdown($el, msNum, timeFormat) {
        var text = $el.data("text") || $el.text(),
                timer = 0;
        $el.prop("disabled", true).addClass("disabled")
                .on("bc.clear", function () {
                    clearTime();
                });
    
        (function countdown() {
            var time = showTime(msNum)[timeFormat];
            $el.text(time + '后失效');
            if (msNum <= 0) {
                msNum = 0;
                clearTime();
            } else {
                msNum -= 1000;
                timer = setTimeout(arguments.callee, 1000);
            }
        })();
    
        function clearTime() {
            clearTimeout(timer);
            $el.prop("disabled", false).removeClass("disabled").text(text);
        }
    
        function showTime(ms) {
            var d = Math.floor(ms / 1000 / 60 / 60 / 24),
                    h = Math.floor(ms / 1000 / 60 / 60 % 24),
                    m = Math.floor(ms / 1000 / 60 % 60),
                    s = Math.floor(ms / 1000 % 60),
                    ss = Math.floor(ms / 1000);
    
            return {
                d: d + "天",
                h: h + "小时",
                m: m + "分",
                ss: ss + "秒",
                "d:h:m:s": d + "天" + h + "小时" + m + "分" + s + "秒",
                "h:m:s": h + "小时" + m + "分" + s + "秒",
                "m:s": m + "分" + s + "秒"
            };
        }
    
        return this;
    }
    ↓ 查看全文

    jquery倒计时按钮常用于验证码倒计时按钮由懒人建站收集整理,您可以自由传播,请主动带上本文链接

    懒人建站就是免费分享,觉得有用就多来支持一下,没有能帮到您,懒人也只能表示遗憾,希望有一天能帮到您。

    jquery倒计时按钮常用于验证码倒计时按钮-最新评论

    网站地图 明陞国际备用 宝马会娱乐试玩 金榜娱乐官方网
    申博菲律宾申博 澳门太阳城娱乐官网 申博游戏客户端 2016申博sunbet线上
    申博网上登入 杏彩娱乐平台黑钱 久赢国际登陆 申博sunbet注册
    大玩家 中原娱乐bc2013 明陞国际备用 龙博线上娱乐
    大玩家官方网站 豪博在线娱乐 龙岩新世纪娱乐 喜达娱乐官方网站
    191tt.com 989DC.COM 985sunbet.com 858XTD.COM 1112898.COM
    967SUN.COM 718jbs.com 1115119.COM 687XTD.COM 716SUN.COM
    1117118.COM XSB658.COM 97XTD.COM DC857.COM 115sj.com
    187sunbet.com 986ib.com 107SUN.COM 528XTD.COM 88sbsun.com