jquery时间倒计时

最新推荐文章于 2024-04-11 15:41:01 发布

.NET跨平台

最新推荐文章于 2024-04-11 15:41:01 发布

阅读量708

点赞数

分类专栏： Jquery及其组件文章标签： jquery 倒计时

本文链接：https://blog.csdn.net/WuLex/article/details/53836875

版权

Jquery及其组件专栏收录该内容

147 篇文章 3 订阅

订阅专栏

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

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>