jQuery 框架 網頁倒數計時器

網站倒數計時類似記分版翻頁的效果基於 jQuery 框架，網站在開戰前如果就開始有宣傳活動，那已經註冊的網域讓別人連不到會降低以後使用者在來訪的意願，如果只是一張 Coming Soon 的圖片又顯得太單調，所以需要用到倒數計時，讓使用者知道多久之後再回來這邊就可以看到他所期待的內容。

使用方法：
第一步 載入 jquery.countdown 所需要用到的 JavaScript 檔
<!-- 使用 Google AJAX API 取得 jQuery 框架的 1.8.2 min 版本-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- jquery.countdown 的主程式碼 -->
<script src="assets/countdown/jquery.countdown.js"></script>
<!-- IE 9 以下使用 JS 讓網頁支援部分 HTML5 的標籤-->
<!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->


第二步 使用 HTML 畫出計時器顯示的位置
<div id="countdown"></div>
<p id="note"></p>

第三步 使用 CSS 設計整體的樣式
*{
margin:0;
padding:0;
}
html{
background:url('../img/tile_bg.jpg') #b0b0b0;
position:relative;
}
body{
background:url('../img/page_bg_center.jpg') no-repeat center center;
min-height: 600px;
    padding: 200px 0 0;
font:14px/1.3 'Segoe UI',Arial, sans-serif;
}
a, a:visited {
text-decoration:none;
outline:none;
color:#54a6de;
}
a:hover{
text-decoration:underline;
}
section, footer{
display: block;
}
#note{
color: #666666;
font-size: 12px;
margin: 0 auto;
padding: 4px;
text-align: center;
text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3);
width: 400px;
}
footer{
background-color: #111111;
bottom: 0;
box-shadow: 0 -1px 2px #111111;
height: 45px;
left: 0;
position: fixed;
width: 100%;
z-index: 100000;
}
footer h2{
color: #EEEEEE;
font-size: 14px;
font-weight: normal;
left: 50%;
margin-left: -400px;
padding: 13px 0 0;
position: absolute;
width: 540px;
}
footer h2 i{
font-style:normal;
color:#888;
}
footer a.tzine,a.tzine:visited{
color: #999999;
font-size: 12px;
left: 50%;
margin: 16px 0 0 110px;
position: absolute;
text-decoration: none;
top: 0;
}
footer a i{
color:#ccc;
font-style: normal;
}
footer a i b{
color:#c92020;
font-weight: normal;
}
.countdownHolder{
width:450px;
margin:0 auto;
font: 40px/1.5 'Open Sans Condensed',sans-serif;
text-align:center;
letter-spacing:-3px;
}
.position{
display: inline-block;
height: 1.6em;
overflow: hidden;
position: relative;
width: 1.05em;
}
.digit{
position:absolute;
display:block;
width:1em;
background-color:#444;
border-radius:0.2em;
text-align:center;
color:#fff;
letter-spacing:-1px;
}
.digit.static{
box-shadow:1px 1px 1px rgba(4, 4, 4, 0.35);
background-image: linear-gradient(bottom, #3A3A3A 50%, #444444 50%);
background-image: -o-linear-gradient(bottom, #3A3A3A 50%, #444444 50%);
background-image: -moz-linear-gradient(bottom, #3A3A3A 50%, #444444 50%);
background-image: -webkit-linear-gradient(bottom, #3A3A3A 50%, #444444 50%);
background-image: -ms-linear-gradient(bottom, #3A3A3A 50%, #444444 50%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.5, #3A3A3A),
color-stop(0.5, #444444)
);
}
/**
 * You can use these classes to hide parts
 * of the countdown that you don't need.
 */
.countDays{ /* display:none !important;*/ }
.countDiv0{ /* display:none !important;*/ }
.countHours{}
.countDiv1{}
.countMinutes{}
.countDiv2{}
.countSeconds{}
.countDiv{
display:inline-block;
width:16px;
height:1.6em;
position:relative;
}
.countDiv:before,
.countDiv:after{
position:absolute;
width:5px;
height:5px;
background-color:#444;
border-radius:50%;
left:50%;
margin-left:-3px;
top:0.5em;
box-shadow:1px 1px 1px rgba(4, 4, 4, 0.5);
content:'';
}
.countDiv:after{
top:0.9em;
}

第四步 撰寫 JavaScript 讓 jQuery.Countdown 套件初始化
$(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);
}
});
});

作者網站：http://www.gbin1.com
檔案大小：70.7 KB (包含範例)
檔案下載：http://www.gbin1.com/servlet/com.gbin1.core.DownloadServlet/technology/jquerytutorial/20110105countdownjquery/demo.zip
檔案備份：下載