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);
jQuery计时器插件的更多相关文章
- 基于JQuery.timer插件实现一个计时器
基于JQuery.timer插件实现一个计时器,需要的朋友可以参考下. 先去官网下载jQuery Timers插件 ,然后引用到html中.这里是1.2 version 复制代码代码如下: < ...
- JQuery 定时器 (Jquery Timer 插件)
jQuery Timers插件地址: http://plugins.jquery.com/project/timers JQuery Timers应用知识提供了三个函式1. everyTime(时 ...
- 深入学习jQuery自定义插件
原文地址:jQuery自定义插件学习 1.定义插件的方法 对象级别的插件扩展,即为jQuery类的实例增加方法, 调用:$(选择器).函数名(参数); $(‘#id’).myPlugin(o ...
- [jQuery]jQuery DataTables插件自定义Ajax分页实现
前言 昨天在博客园的博问上帮一位园友解决了一个问题,我觉得有必要记录一下,万一有人也遇上了呢. 问题描述 园友是做前端的,产品经理要求他使用jQuery DataTables插件显示一个列表,要实现分 ...
- 使用jQuery.form插件,实现完美的表单异步提交
传送门:异步编程系列目录…… 时间真快,转眼一个月快结束了,一个月没写博客了!手开始生了,怎么开始呢…… 示例下载:使用jQuery.form插件,实现完美的表单异步提交.rar 月份的尾巴,今天的主 ...
- 为jQuery写插件
很多场合,我们都会调用jQuery的插件去完成某个功能,比如slider. 如下图,做一个div,通过“$( "#slider" ).slider();”的方式直接将div变成sl ...
- bootstrap-简洁实用的jQuery手风琴插件
前端 <html lang="zh"> <head> <meta charset="UTF-8"> <meta htt ...
- 推荐15款响应式的 jQuery Lightbox 插件
利用现代 Web 技术,网络变得越来越轻巧与.模态框是突出展现内容的重要形式,能够让用户聚焦到重要的内容上去.在这个列表中,我们编制了15款响应式的 jQuery 灯箱库,这将有助于开发人员创建和设计 ...
- Chocolat.js – 响应式的 jQuery Lightbox 插件
Chocolat.js 使您能够显示一个或多个图像在同一页面上.给用户展示一组图片缩略图,可以显示全页或块.Chocolat.js 可以很好地处理所有主要的浏览器.它在下面这些浏览器测试通过:IE7+ ...
随机推荐
- NoSQL-redis with python
首先,先去看了一下NoSQL的概念: Wiki中参考的NoSQL终极指南(nosql-database.org)中说: NoSQL DEFINITION: Next Generation Databa ...
- codevs1068 乌龟棋==洛谷P1541 乌龟棋
P1541 乌龟棋 题目背景 小明过生日的时候,爸爸送给他一副乌龟棋当作礼物. 题目描述 乌龟棋的棋盘是一行N个格子,每个格子上一个分数(非负整数).棋盘第1格是唯一的起点,第N格是终点,游戏要求玩家 ...
- #1560 : H国的身份证号码II(dp+矩阵快速幂)
#1560 : H国的身份证号码II 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 H国的身份证号码是一个N位的正整数(首位不能是0).此外,由于防伪需要,一个N位正整 ...
- UI auto程序结构组织方式
UI Auto分三个layer: 1. Object finding – 单独一个类,寻找到控件.因为UI auto最容易改动的就是UI界面,这样全部放到一起就便于统一修改. 2. Task - 对控 ...
- 如何用SQL为每一行均产生一个随机数
) as int) as RndId from 表名
- 内置函数: filter 和 map
内置函数———filter和map filter filter() 函数用于过滤序列,过滤掉不符合条件的元素,返回由符合条件元素组成的新列表.接收两个参数,第一个为函数,第二个为序列,序列的每个元素作 ...
- 我的Android进阶之旅------>Android百度地图定位SDK功能学习
因为项目需求,需要使用百度地图的定位功能,因此去百度地图开发平台下载了百度地图的Android定位SDK最新版本的开发包和示例代码学习. Android 定位SDK地址:http://develope ...
- PAT 1072. 开学寄语(20) JAVA
下图是上海某校的新学期开学寄语:天将降大任于斯人也,必先删其微博,卸其QQ,封其电脑,夺其手机,收其ipad,断其wifi,使其百无聊赖,然后,净面.理发.整衣,然后思过.读书.锻炼.明智.开悟.精进 ...
- 阿里云centos+java环境搭建
目录 .准备 .安装jdk .安装tomcat .安装mysql 1.准备 购买阿里云服务器,我买的是Centos 6.5. 因为是linux,在window下管理我使用XManager,这个软件可以 ...
- Bootstrap入门教程
资料来源: http://www.cnblogs.com/ventlam/archive/2012/05/28/2520703.html 1.全局样式:Bootstrap要求html5的文件类型,所以 ...