案例截图

<!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. TPS与QPS，以及GMV

    TPS是指每秒处理事务的个数,处理的载体可以是单台服务器,也可以是一个服务器集群. 例如:下单接口,一秒内,下单完成次数为1000,则下单接口总 tps = 1000,共有10台服务器提供下单服务,单 ...

  2. Bzoj 2818: Gcd(莫比乌斯反演)

    2818: Gcd Time Limit: 10 Sec Memory Limit: 256 MB Description 给定整数N,求1<=x,y<=N且Gcd(x,y)为素数的 数对 ...

  3. Redash(开源轻量级商业智能) 生产环境部署及实践 (without docker)

    一直在调研一个轻量级开源的 BI 系统.之前我们生产环境使用的 aliyun 的 QuickBi,也调研了另外一个 airflow 的开源商业智能 superset.不得不承认 QuickBI 正在日 ...

  4. 转载：Spark GraphX详解

    1.GraphX介绍 1.1 GraphX应用背景 Spark GraphX是一个分布式图处理框架,它是基于Spark平台提供对图计算和图挖掘简洁易用的而丰富的接口,极大的方便了对分布式图处理的需求. ...

  5. 内核中PID_HANDLE_OBJECT等互相转换

    目录 一丶简介 1.进程pid 转化为 HANDLE 2.Handle --------> 转化为 PID 3.Pid ------> Object(EPROCESS) 4. HANDLE ...

  6. 谈谈对Spring的理解

    转载自:  https://blog.csdn.net/qq_41701956/article/details/90453716 Spring 框架是 Java 应用最广的框架,它的成功来源于理念,而 ...

  7. abp zero bug

    web host 项目中ChatController GetUploadedObject 使用:using (CurrentUnitOfWork.SetTenantId(null)) 图片刷新出错,改 ...

  8. RabbitMQ入门学习系列(二)，单生产者消费者

    友情提示 我对我的文章负责,发现好多网上的文章 没有实践,都发出来的,让人走很多弯路,如果你在我的文章中遇到无法实现,或者无法走通的问题.可以直接在公众号<爱码农爱生活 >留言.必定会再次 ...

  9. EasyTrader踩坑之旅(三)

    快速阅读 ​ 用THSTrader 调试同花顺自动下单的过程 . 主要原理是利用python函数pywinauto 自动获取同花顺上相应控件的值,进行模拟自动化的操作,不得不说python函数库的强大 ...

  10. 2018-2019-2 网络对抗技术 20165212 Exp7 网络欺诈防范

    2018-2019-2 网络对抗技术 20165212 Exp7 网络欺诈防范 原理与实践说明 1.实践目标 理解常用网络欺诈背后的原理,以提高防范意识,并提出具体防范方法. 2.实践内容概述 简单应 ...