转自：http://www.gbtags.com/technology/jquerytutorial/20110105countdownjquery/

使用jQuery开发一个超酷的倒计时效果

日期：2011/01/05 来源：GBin1.com

在线演示在线下载

今天我们分享一篇来自tutorialzine的教程，本文将使用jQuery开发一个超酷的倒计时效果插件，使用这个插件你可以生成一个非常炫的倒计时器，你可以方便的整合到你需要的web功能模块中，希望大家喜欢！

HTML代码

我们将使用如下代码生成一个倒计时器的界面：

<div id="countdown" class="countdownHolder"> <span class="countDays">     <span class="position">          <span class="digit static"></span>     </span>     <span class="position">          <span class="digit static"></span>     </span> </span>

   <span class="countDiv countDiv0"></span>

 <span class="countHours">        <span class="position">          <span class="digit static"></span>     </span>     <span class="position">          <span class="digit static"></span>     </span> </span>

   <span class="countDiv countDiv1"></span>

 <span class="countMinutes">      <span class="position">          <span class="digit static"></span>     </span>     <span class="position">          <span class="digit static"></span>     </span> </span>

   <span class="countDiv countDiv2"></span>

 <span class="countSeconds">      <span class="position">          <span class="digit static"></span>     </span>     <span class="position">          <span class="digit static"></span>     </span> </span>

   <span class="countDiv countDiv3"></span></div>

在以上代码中，你不需要设置任何东西，只需要指定你需要生成倒计时器的元素。

jQuery插件代码

这里我们开发了俩个插件的辅助方法，如下：

init：用来生成你看到的标签

switchDigit：将.position span中的数字动画起来

代码如下：

function init(elem, options){    elem.addClass('countdownHolder');

 // Creating the markup inside the container   $.each(['Days','Hours','Minutes','Seconds'],function(i){      $('<span class="count'+this+'">').html(            '<span class="position">\               <span class="digit static">0</span>\           </span>\            <span class="position">\             <span class="digit static">0</span>\           </span>'       ).appendTo(elem);

       if(this!="Seconds"){           elem.append('<span class="countDiv countDiv'+i+'"></span>');     } });

}

// Creates an animated transition between the two numbersfunction switchDigit(position,number){

   var digit = position.find('.digit')

  if(digit.is(':animated')){      return false; }

   if(position.data('digit') == number){     // We are already showing this number     return false; }

   position.data('digit', number);

   var replacement = $('<div>',{        'class':'digit',      css:{         top:'-2.1em',           opacity:0     },        html:number   });

 // The .static class is added when the animation  // completes. This makes it run smoother.

   digit     .before(replacement)      .removeClass('static')      .animate({top:'2.5em',opacity:0},'fast',function(){           digit.remove();       })

  replacement       .delay(100)       .animate({top:0,opacity:1},'fast',function(){           replacement.addClass('static');     });}

接下来我们开发插件主体：

(function($){

  // Number of seconds in every time division   var days    = 24*60*60,      hours   = 60*60,     minutes = 60;

  // Creating the plugin    $.fn.countdown = function(prop){

       var options = $.extend({         callback    : function(){},           timestamp   : 0       },prop);

        var left, d, h, m, s, positions;

        // Initialize the plugin      init(this, options);

        positions = this.find('.position');

      (function tick(){

           // Time left          left = Math.floor((options.timestamp - (new Date())) / 1000);

          if(left < 0){              left = 0;            }

           // Number of days left            d = Math.floor(left / days);         updateDuo(0, 1, d);           left -= d*days;

            // Number of hours left           h = Math.floor(left / hours);            updateDuo(2, 3, h);           left -= h*hours;

           // Number of minutes left         m = Math.floor(left / minutes);          updateDuo(4, 5, m);           left -= m*minutes;

         // Number of seconds left         s = left;            updateDuo(6, 7, s);

         // Calling an optional user supplied callback         options.callback(d, h, m, s);

           // Scheduling another call of this function in 1s         setTimeout(tick, 1000);       })();

       // This function updates two digit positions at once      function updateDuo(minor,major,value){            switchDigit(positions.eq(minor),Math.floor(value/10)%10);         switchDigit(positions.eq(major),value%10);        }

       return this;  };

  /* The two helper functions go here */})(jQuery);

以下代码将演示如何调用上述插件：

$(function(){

  var note = $('#note'),     ts = new Date(2012, 0, 1),       newYear = true;

    if((new Date()) > ts){     // The new year is here! Count towards something else.        // Notice the *1000 at the end - time must be in milliseconds     ts = (new Date()).getTime() + 10*24*60*60*1000;     newYear = false; }

   $('#countdown').countdown({     timestamp   : ts,     callback    : function(days, hours, minutes, seconds){

          var message = "";

            message += days + " day" + ( days==1 ? '':'s' ) + ", ";            message += hours + " hour" + ( hours==1 ? '':'s' ) + ", ";         message += minutes + " minute" + ( minutes==1 ? '':'s' ) + " and ";            message += seconds + " second" + ( seconds==1 ? '':'s' ) + " <br />";

          if(newYear){              message += "left until the new year!";            }         else {                message += "left to 10 days from now!";           }

           note.html(message);       } });

});

代码书写完毕！

via tutorialzine

来源：使用jQuery开发一个超酷的倒计时效果

使用jQuery开发一个超酷的倒计时效果相关推荐

使用HTML5和jQuery插件Quicksand实现一个超酷的星际争霸2兵种分类展示效果
为什么80%的码农都做不了架构师?>>> 日期:2011/11/01 来源:GBin1.com 因为本人是星际争霸系列游戏的忠实拥簇,所以在今天的jQuery教程中,我们将使用 ...
jQuery插件：超酷的多列网格式拖放插件gridster.js
为什么80%的码农都做不了架构师?>>> 日期:2012-8-15 来源:GBin1.com 在线演示本地下载以往的文章中,我们分享了很多jQuery相关拖放插件,今天 ...
使用HTML5技术开发的超酷颜色选择器
日期:2012-10-23 来源:GBin1.com 在线演示本地下载可能大家见过很多使用jquery/js开发的颜色选择器,今天这里我们将使用HTML5技术来自己实现一个更棒的颜色选择器.希 ...
一个超酷的横向多列响应式布局效果
日期:2013-1-26 来源:GBin1.com 在线演示还记得上周介绍的一个超酷的星际争霸2视差滚动效果吧,如果你希望生成一个类似ipad效果的漂亮横向多列响应式滚动效果的话,那么你可以考虑使 ...
使用jQuery开发一个基于HTML5的漂亮图片拖拽上传web应用
昨天我们介绍了一款HTML5文件上传的jQuery插件:jQuery HTML5 uploader,今天我们将开发一个简单的叫upload center的图片上传程序,允许用户使用拖拽方式来上传电脑上 ...
jQuery框架开发一个最简单的幻灯效果
在线演示在这个课程中,我们将介绍如何使用jQuery来开发一个最简单的图片幻灯效果. 立刻观看互动课程:jQuery框架开发一个最简单的幻灯效果阅读原文:jQuery框架开发一个最简单的幻灯效果
python（pygame）开发一个超简易版消灭病毒
python(pygame)开发一个超简易版消灭病毒消灭病毒游戏以下是游戏代码:每个类都是一个py文件,需要导包 1.主程序代码 2.飞机类 3.子弹类 4.病毒类消灭病毒游戏消灭病毒是一个打 ...
用人工智能取一个超酷的名字（一）
用人工智能取一个超酷的名字(一) 在我年轻的时候,我总是讨厌别人叫我春阳.这主要是因为我觉得这个名字有点土,听起来不够有格调.但是没有办法,按照我们中国人的传统,我这辈按照族谱中的规定,第二个字是春, ...
css3新动_10款重量级CSS3的全新特效实现超酷前端动画效果
大家都知道,在网页制作时使用CSS技术,可以有效地对页面的布局.字体.颜色.背景和其它效果实现更加精确的控制.只要对相应的代码做一些简单的修改,就可以改变同一页面的不同部分,或者页数不同的网页的外观和 ...

使用jQuery开发一个超酷的倒计时效果

使用jQuery开发一个超酷的倒计时效果

HTML代码

jQuery插件代码

使用jQuery开发一个超酷的倒计时效果相关推荐

最新文章

热门文章