jQuery计时器插件

/**
 * 定义一个jQuery计时插件,实现记录计时开始时间、结束时间,总共耗时的功能
 * @param $
 *
 * @author Ivan [email protected]
 * @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);
时间: 2024-08-07 00:17:39

jQuery计时器插件的相关文章

基于JQuery.timer插件实现一个计时器

基于JQuery.timer插件实现一个计时器,需要的朋友可以参考下. 先去官网下载jQuery Timers插件 ,然后引用到html中.这里是1.2 version 复制代码代码如下: <script src="../Javascripts/Plugins/jquery.timers-1.2.js" type="text/javascript"></script> 然后是HTML,我们可以放一个hidden 的server control

JQuery 定时器 (Jquery Timer 插件)

jQuery Timers插件地址: http://plugins.jquery.com/project/timers JQuery Timers应用知识提供了三个函式1. everyTime(时间间隔, [计时器名称], 函式名称, [次数限制], [等待函式程序完成])2. oneTime(时间间隔, [计时器名称], 呼叫的函式)3. stopTime ([计时器名称], [函式名称])/***************************************************

Jquery Media插件使用,解决在线预览及打开PDF文件

用到过PDF的媛媛and猿猿们,总会发现这大千世界之万能播放器插件,总能少了对媒体控制的接口. 你总会发现PDF无法像img图片一样正常加载展现出来,那么我们在通用语法的基础上拓展出了适用于预览及打开的PDF插件便于开发应用. 最主要的是使用到了一个jquery的插件jquery.media.js,使用这个插件就很容易实现了. 该插件可以播放多种类型的多媒体文件包括:Flash, Quicktime, Windows Media Player, Real Player, MP3, Silverl

jQuery.fly插件实现添加购物车抛物线效果

样例 使用电商 APP 购买商品时,很多都有上图的红色小球抛物线效果,下面通过 jQuery.fly 插件来实现一个简单 Demo. 实现 简单思路: 确定抛物线的起始和终止位置: 通过 js 在起始位置创建一个 document 对象,作为红色小球: 通过 jQuery.fly 插件提供的fly函数来移动小球,移动至终止位置: 当小球到达终止位置后,通过fly插件提供的 onEnd 回调函数,将小球销毁: Demo 源码: <!DOCTYPE html> <html lang=&quo

asp.net 实现在线打印功能,jQuery打印插件PrintArea实现自动分页

使用的组件:jQuery打印插件PrintArea,有兴趣的可以研究一下. 使用方法略过,这里将介绍如何实现打印多页是可以分页. 现在提供两种方法思路: 1.根据特定的打印机型号和使用的纸张类型,然后用JS来算出每页多高,按照每张纸的高度来进行适当的增减高度.(这种方式缺点就是只能针对单中类型的纸张,计算十分的繁琐,要些很多加减法 -_-);). 参考A4纸高度的网页:http://www.jb51.net/office/word/67360.html 2.在如上一个思路的方式,试着查找能不能自

jquery.cookie插件使用

jquery.cookie插件是一个在浏览器端对cookie进行操作的,使用非常方便. jquery.cookie中的操作: jquery.cookie.js插件:百度即可下载 创建一个会话cookie: $.cookie(‘cookieName’,'cookieValue’); 注:当没有指明cookie时间时,所创建的cookie有效期默认到用户浏览器关闭止,故被称为会话cookie. 创建一个持久cookie: $.cookie(‘cookieName’,'cookieValue’,{ex

jQuery验证插件

学习要点: 1.使用 validate.js 插件 2.默认验证规则 3.validate()方法和选项 4.validate.js 其他功能 验证插件(validate.js),是一款验证常规表单数据合法性的插件.使用它,极大的解放了在表单上繁杂的验证过程,并且错误提示显示的完善也增加了用户体验. 一.使用 validate.js 插件 官网下载:http://bassistance.de/jquery-plugins/jquery-plugin-validation最重要的文件是valida

jQuery幻灯片插件Skippr

Skippr是一款带左右箭头,索引按钮,滑动切换效果并且轻量.快速的幻灯片 设置 引入jquery.skippr.css.jquery.js.jquery.skippr.js 注意jQuery必须在jquery.skippr.js之前 <head> <link href="css/jquery.skippr.css" rel="stylesheet" type="text/css" > <script src=&qu

jQuery图片插件自动轮播原理解析

经常看到项目要用到图片轮播效果,一般的操作流程都是先到网上找一个好看的JQuery图片轮播插件,然后看下demo,再配下参数.好了,关机下班回家 其余的就交给插件吧. 是不是感觉有了jQuery,世界变得那么美好呢. 本人最近用的一个插件是 jquery.carousel.js,官方网站是:http://richardscarrott.co.uk/posts/view/jquery-carousel-plugin 下面,我们来讨论一下图片轮播原理. 首先来个简单的demo 效果图如下: 这是个导