/**
* 定义一个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. 第二篇:尽可能使用 const

    前言 const 关键字是常量修辞符,如果要告知编译器某个变量在程序中不会发生改变,则可将其声明为 const. 但,对 const 关键字的认识不能仅仅停留在这一层 - 它提供了很多更强大的功能. ...

  2. Travel(最短路)

    Travel The country frog lives in has nn towns which are conveniently numbered by 1,2,…,n1,2,…,n. Amo ...

  3. speech sdk 文字转语音

    1.下载SDK包 https://www.microsoft.com/en-us/download/details.aspx?id=10121 2.直接上代码 // SpeechRecognition ...

  4. Python3.6全栈开发实例[007]

    7.此函数只接收一个参数且此参数必须是列表数据类型,此函数完成的功能是返回给调用者一个字典,此字典的键值对为此列表的索引及对应的元素.例如传入的列表为:[11,22,33] 返回的字典为 {0:11, ...

  5. python中os模块函数方法详解最全最新

    os.getcwd() 获取当前工作目录,即当前python脚本工作的目录路径 import os print(os.getcwd()) os.chdir("dirname") 改 ...

  6. tomcat 的 Pipeline 机制

    一.server.xml 在每个容器对象里面都有一个pipeline,Pipeline就像是每个容器的逻辑总线. <Host name="localhost" appBase ...

  7. 如何用jquery获取input输入框中的值?

    如何用jquery获取<input id="test" name="test" type="text"/>中输入的值? $(&q ...

  8. 二值法方法综述及matlab程序

    在某些图像处理当中一个关键步是二值法,二值化一方面能够去除冗余信息,另一方面也会使有效信息丢失.所以有效的二值化算法是后续的处理的基础.比如对于想要最大限度的保留下面图的中文字,以便后续的定位处理. ...

  9. 创建spring boot 项目所遇到的问题

    1.添加完MySQL和jdbc约束后,在配置文件内spring.datasource.driver-class-name=com.mysql.jdbc.Driver 报错,显示找不到驱动包,原因是: ...

  10. hadoop学习第二天-了解HDFS的基本概念&&分布式集群的搭建&&HDFS基本命令的使用

    一.HDFS的相关基本概念 1.数据块 1.在HDFS中,文件诶切分成固定大小的数据块,默认大小为64MB(hadoop2.x以后是128M),也可以自己配置. 2.为何数据块如此大,因为数据传输时间 ...