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+ ...
随机推荐
- mysqldump: Got error: 1045
问题:最近备份mysql然后在执行mysqldump的时候提示权限和密码有问题 报错: Warning: Using a password on the command line interface ...
- MySQL-库的操作
05-库的操作 本节重点: 掌握库的增删改查 一.系统数据库 执行如下命令,查看系统库 show databases; nformation_schema: 虚拟库,不占用磁盘空间,存储的是数 ...
- Kotlin——初级篇(四):控制语句详解
在前面 的章节中讲解了Kotlin语言中的数据类型.变量与常量的定义.不了解请参见前面的内容: Kotlin--初级篇(三):数据类型详解. Kotlin--初级篇(二)常量.变量.注释. 下面详细为 ...
- Sass mixin 使用css border属性画三角形
To be finished. //triangle@mixin css-triangle ($direction: "down", $size: 20px, $color: #0 ...
- Kubectl工具常用命令
创建namesapce kubectl create namespace {name} 注意:name只能为小写字母.数字和-的组合,且开头结尾为字母,一般格式为my-name 123-abc等. 创 ...
- 计算属性 vs 侦听属性 当需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的
https://cn.vuejs.org/v2/guide/computed.html#基础例子 计算属性 vs 侦听属性 Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动:侦听属 ...
- VS中没有为此解决方案配置选中要生成的项目
菜单->生成->配置管理器->给要生成的项目打钩
- [IOI2018]狼人
[IOI2018]狼人 luogu UOJ 对人形和狼形分别建克鲁斯卡尔重构树 每次询问就是对于两棵树dfs序的一个二维数点,主席树维护 #include<bits/stdc++.h> u ...
- MySQL权限系统(三).权限表 Grant Tables
7.2.2 Grant Tables 授权表 The mysql system database includes several grant tables that contain informat ...
- ThreadLocal(四) : FastThreadLocal原理
一.ThreadLocal的原理以及存在的问题 a. 每个线程内部维护了一个ThreadLocal.ThreadLocalMap类型的变量 b. ThreadLocalMap 的 key 为 Thre ...