使用jQuery開發一個超酷的倒計時效果



使用jQuery開發一個超酷的倒計時效果

在線演示 在線下載

今天我們分享一篇來自tutorialzine的教程,本文將使用jQuery開發一個超酷的倒計時效果插件,使用這個插件你可以生成一個非常炫的倒計時器,你可以方便的整合到你需要的web功能模塊中,希望大家喜歡!

<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>

以下代碼將演示如何調用上述插件:

$(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);
}
});

});

代碼書寫完畢!


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2021 ITdaan.com