/**
* 定义一个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);

jQuery计时器插件的更多相关文章

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

    基于JQuery.timer插件实现一个计时器,需要的朋友可以参考下.   先去官网下载jQuery Timers插件 ,然后引用到html中.这里是1.2 version 复制代码代码如下: < ...

  2. JQuery 定时器 (Jquery Timer 插件)

      jQuery Timers插件地址: http://plugins.jquery.com/project/timers JQuery Timers应用知识提供了三个函式1. everyTime(时 ...

  3. 深入学习jQuery自定义插件

    原文地址:jQuery自定义插件学习 1.定义插件的方法 对象级别的插件扩展,即为jQuery类的实例增加方法, 调用:$(选择器).函数名(参数);      $(‘#id’).myPlugin(o ...

  4. [jQuery]jQuery DataTables插件自定义Ajax分页实现

    前言 昨天在博客园的博问上帮一位园友解决了一个问题,我觉得有必要记录一下,万一有人也遇上了呢. 问题描述 园友是做前端的,产品经理要求他使用jQuery DataTables插件显示一个列表,要实现分 ...

  5. 使用jQuery.form插件,实现完美的表单异步提交

    传送门:异步编程系列目录…… 时间真快,转眼一个月快结束了,一个月没写博客了!手开始生了,怎么开始呢…… 示例下载:使用jQuery.form插件,实现完美的表单异步提交.rar 月份的尾巴,今天的主 ...

  6. 为jQuery写插件

    很多场合,我们都会调用jQuery的插件去完成某个功能,比如slider. 如下图,做一个div,通过“$( "#slider" ).slider();”的方式直接将div变成sl ...

  7. bootstrap-简洁实用的jQuery手风琴插件

    前端 <html lang="zh"> <head> <meta charset="UTF-8"> <meta htt ...

  8. 推荐15款响应式的 jQuery Lightbox 插件

    利用现代 Web 技术,网络变得越来越轻巧与.模态框是突出展现内容的重要形式,能够让用户聚焦到重要的内容上去.在这个列表中,我们编制了15款响应式的 jQuery 灯箱库,这将有助于开发人员创建和设计 ...

  9. Chocolat.js – 响应式的 jQuery Lightbox 插件

    Chocolat.js 使您能够显示一个或多个图像在同一页面上.给用户展示一组图片缩略图,可以显示全页或块.Chocolat.js 可以很好地处理所有主要的浏览器.它在下面这些浏览器测试通过:IE7+ ...

随机推荐

  1. iPhone程序中的加密处理

    本文转载至 http://blog.csdn.net/zaitianaoxiang/article/details/6650478     原文链接 : http://www.yifeiyang.ne ...

  2. node.js的安装与第一个hello world、node.js的初始化

    1.下载node.js文件 2.windows下点击安装  重复下一步即可 3.编辑工具  EditPlus编辑器 4.新建保存目录的文件夹,并新建一个文本文档 5.打开EditPlus编辑器  打开 ...

  3. 《从零开始学Swift》学习笔记(Day 53)——do-try-catch错误处理模式

    原创文章,欢迎转载.转载请注明:关东升的博客 Swift 1.x的错误处理模式存在很多弊端,例如:为了在编程时候省事,给error参数传递一个nil,或者方法调用完成后不去判断error是否为nil, ...

  4. Cocos2d-x Lua中帧动画

    帧动画就是按一定时间间隔.一定的顺序.一帧一帧地显示帧图片.我们的美工要为精灵的运动绘制每一帧图片,因此帧动画会由很多帧组成,按照一定的顺序切换这些图片就可以了. 在Cocos2d-x Lua中播放帧 ...

  5. js引入方式的弹框方法2

    html代码: <!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv=& ...

  6. mongodb安全配置

    1. 为数据库增加管理员 use admin db.createUser({ >user:'userName', pwd:'password', roles:[{role:'userAdminA ...

  7. Bootstrap的js分页插件属性介绍

    Bootstrap Paginator是一款基于Bootstrap的js分页插件,功能很丰富,个人觉得这款插件已经无可挑剔了.它提供了一系列的参数用来支持用户的定 制,提供了公共的方法可随时获得插件状 ...

  8. 处理 Java 的“Cannot allocate memory”错误

    今天在配置 DCA 服务器的时候,检验 java 版本的时候忽然遇到了一个 Cannot allocate memory 错误 [root@elcid-prod1 ~]# java -version ...

  9. Insert Buffering

    14.5.13.4 Insert Buffering Database applications often insert new rows in the ascending order of the ...

  10. 《Mining of Massive Datasets》笔记(一)

    数据挖掘基本概念 数据挖掘定义 最广为接受得到定义是,数据挖掘是数据"模型"的发现过程.而"模型"却可以有多种含义. 1)统计建模 统计学家认为数据挖掘就是统计 ...