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.为公司年会节目做 ...
随机推荐
- 查内网虚拟机映射的公网IP
1.访问ip138.com 2.curl ifconfig.me
- 关于网页强制被跳转到wpkg.org的解决
今天登陆MIT的网站看一篇文章,在进入到页面的时候,网页就会自动跳转到wpkg.org这个网页,查了下据说是DNS被污染了,暂时还是不是很清楚,先把问题解决了. 方法: 在C:\WINDOWS\sys ...
- Wap站总结一
前段时间负责了公司的wap站前端工作,目前wap站的基础及较为复杂的几张页面都已经出来,现根据自己的一些经验,贴出部分心得,希望对现在或者以后可能会接触到Wap站的一些人有些帮助 一.本次WAP网站的 ...
- jQuery 之 .stop() 方法
总结version 1.7版本前.stop([clearQueue][,jumpToEnd])clearQueue: 布尔值,默认是 false;此值处理是相关的动画队列是否移除,如果为 false ...
- ubuntu基本操作（２）
查看当前使用那种 shell echo $SHELL 更换 shell 类型:首先检查是否安装了相应的类型 shell开启终端,直接输入相应的 shell 名称如果没有安装,则先安装,否则直接启动此时 ...
- jquery放大镜插件与样式
这是放大镜插件链接,我已经上传到我博客http://files.cnblogs.com/valiant1882331/%E6%94%BE%E5%A4%A7%E9%95%9C%E6%8F%92%E4%B ...
- HTML标签总结
HTML 基本文档 <!DOCTYPE html> <html> <head> <title>文档标题</title> </head& ...
- 上传文件到服务器端后进一步推送到sftp服务器
扩展安装 要想sftp服务端发送文件,就需要php脚本具有作为ssh客户端的能力,所以需先为php安装如下扩展 openssl openssl-dev libssh php ssh 扩展 按照下面的命 ...
- ubuntu下的软件安装
1.软件安装 最近开始将个人电脑由windows换成linux,第一步就是会装一些个人软件,以前玩linux都是用yum或者apt-get来进行安装. 下面介绍一下如何从官网下载文件并且安装的方法. ...
- 【bzoj】1026: [SCOI2009]windy数
1026: [SCOI2009]windy数 Description windy定义了一种windy数.不含前导零且相邻两个数字之差至少为2的正整数被称为windy数. windy想知道,在A和B之间 ...