zoukankan      html  css  js  c++  java
  • 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);
  • 相关阅读:
    2020软件工程第二次作业
    软件工程第一次作业
    2020软件工程最后一次作业
    2020软件工程第四次作业-结对编程
    2020软件工程第三次作业-结对编程
    2020软件工程第二次作业
    如何在Anaconda3下打开ipynb文件
    2020软件工程第一次作业
    软件代码开发技术作业五 | 代码开发、测试及发布
    需求改进&系统设计
  • 原文地址:https://www.cnblogs.com/ivan0626/p/4161543.html
Copyright © 2011-2022 走看看