本实例效果：剩余368天22小时39分57秒结束

代码简单易懂，适用各种倒计时；

  1. <!DOCTYPE html>
  2. <head>
  3.     <title>jQuery实现倒计时效果-杨秀徐</title>
  4.     <script type="text/javascript" src="/scripts/jquery.js"></script>
  5.     <script type="text/javascript">
  6.         /*
  7.         @作者：杨秀徐，主页 http://www.gzmsg.com
  8.         @用途：jQuery实现倒计时效果$(".time").countDown({time: "2015/12/1 10:00:00",type:0})
  9.         @参数：time: 结束时间,type:显示方式（0显示天数，1不显示天数）
  10.         */
  11.         $.fn.countDown = function (opt) {
  12.             var opt = $.extend({
  13.                 time : null,
  14.                 type : 0
  15.             }, opt);
  16.  
  17.             var edtime   = new Date(opt.time).getTime(),                  //月份是实际月份-1
  18. 	            edsecond = (edtime - new Date().getTime()) / 1000;  
  19.  
  20.             var eday    = $(this).find('.day'),
  21.                 ehour   = $(this).find('.hour'),
  22.                 eminute = $(this).find('.minute'),
  23.                 esecond = $(this).find('.second');
  24.  
  25.             var timer = setInterval(function () {
  26.                 if (edsecond > 1) {
  27.                     edsecond -= 1;
  28.                     var day = Math.floor((edsecond / 3600) / 24),
  29.                     hour = Math.floor((edsecond / 3600) % 24),
  30.                     minute = Math.floor((edsecond / 60) % 60),
  31.                     second = Math.floor(edsecond % 60);
  32.                     if(opt.type===0){
  33.                         $(eday).text(day);                                  //计算天
  34.                         $(ehour).text(hour < 10 ? "0" + hour : hour);       //计算小时
  35.                     }else{
  36.                         hour = day * 24;
  37.                         $(ehour).text(hour < 10 ? "0" + hour : hour);       //计算小时-没有天数
  38.                     }
  39.                     $(eminute).text(minute < 10 ? "0" + minute : minute);   //计算分钟
  40.                     $(esecond).text(second < 10 ? "0" + second : second);   //计算秒杀
  41.                 } else {
  42.                     clearInterval(timer);
  43.                 }
  44.             }, 1000);
  45.         }
  46.         $(function () {
  47.             $(".time").countDown({
  48.                 time: "2015/12/1 10:00:00",
  49.                 type:0
  50.             });
  51.         });
  52.     </script>
  53. </head>
  54. <body>
  55.     <div class="time">剩余<span class="day">0</span>天<span class="hour">00</span>小时<span class="minute">00</span>分<span class="second">00</span>秒结束</div>
  56. </body>
  57. </html>

jQuery实现倒计时效果-杨秀徐的更多相关文章

  1. jquery网页倒计时效果，秒杀，限时抢购！

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

  2. JQuery实现倒计时效果

    首先:引入jquery文件 <script type="text/javascript" src="http://www.cnblogs.com/Content/P ...

  3. jquery网页倒计时效果，秒杀

    function FreshTime(){ var endtime=new Date('2019-4-12 18:00:00');//结束时间 var nowtime = new Date();//当 ...

  4. Javascript 实现倒计时效果

    代码来自于网上. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ww ...

  5. jQuery Countdown Timer 倒计时效果

    这个一款简单的 jQuery 倒计时插件,用于显示剩余的天数,小时,分钟和秒.倒计时功能是非常有用的一个小功能,可以告诉用户多久以后您的网站将会发布或者关闭进行维护,还可以用于举办活动的开始和停止的倒 ...

  6. jQuery CircleCounter的环形倒计时效果

    在线演示1 本地下载 使用jQuery插件CircleCounter生成的环形倒计时效果,这个插件使用HTML5画布生成动画效果,还不错,大家可以试试! 顺带手录制了个代码,大家不吝赐教:http:/ ...

  7. jQuery实现的手机发送验证码倒计时效果代码分享

    这是一款基于jquery实现的手机发送验证码倒计时效果代码,可实现实时显示秒数倒计时的功能,还可实现对手机号码格式验证的功能,是一款常用的网站注册发送手机验证码特效代码. 效果描述:注册一个网站,当需 ...

  8. 【转载】jquery版的网页倒计时效果

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

  9. jquery版的网页倒计时效果

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

随机推荐

  1. In House打包流程

    在一个app历经数周持续开发和多个版本快速内部迭代之后,当我们需要把这个版本发布到我们实际应用场景中,面对我们真实用户去say hi时,如果自身产品在发布(内测版本)之前确实找到一些潜在切相对稳定的种 ...

  2. read(10, &quot;NTP0 13690\n&quot;, 64) 数据库登录缓慢

    初步怀疑:下面两个參数引起: SQL> conn / as sysdba Connected. SQL> show parameter lock NAME ---------------- ...

  3. MQ：Introducing Advanced Messaging

    原文地址:http://www.yourenterprisearchitect.com/2011/11/introducing-advanced-messaging.html. Introducing ...

  4. hex string 换转

    hex2string std::stringstream R; R << std::hex << 0x1254; DWORD Str2Hex(string str){ retu ...

  5. c#录音和放音，超简单！不用DirectX

    最近在做android与C#录音并互相通信的小东西.但是卡在C#录音这儿了.找了好久,说的都是DirectX,可是我总是安装不上,这才找到了这个简单的录音方法.当然,如果你想要录得好并且处理音频,那还 ...

  6. 让Orchard支持多个Layout

    默认Orchard只有一个Layout,有的时候,我们的站点往往需要多个母版页.那么,如果要让Orchard支持多个Layout,以下是一种解决方案. 一:创建LayoutFilter using S ...

  7. linux rename命令批量修改文件名

    修改文件名可以用mv命令来实现 mv filename1 filename2 1 但如果批量修改还是使用rename命令更为方便 现在我们有a b c d 四个文件 增加后缀 rename 's/$/ ...

  8. Netty 中 IOException: Connection reset by peer 与 java.nio.channels.ClosedChannelException: null

    最近发现系统中出现了很多 IOException: Connection reset by peer 与 ClosedChannelException: null 深入看了看代码, 做了些测试, 发现 ...

  9. nodejs中thiskeyword的问题

    再分析详细内容之前,必需要好好阅读下面下面两篇blog 学习Javascript闭包(closure) Javascript的this使用方法 这两篇文章是阮一峰老师对Javascript的闭包和th ...

  10. arcgis server 10 for java 8399根目录是404的提示取消，并跳转到 地图目录 /arcgis/rest/services下

    看了Howto: 取消ArcGIS Server 9.x for Java内置tomcat在8399端口的文件列表 http://support.esrichina-bj.cn/2009/0819/9 ...