Jquery扩展- 倒计时
Source Code
(function($) {
$.fn.countdown = function(options) {
// default options
var defaults = {
attrName : 'data-diff',
tmpl : '<span class="hour">%{h}</span><span class="minute">%{m}</span>分钟<span class="second">%{s}</span>秒',
end : 'has ended',
afterEnd : null
};
options = $.extend(defaults, options);
// trim zero
function trimZero(str) {
return parseInt(str.replace(/^0/g, ''));
}
// convert string to time
function getDiffTime(str) {
var m;
if ((m = /^(\d{4})[^\d]+(\d{1,2})[^\d]+(\d{1,2})\s+(\d{2})[^\d]+(\d{1,2})[^\d]+(\d{1,2})$/.exec(str))) {
var year = trimZero(m[1]),
month = trimZero(m[2]) - 1,
day = trimZero(m[3]),
hour = trimZero(m[4]),
minute = trimZero(m[5]),
second = trimZero(m[6]);
return Math.floor((new Date(year, month, day, hour, minute, second).getTime() - new Date().getTime()) / 1000);
}
return parseInt(str);
}
// format time
function format(diff) {
var tmpl = options.tmpl, day, hour, minute, second;
day = /%\{d\}/.test(tmpl) ? Math.floor(diff / 86400) : 0;
hour = Math.floor((diff - day * 86400) / 3600);
minute = Math.floor((diff - day * 86400 - hour * 3600) / 60);
second = diff - day * 86400 - hour * 3600 - minute * 60;
tmpl = tmpl.replace(/%\{d\}/ig, day)
.replace(/%\{h\}/ig, hour)
.replace(/%\{m\}/ig, minute)
.replace(/%\{s\}/ig, second);
return tmpl;
}
// main
return this.each(function() {
var el = this,
diff = getDiffTime($(el).attr(options.attrName));
function update() {
if (diff <= 0) {
$(el).html(options.end);
if (options.afterEnd) {
options.afterEnd();
}
return;
}
$(el).html(format(diff));
setTimeout(function() {
diff--;
update();
}, 1000);
}
update();
});
};
})(jQuery);
Demo
<html>
<head>
<meta charset="utf-8" />
<title>Countdown Demo</title>
<style>
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="jquery.countdown.js"></script>
<script>
$(function() {
$('.J_countdown1').countdown();
$('.J_countdown2').countdown({
tmpl : '<span>%{d}</span>天<span>%{h}</span>小时<span>%{m}</span>分<span>%{s}</span>秒'
});
$('.J_countdown3').countdown({
tmpl : '<span>%{d}</span>天, <span>%{h}</span>小时, <span>%{m}</span>分, <span>%{s}</span>秒'
});
});
</script>
</head>
<body>
<div class="J_countdown1" data-diff="10"></div>
<div class="J_countdown1" data-diff="70"></div>
<div class="J_countdown1" data-diff="3610"></div>
<div class="J_countdown1" data-diff="86410"></div>
<div class="J_countdown2" data-diff="21234567890"></div>
<div class="J_countdown3" data-diff="21234567890"></div>
</body>
</html>
http://jquerycountdown.codeplex.com/
Jquery扩展- 倒计时的更多相关文章
- Python之Web前端jQuery扩展
Python之Web前端: 一. jQuery表单验证 二. jQuery扩展 三. 滚动菜单 一. jQuery表单验证: 任何可以交互的站点都有输入表单,只要有可能,就应该对用户输入的数据进行验证 ...
- 26、ASP.NET MVC入门到精通——后台管理区域及分离、Js压缩、css、jquery扩展
本系列目录:ASP.NET MVC4入门到精通系列目录汇总 有好一段时间没更新博文了,最近在忙两件事:1.看书,学习中...2.为公司年会节目做准备,由于许久没有练习双截棍了,难免生疏,所以现在临时抱 ...
- 使用jquery获取url及url参数的方法及定义JQuery扩展方法
1.jquery获取url很简单,代码如下: window.location.href; 其实只是用到了javascript的基础的window对象,并没有用jquery的知识. 2.jquery获取 ...
- Javascript对象、Jquery扩展简单应用
Javascript对象,表现方式一: person = new Object(); person.firstname = "An"; person.lastname = &quo ...
- Jquery扩展-手把手带你体验
Jquery扩展是在项目中经常用到的,有时候为了提取一些公共方法,有时候为了模块化管理等等,下面我们来体验一下.当然扩展离不开Jquery几个基础方法 1:$.extend() 2:$.fn.func ...
- jquery扩展 $.fn
$.fn是指jquery的命名空间,加上fn上的方法及属性,会对jquery实例每一个有效. 如扩展$.fn.abc(),即$.fn.abc()是对jquery扩展了一个abc方法,那么后面你的每一个 ...
- jQuery 扩展 【ajax实例】
先前写工具类都是自定义类,直接prototype,jQuery扩展这一块儿,一直也没写过,刚好今天有空,写个试试. 已经有很多人对jQuery,jQuery.fn,jQuery.fn.extend详细 ...
- jQuery扩展与noConflict的用法-小示例
有时我们要用到自己定义的jquery,这时可以通过jQuery扩展来实现该功能 index.html <!DOCTYPE html> <html> <head> & ...
- 区域及分离、Js压缩、css、jquery扩展
后台管理区域及分离.Js压缩.css.jquery扩展 本系列目录:ASP.NET MVC4入门到精通系列目录汇总 有好一段时间没更新博文了,最近在忙两件事:1.看书,学习中...2.为公司年会节目做 ...
随机推荐
- Mac OS 安装 Port
简介 MacPorts类似与apt-get以及yum等软件包管理工具,可以方便的进行安装与卸载软件的功能,同时可以自动安装软件包的依赖,非常方便,同类的还有brew等工具. 安装 下载MacPorts ...
- 九度OJ 1081 递推数列 -- 矩阵二分乘法
题目地址:http://ac.jobdu.com/problem.php?pid=1081 题目描述: 给定a0,a1,以及an=p*a(n-1) + q*a(n-2)中的p,q.这里n >= ...
- Makefile隐含规则和用到的默认变量
如果要使用隐含规则生成你需要的目标,你所需要做的就是不要写出这个目标的规则.那么,make会试图去自动推导产生这个目标的规则和命令,如果make可以自动推导生成这个目标的规则和命令,那么这个行为就是隐 ...
- vim 配置文件 ，高亮+自动缩进+行号+折叠+优化
vim 配置文件 ,高亮+自动缩进+行号+折叠+优化 将一下代码copy到 用户目录下 新建文件为 .vimrc保存即可生效: 如果想所有用户生效 请修改 /etc/vimrc (建议先cp一份)& ...
- 用 Python写 daemon
转自 http://chowroc.blogspot.com/2007/05/python-how-to-write-daemon.html 最近用 Python 可能要写 daemon,找资料先看看 ...
- 使用原生js与jQuery分别实现一个简单的tab页签
tab页签通常适用于空间有限而内容较多同时兼顾页面美观度不给用户一种信息过量视觉疲劳的情形.使用面非常广,下面我们用两种方法简单实现之. 首先,构建页面元素.页签的可点击部分我们通常用列表来承载,包括 ...
- html5有什么布局标签
header h1 nav ul li a section(id) div h3 article figure img article h4 header time datetime='' body ...
- hbuilder工具快捷键 http://www.qq210.com/shoutu/android
http://www.qq210.com/shoutu/android 创建HTML结构: h 8 (敲h激活代码块列表,按8选择第8个项目,即HTML代码块,或者敲h t Enter)中途换行: ' ...
- “\n”与“\r”的区别
ASCII中“\n”代表着换行,“\r”代表着将光标移动到当前显示行的最左边.
- SQL（笔试题）网站上的广告位是轮播的，每天某一广告位最多可轮播的广告数量是有限制的，比如A广告位，每天只能轮播三个广告，但销售人员在销售广告位时并不考虑此限制，要求查询出合同表中，超过广告位轮播数量的合同。
合同表 Orders OrderID Positioncode Startdate Enddate 1 A 2006-11-01 2006-11-03 2 C 2006-11-02 2006-11-0 ...