转自：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 numbers
function 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开发一个超酷的倒计时效果