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.为公司年会节目做 ...
随机推荐
- Poj 2115 C Looooops(exgcd变式)
C Looooops Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 22704 Accepted: 6251 Descripti ...
- gitlab的安装以及汉化
gitlab的安装 首先在网上下载好任意版本gitlab的rpm包 推荐下面的地址: https://mirrors.tuna.tsinghua.edu.cn/gitlab-ce/yum/el7/gi ...
- 自己动手丰衣足食，h5手机端jquery弹窗插件（事件冒泡、单例模式、遮盖部分禁止默认滚动）
感谢浏览,欢迎交流=.= 公司开发微信网页多处需要使用弹窗,使用jquery-ui的定制化下载仍需要150多kb,想来有些奢侈(最终下来只有11kb,压缩后2kb,啊,我的神), 手机端弹窗方式与pc ...
- Javascript执行环境、作用域链
执行环境 可以把执行环境想象为一个圆圈,里面包含了一些变量.函数. 执行环境定义了变量或函数的有权访问的其他数据,决定了它们各自的行为.还有一个顶部执行环境.在浏览器中,顶部执行环境既为window, ...
- Python的面向对象2
我们接着讲解Python的面向对象 1.初始化实例属性 在现实生活中,一种类型的实例会具有相同的某些属性,把这些实例划分为一个类型,则这些实例必然有相似的部分.但是,在创建实例之后,我们一个一个的为实 ...
- python【第二十篇】Django表的多对多、Ajax
1 创建多对多表的方式有两种 1.1 方式一:自定义关系表 class Host(models.Model): nid = models.AutoField(primary_key=True) hos ...
- Djang DJANGO_SETTINGS_MODULE
在 site-packages\django 新建一个文件 ’settings.py‘ 内容如下: DEBUG = TrueDEFAULT_FROM_EMAIL = 'alangwansui@qq.c ...
- Google v8 - Hello world
OS:Window 7 1.下载v8 zip:https://github.com/v8/v8,解压zip,重命名v8-master文件夹为v8. 2.下载安装svn:http://tortoises ...
- 【转】mybatis在xml文件中处理大于号小于号的方法
http://blog.csdn.net/zheng0518/article/details/10449549 第一种方法: 用了转义字符把>和<替换掉,然后就没有问题了. SELECT ...
- IOS webview中cookie的读取与保存－b
Cookie 的读取 将它放在 webViewDidFinishLoad 开始后执行 NSArray *nCookies = [[NSHTTPCookieStorage sharedHTTPCooki ...