基于jQuery倒数计时器特效js代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是基于jQuery倒数计时器特效js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Www.Chinaz.Com</title>
        
        <!-- Our CSS stylesheet file -->
        <!--<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300" />-->
        <link rel="stylesheet" href="assets/css/styles.css" />
        <link rel="stylesheet" href="assets/countdown/jquery.countdown.css" />
        
        <!--[if lt IE 9]>
          <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
    </head>
    
    <body>

		<div id="countdown"></div>

		<p id="note"></p>

        <footer>
	        <h2><i>Tutorial:</i>WWW.CHINAZ.COM</h2>
            <a class="tzine" href="#">Head on to <b>SC.CHINAZ.COM</b></i></a>
        </footer>
        
        <!-- JavaScript includes -->
		<script src="jquery-1.7.2.min.js"></script>
		<script src="assets/countdown/jquery.countdown.js"></script>
		<script src="assets/js/script.js"></script>
    </body>
</html>

JS代码(script.js):

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

CSS代码(styles.css):

/*-------------------------Simple reset--------------------------*/
*{margin:0;padding:0;}
/*-------------------------General Styles--------------------------*/
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;}
/*----------------------------Main Section-----------------------------*/
#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;}
/*----------------------------The Footer-----------------------------*/
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;}

附件:下载该文件资源,减少时间成本(增值服务)