jquery时间倒计时

时间：2021-12-10 22:08:56

探索的旅程不在于发现新大陆，而在于培养新视角。

Index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery时间倒计时</title>
<script type="text/javascript" src="js/jquery.js"></script>
</head>
<body>
<script type="text/javascript">
$(function(){
 countDown("2017/8/10 23:59:59","#demo01 .day","#demo01 .hour","#demo01 .minute","#demo01 .second");
 countDown("2017/8/10 22:59:59",null,"#demo02 .hour","#demo02 .minute","#demo02 .second");
 countDown("2017/8/11 15:30:59",null,null,"#demo03 .minute","#demo03 .second");

 countDown("2017/9/11 15:30:59","#demo04 .day","#demo04 .hour","#demo04 .minute","#demo04 .second");
 countDown("2017/5/1 15:30:59",null,"#demo05 .hour","#demo05 .minute","#demo05 .second");
});

function countDown(time,day_elem,hour_elem,minute_elem,second_elem){

var end_time = new Date(time).getTime(),//月份是实际月份-1

 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>

<style type="text/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;}


.colockbox1{width:141.5px;height:38px;margin:10px auto;background:url(images/colockbg2.png) no-repeat;}
.colockbox1 span{float:left;display:block;width:29px;height:24px;line-height:24px;font-size:13px;text-align:center;color:#ffffff;margin:0 8.5px 0 0;}
.colockbox1 span.second{margin:0;}

#demo02{width:208px;background-position:-75px 0;}
#demo03{width:208px;background-position:-150px 0;}
#demo04{width:208px;}
#demo05{width:208px;background-position:-37.5px 0;}

</style>

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

<div class="colockbox" id="demo03">

<span class="minute">-</span>
<span class="second">-</span>
</div>
<hr />

<div class="colockbox1" id="demo04">
<span class="day">-</span>
<span class="hour">-</span>
<span class="minute">-</span>
<span class="second">-</span>
</div>

<div class="colockbox1" id="demo05">
<span class="hour">-</span>
<span class="minute">-</span>
<span class="second">-</span>
</div>

</body>
</html>

背景图colockbg.png

jquery时间倒计时

背景图colockbg2.png

jquery时间倒计时

运行结果如图:

jquery时间倒计时
标签：

相关文章