案例截图

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS时间倒计时</title>
</head> <body> <div id="dome1">
<span class="day"></span>天|<span class="hour"></span>时|<span class="min"></span>分|<span class="sec"></span>秒
</div> <div id="dome2">
<span class="day"></span>天|<span class="hour"></span>时|<span class="min"></span>分|<span class="sec"></span>秒
</div>
<div id="dome3">
<span class="day"></span>天|<span class="hour"></span>时|<span class="min"></span>分|<span class="sec"></span>秒
</div>
<div id="dome4">
<span class="day"></span>天|<span class="hour"></span>时|<span class="min"></span>分|<span class="sec"></span>秒
</div>
<div id="dome5">
<span class="day"></span>天|<span class="hour"></span>时|<span class="min"></span>分|<span class="sec"></span>秒
</div> <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.1.min.js"></script> <script>
;(function($){
/*
@CountDown团购倒计时插件
@auther LiuMing
@StartDate 开始时间*(必填)
@EndDate 结束时间*(必填)
@callback (可选)
*/
$.fn.CountDown = function(StartDate, EndDate, callback) {
var $this = $(this);
/*配置参数*/
this.opt = {
Timmer : null,/*定时器缓存*/
oDay : $this.find('.day'),
oHour : $this.find('.hour'),
oMin : $this.find('.min'),
oSec : $this.find('.sec'),
startTime : StartDate.getTime(),/*开始时间*/
endTime : EndDate.getTime(),/*结束*/
callback : callback
} if(this.opt.startTime > this.opt.endTime){throw new Error("#"+$(this).attr('id')+' StartDate > EndDate');}
this.CountDown_playTime();
} /*定时器*/
$.fn.CountDown_playTime = function(){
var that = this,
opt = that.opt,
date; if(opt.Timmer){clearTimeout(opt.Timmer);} opt.endTime-=1000; /*倒计时结束*/
if(opt.startTime >= opt.endTime){
if(typeof opt.callback === 'function'){opt.callback();}
return false;
} /*计算时差*/
date = $.fn.CountDown.getTime(opt.startTime, opt.endTime); opt.oDay.text(date.day);
opt.oHour.text(date.hour);
opt.oMin.text(date.min);
opt.oSec.text(date.sec); /*loop*/
opt.Timmer = setTimeout(function(){that.CountDown_playTime();}, 1000);
} /*获取时间*/
$.fn.CountDown.getTime = function(startTime, endTime){
var _tempTime,day,hour,min,sec; //计算时差
_tempTime = endTime - startTime;
day = Math.floor(_tempTime/86400000); //1000*60*60*24 = 1/天 _tempTime -= day*86400000;
hour = Math.floor(_tempTime/3600000); //1000*60*60 = 1/小时 _tempTime -= hour*3600000;
min = Math.floor(_tempTime/60000); // 1000*60 = 1/分钟 _tempTime -= min*60000;
sec = Math.floor(_tempTime/1000); // 1秒 /*返回结果*/
return {'day':day, 'hour':hour, 'min':min, 'sec':sec}
} })(jQuery); $('#dome1').CountDown(new Date("2014/6/9 11:11:1"), new Date("2014/6/9 11:12:10"));
$('#dome2').CountDown(new Date("2014/6/9 11:11:1"), new Date("2014/6/10 11:11:10"));
$('#dome3').CountDown(new Date("2014/6/9 11:11:1"), new Date("2014/6/12 11:11:10"));
$('#dome4').CountDown(new Date("2014/6/9 11:11:1"), new Date("2014/6/14 11:11:10"));
$('#dome5').CountDown(new Date("2014/6/9 11:11:1"), new Date("2014/6/13 11:11:10"));
</script>
</body>
</html>

  

【JQuery插件】团购倒计时的更多相关文章

  1. jquery组件团购倒计时功能

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  2. jquery组件团购倒计时功能(转)

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  3. js团购倒计时函数代码

    <h1>团购啦!</h1><p>还剩<span id="times"></span></p> <SCR ...

  4. js团购倒计时

    客户端代码可以看: http://www.zhangxinxu.com/wordpress/2010/07/%E5%9B%A2%E8%B4%AD%E7%B1%BB%E7%BD%91%E7%AB%99% ...

  5. js实现倒计时 类似团购网站

    一.demo与效果展示 为节约时间,我就直接套用了企鹅团的界面作为demo的背景.因为是倒计时,所以需要一个固定的时间,为了n年后,某位仁兄打开demo页面依然在倒计时,所以我把倒计时时间设成了205 ...

  6. 团购类网站倒计时的js实现

    一.如火如荼的团购网站 根据易观国际提供的统计数据,截至2010年6月,中国市场团购网站数量已经突破400家.国内团购潮从今年2月份开始出现,在4~6月出现高峰,尤其是今年5月,一些大的网站如爱帮网. ...

  7. jquery倒计时(仿团购)转至 http://justcoding.iteye.com/blog/2210962

    倒计时一般是用来表示未来某一时刻距现在时刻还剩多少时间.倒计时在WEB上应用非常广泛,如考试系统倒计时,团购网站中的优惠活动倒计时等等.今天,我们来使用jQuery实现一个简单的倒计时功能.

  8. 团购、定时抢购倒计时js版

     <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org ...

  9. 活动倒计时代码(精确到毫秒)jquery插件

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

随机推荐

  1. 马尔科夫链蒙特卡洛(MCMC) -- 学习笔记

    https://blog.csdn.net/m0_38088359/article/details/83480258 https://blog.csdn.net/shenxiaolu1984/arti ...

  2. 自主设计BootLoader框架笔记一栏

  3. Deepin-TIM或Deepin-QQ调整界面DPI字体大小的方法

    Deepin-TIM或Deepin-QQ调整界面DPI字体大小的方法 env WINEPREFIX="/home/landv/.deepinwine/Deepin-QQ" deep ...

  4. 常用spaceclaim脚本(三)

    拉伸曲线 ptList=List[Point]() #定义一个点的列表 ptList.Add(Point.Create(MM(11),MM(-14),MM(0))) #创建点,并放入列表当中 ptLi ...

  5. Vue 一个组件引用另一个组件

    有些时候需要这么做,比如,我想在首页加载轮播组件,但是又不想全局注册(因为不是每个页面都需要轮播功能) 方法1: <template> <div> <!-- 3.在tem ...

  6. 设计模式-Iterator

    本文参(chao)考(xi)<图解设计模式> 结城浩 (作者) 杨文轩 (译者) 1.Iterator 模式 迭代器作用于集合,是用来遍历集合元素的对象. 迭代器模式提供一种方法顺序访问一 ...

  7. Java设计模式之一单例模式

    什么是单例模式 保证一个系统中的某个类只有一个实例而且该实例易于外界访问.例如Windows界面的任务管理器就可以看做是一个单例. 单例模式的使用场景 需要频繁的进行创建和销毁的对象: 创建对象时耗时 ...

  8. 模型稳定性指标—PSI

    由于模型是以特定时期的样本所开发的,此模型是否适用于开发样本之外的族群,必须经过稳定性测试才能得知.稳定度指标(population stability index ,PSI)可衡量测试样本及模型开发 ...

  9. super与this的用法

    1 super和this都是调用其他的构造方法 super放在构造方法的第一条语句,调用父类的某种构造方法,如果没有super语句,会默认调用父类中无参的构造方法,如果父类构造方法指明而且都有参数,子 ...

  10. Kettle建立数据库链接报错-'MS SQL Server' driver (jar file) is installed. kettle的bug,对于12.2而言

    1.链接sql server数据库报错 错误连接数据库 [My_vm_win_sql] : org.pentaho.di.core.exception.KettleDatabaseException: ...