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+ ...
随机推荐
- 第三章 T-SQL 编程
3.1 使用变量 变量是可以存储数据值的对象.可以使用局部变量向SQL语句传递数据.在T-SQL中执行一批SQL语句时,可以声明许多变量以便临时使用.声明变量以后,可以在批处理中用一条T-SQL语句设 ...
- zookeeper安装步骤
zookeeper安装步骤 百度搜索:zookeeper 进入后点击下载: 进入到下载的页面 英文: 中文: 进入版本列表: 进入后复制该链接, 在linux执行wget下载: wget https: ...
- idea 不能编译生成class文件
问题:开发工程中将idea中编译输出目录 out 删掉.发现再次编译不能生成class文件 解决方案:settings -> compiler 勾选自动编译选项
- JSON工具类库: alibaba/fastjson 使用记录
JSON工具类库: alibaba/fastjson 使用记录 一.了解JSON JSON标准规范中文文档: http://www.json.org/json-zh.html 最佳实践:http:// ...
- 关于JAVA中String类型的最大长度
前些天看到一道面试题,题目很容易理解:String的长度限制是多少? 针对这个题目,浏览了网友的回答,大概得到了3个层次的答案. 最浅的层次: 近似计算机内存大小的长度.这是作为一个程序员最浅显的回答 ...
- 洛谷 P1407 [国家集训队]稳定婚姻
洛谷 这个题面很有意思,像我这样的菜鸡,完全不需考虑婚姻的稳定 性 问题. tarjan裸题,直接讲算法吧: 原配夫妻之间分别连一条边,小情人之间反向连边. 这时候我们会发现一个性质,如果婚姻稳定,那 ...
- 虚拟机中的CentOS7如何上网?
进入文本插入编辑模式. 重点设置BOOTPROTO=dhcp,ONBOOT=yes即可. 修改完之后,先按Esc键,再按:键,然后输入wq,最后按回车键方可退出vim编辑器 在主机下,按win+R键, ...
- Maven- 使用Maven构建一个可执行jar
How to Create an Executable JAR with Maven 1.最重要的是使用jar类型,<packaging>jar</packaging>.当然不 ...
- 软件工作考核项(zcl)——
注意:这里没有对代码风格做要求,因为要代码走查! 考核项 考核标准 分数等级 需求规格说明书编写 主要用例图缺失 -1 主要软件界面设计图缺失 -1 主要功能清单项目缺失 -1 主要复 ...
- hadoop linux 杂记
切换到root su 修改sudo sudo + 命令 --> root权限 + 命令 su root vim /etc/sudoers ...