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

jQuery计时器插件相关推荐

  1. 支持ie8的时分秒的html,兼容ie8的漂亮jQuery计时器插件

    C3counter.js是一款兼容ie8的漂亮jQuery计时器插件.该jQuery计时器插件使用图片作为计时器的背景,通过jquery来驱动时间计时动画,整体效果非常漂亮. 使用方法 在页面中引入j ...

  2. 一款简单的Bootstrap和jQuery倒计时插件

    下载地址 一款简单漂亮的jQuery计时器插件.该计时器插件可以实现秒.分钟和小时的计时功能,并带有开始.暂停和重新开始计时的按钮功能. 该计时器插件的计时功能依赖于jquery-runner插件. ...

  3. jQuery 计时器(jquery timers)简单应用

    jquery timers 代码(版本1.2): jquery timers /** * jQuery.timers - Timer abstractions for jQuery * Written ...

  4. html广告20s倒计时,简单时尚的jQuery倒计时插件

    SyoTimer是一款简单时尚的jQuery倒计时插件.该计时器插件支持IE8+的现代浏览器,它的界面简洁,功能齐全.它的特点还有: 在计时器计时结束之后的回调函数中可以修改计时器的结构. 可以周期的 ...

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

    样例 使用电商 APP 购买商品时,很多都有上图的红色小球抛物线效果,下面通过 jQuery.fly 插件来实现一个简单 Demo. 实现 简单思路: 确定抛物线的起始和终止位置: 通过 js 在起始 ...

  6. jquery倒计时插件可自定义多个倒计时间

    jquery倒计时插件设置多个自定义倒计时时间,任意设置天.小时.分钟.秒倒计时间功能. 查看演示>> <!DOCTYPE html PUBLIC "-//W3C//DTD ...

  7. jQuery 表格插件汇总

    本文搜集了大量 jQuery 表格插件,帮助 Web 设计者更好地驾御 HTML 表格,你可以对表格进行横向和竖向排序,设置固定表头,对表格进行搜索,对大表格进行分页,对表格进行滚动,拖放操作等等.这 ...

  8. 超强的jquery极品插件--色彩选择器类/ 右键菜单类/ 图片新闻flash展示类

    Farbtastic Farbtastic是一个color picker插件.它能够在一个页面中加入多个颜色选择控件,然后每个控件关联到页面中的一个元素比如:文本输入框. Farbtastic jQu ...

  9. JQuery模板插件jquery.tmpl-动态ajax扩展

    在上一篇JQuery模板插件-jquery.tmpl中介绍了这款插件.有时我们需要去动态的ajax去加载模板,或者数据,根据url参数或者其他信息加载不同的模板,数据.在我的某个项目中有这个需求,所以 ...

最新文章

  1. Virtual Box上的Ubuntu与Win7共享文件夹
  2. 基于空间相关的图像模板匹配及MATLAB实现
  3. 音视频技术开发周刊 | 189
  4. 如何设定vs2012用linux文件格式,Visual Studio 2012发布网站详细步骤
  5. C#中get和set访问器的用法
  6. 物理层接口特性、数据通信模型、物理层基本概念(数据、信号、码元 、信源、信道、信宿 、速率、波特、带宽)...
  7. 这里是强化学习入门,的入门 | 绝对新手友好
  8. WP7 App性能优化(12):检测应用程序性能(Ⅴ)
  9. Anaconda中安装pygame
  10. 陈绪博士作序:这不是一本白皮书 | 凌云时刻
  11. 网络信息安全基本属性
  12. mysql 数据库数据恢复 库被删了怎么恢复数据库
  13. linux中查找包含指定内容的文件
  14. java开发基础(面试必备)
  15. 多线程下载sis001的网友自拍贴图版面的图片
  16. 中国电视艺术家协会名誉主席赵化勇一行莅临蓝海彤翔参观指导
  17. honor荣耀开启影像新时代?探寻其背后真正实力
  18. linux上读取不到库文件,linux中make找不到库文件-lmpi的问题
  19. Filecoin与以太坊结合开启Web3.0丨Filecoin是唯一可信存储
  20. 洛谷 P2327 [SCOI2005]扫雷 解题报告

热门文章

  1. 哈尔滨理工大学软件与微电子学院程序设计竞赛(同步赛)B.Min Value
  2. 线性关系r范围_广义相加模型及其R实现
  3. 关于两种单菌种发酵的豆瓣酱代谢组学方面差异研究
  4. 高速ADC时钟jitter对信噪比和有效位数的影响
  5. H264编码基本原理(四)
  6. 使用Bosh在OpenStack上部署CloudFoundry碰到的问题
  7. vue 项目中使用svga格式动画图标效果 incorrect header check解决办法
  8. 网络管理与维护期末复习
  9. APISIX 上手指南
  10. Jenkins Job无法停止