首先引入Jquery文件
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"type="text/javascript"></script>
JS部分代码
<script type="text/javascript"> $(function(){ countDown("2014/8/10 23:59:59","#demo01 .day","#demo01 .hour","#demo01 .minute","#demo01 .second"); countDown("2014/8/10 22:59:59",null,"#demo02 .hour","#demo02 .minute","#demo02 .second"); }); function countDown(time,day_elem,hour_elem,minute_elem,second_elem){ //if(typeof end_time == "string") var end_time = new Date(time).getTime(),//月份是实际月份-1 //current_time = new Date().getTime(), sys_second = (end_time-new Date().getTime())/1000; var timer = setInterval(function(){ if (sys_second > 0) { sys_second -= 1; var day = Math.floor((sys_second / 3600) / 24); var hour = Math.floor((sys_second / 3600) % 24); var minute = Math.floor((sys_second / 60) % 60); var second = Math.floor(sys_second % 60); day_elem && $(day_elem).text(day);//计算天 $(hour_elem).text(hour<10?"0"+hour:hour);//计算小时 $(minute_elem).text(minute<10?"0"+minute:minute);//计算分 $(second_elem).text(second<10?"0"+second:second);// 计算秒 } else { clearInterval(timer); } }, 1000); } </script>
CSS
*{margin:0;padding:0;list-style-type:none;} a,img{border:0;} body{font:12px/180% Arial, Helvetica, sans-serif,"宋体";} /* colockbox */ .colockbox{width:283px;height:76px;margin:20px auto;background:url(images/colockbg.png) no-repeat;} .colockbox span{float:left;display:block;width:58px;height:48px;line-height:48px;font-size:26px;text-align:center;color:#ffffff;margin:0 17px 0 0;} .colockbox span.second{margin:0;} #demo02{width:208px;background-position:-75px 0;}
HTML部分代码
<div class="colockbox" id="demo01"><span class="day">-</span> <span class="hour">-</span> <span class="minute">-</span> <span class="second">-</span></div> <div class="colockbox" id="demo02"><span class="hour">-</span> <span class="minute">-</span> <span class="second">-</span></div>
可以根据实际情况调整倒计时图片的大小