jQuery计时器插件

/**
 * 定义一个jQuery计时插件,实现记录计时开始时间、结束时间,总共耗时的功能
 * @param $
 * 
 * @author Ivan 2862099249@qq.com
 * @date 2014年11月25日 下午8:48:55 
 * @version V1.0
 * 
 */

(function($){
    
    $.timer = {};
    
    /**
     * 扩展Date对象,为其增加一个格式化方法
     * @param format 传入日期格式,如yyyy-MM-dd hh:mm:ss
     * @returns
     */
    Date.prototype.format = function(format) {
        var o = {
            "M+" : this.getMonth() + 1, // month
            "d+" : this.getDate(), // day
            "h+" : this.getHours(), // hour
            "m+" : this.getMinutes(), // minute
            "s+" : this.getSeconds(), // second
            "q+" : Math.floor((this.getMonth() + 3) / 3), // quarter
            "S" : this.getMilliseconds()
        // millisecond
        };
        if (/(y+)/.test(format))
            format = format.replace(RegExp.$1, (this.getFullYear() + "")
                    .substr(4 - RegExp.$1.length));
        for ( var k in o)
            if (new RegExp("(" + k + ")").test(format))
                format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k]
                        : ("00" + o[k]).substr(("" + o[k]).length));
        return format;
    };
    
    var interval = 0; // 定义一个定时器
    
    // 私有函数:启动计时器函数
    function run(et) {
        interval = setInterval(chat, "1000",et); // 定时的设置
    }
    
    // 私有函数:定时执行函数
    function chat(et) {
        var d = new Date().format('yyyy-MM-dd hh:mm:ss');
        //更新结束时间
        $("#"+et).html(d);
    }
    
    // 插件的defaults
    $.timer.defaults = {
        startTime : 'startTime',
        endTime : 'endTime',
        costTime : 'costTime'
    };
    
    //计时开始
    $.timer.start = function(options){
        var opts = $.extend({}, $.timer.defaults, options);
        
        var st = new Date().format('yyyy-MM-dd hh:mm:ss');
        $("#"+opts.startTime).html(st);
        $("#"+opts.costTime).html("");
        
        chat(opts.endTime);
        // 加载页面时启动定时器
        run(opts.endTime); 
    };
    
    //私有函数:计算统计耗时
    function setCostTime(opts) {
        var sTime = $("#"+opts.startTime).html();
        var eTime = $("#"+opts.endTime).html();

        var sDate = new Date(Date.parse(sTime.replace(/-/g, "/")));
        var eDate = new Date(Date.parse(eTime.replace(/-/g, "/")));

        var diffMillisecond = eDate.getTime() - sDate.getTime(); // 时间差的毫秒数

        // 计算出相差天数
        var days = Math.floor(diffMillisecond / (24 * 3600 * 1000));

        // 计算出小时数
        var leave1 = diffMillisecond % (24 * 3600 * 1000); // 计算天数后剩余的毫秒数
        var hours = Math.floor(leave1 / (3600 * 1000));
        // 计算相差分钟数
        var leave2 = leave1 % (3600 * 1000); // 计算小时数后剩余的毫秒数
        var minutes = Math.floor(leave2 / (60 * 1000));

        // 计算相差秒数
        var leave3 = leave2 % (60 * 1000); // 计算分钟数后剩余的毫秒数
        var seconds = Math.round(leave3 / 1000);

        var ctText = "耗时: " + days + "天 " + hours + "小时 " + minutes + " 分钟" + seconds + " 秒";
        
        $("#"+opts.costTime).html(ctText);

    }
    
    //计时结束
    $.timer.stop = function(options){
        
        var opts = $.extend({}, $.timer.defaults, options);
        
        // 关闭定时器
        clearTimeout(interval); 
        
        setCostTime(opts);
        
    };
    
})(jQuery);

转载于:https://www.cnblogs.com/ivan0626/p/4161543.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
提供了三个函式 1 everyTime 时间间隔 [计时器名称] 函式名称 [次数限制] [等待函式程序完成] 2 oneTime 时间间隔 [计时器名称] 呼叫的函式 3 stopTime [计时器名称] [函式名称] everyTime 时间间隔 [计时器名称] 函式名称 [次数限制] [等待函式程序完成] 每1秒执行函式test function test { do something } $ "body" everyTime "1s" test ; 每1秒执行 $ "body" everyTime "1s" function { do something } ; 每1秒执行 并命名计时器名称为A $ "body" everyTime "1s" "A" function { do something } ; 每20秒执行 最多5次 并命名计时器名称为B $ "body" everyTime "2das" "B" function { do something } 5 ; 每20秒执行 无限次 并命名计时器名称为C 若时间间隔抵到 但函式程序仍未完成则需等待执行函式完成后再继续计时 $ "body" everyTime "2das" "C" function { 执行一个会超过20秒以上的程式 } 0 true ; oneTime 时间间隔 [计时器名称] 呼叫的函式 倒数10秒后执行 $ "body" oneTime "1das" function { do something } ; 倒数100秒后执行 并命名计时器名称为D $ "body" oneTime "1hs" "D" function { do something } ; stopTime [计时器名称] [函式名称] 停止所有的在$ "body" 上计时器 $ "body" stopTime ; 停止$ "body" 上名称为A的计时器 $ "body" stopTime "A" ; 停止$ "body" 上所有呼叫test 的计时器 $ "body" stopTime test ; 自定义时间单位 打开源代码 找到 powers: { Yeah this is major overkill "ms": 1 "cs": 10 "ds": 100 "s": 1000 "das": 10000 "hs": 100000 "ks": 1000000 }">提供了三个函式 1 everyTime 时间间隔 [计时器名称] 函式名称 [次数限制] [等待函式程序完成] 2 oneTime 时间间隔 [计时器名称] 呼叫的函式 3 stopTime [计时器名称] [函式名称] [更多]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值