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

浏览：621次- 评论：0次- 发布时间：2019-08-22

Html

Css

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

使用演示显示为秒

使用演示显示为分:秒

使用演示显示为天:时:分:秒

//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;
    }

//使用演示 显示为 秒
    $("#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-clear").on("click",function(){
        $("#test1").trigger("bc.clear");
    });

↑上面代码改变，会自动显示代码结果

jQuery调用版本：1.11.3

立即下载收藏

积分说明：注册即送10牛币，每日签到可获得5牛币，成为VIP会员可永久免牛币下载！充值积分充值会员更多说明»

代码描述：jquery倒计时按钮代码，常用于验证码倒计时按钮，代码效果就是点击按钮以后按钮上面会出现倒计时读数，倒计时的时间可以自行指定，按钮倒计时的格式有4中格式可选。

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

讨论这个常用代码（0）回答他人问题或分享心得会奖励牛币

〒_〒居然一个评论都没有……

文明上网，理性发言！ 😉 阿里云幸运券，戳我领取

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

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

使用演示 显示为 秒

使用演示 显示为 分:秒

使用演示 显示为 天:时:分:秒

使用演示 显示为 天:时:分:秒

讨论这个常用代码（0）回答他人问题或分享心得会奖励牛币

使用演示显示为秒

使用演示显示为分:秒

使用演示显示为天:时:分:秒

使用演示显示为天:时:分:秒