所属分类:网页特效-时间日期
/* 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;}
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
$(function(){
countDown("2020/8/10 23:59:59","#demo01 .day","#demo01 .hour","#demo01 .minute","#demo01 .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);
}
<div class="colockbox" id="demo01">
<span class="day">-</span>
<span class="hour">-</span>
<span class="minute">-</span>
<span class="second">-</span>
</div>