JS倒计时

最新推荐文章于 2024-07-14 15:54:59 发布

xw1985520

最新推荐文章于 2024-07-14 15:54:59 发布

阅读量266

点赞数

分类专栏： JAVASCRIPT 文章标签： javascript

JAVASCRIPT 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>倒计时效果</title>

<style type="text/css">
.wrap {width:400px; margin:50px auto; color:#333; font-family:'\5FAE\8F6F\96C5\9ED1';}
.wrap-date {font-size:24px; list-style:none outside none; margin-top:8px;}
.wrap-date li {width:80px; display:inline-block; *display:inline; *zoom:1; text-align:center; background:hotPink; padding:1px 0 5px; margin-right:3px;}
.date {font-family:Tahoma; font-size:50px; color:#fff;}
#endTips {color:#999; background:#e9e9e9; line-height:2.4em; text-align:center; margin-top:15px;}

.author {color:#090; font-size:12px; margin-top:50px; line-height:1.8; text-align:right;}
</style>

<script type="text/javascript">
     // 创建定时器
    var timer = window.setInterval(function(){
        RefreshTime(2018,12,23);  // 活动截止时间
    },1000);

    function RefreshTime(year,month,day){

        // 获取本地当前时间，截止时间 - 当前时间 = 倒计时时间
        var Today = new Date();     
        var endDate = new Date(year, month-1, day); 
        var leftTime = endDate.getTime() - Today.getTime();
        var leftSecond = parseInt(leftTime / 1000);
        var Day = Math.floor(leftSecond / (60*60*24));
        var Hour = Math.floor((leftSecond - Day*24*60*60) / 3600);
        var Minute=Math.floor((leftSecond - Day*24*60*60 - Hour*3600) / 60); 
        var Second=Math.floor(leftSecond - Day*24*60*60 - Hour*3600 - Minute*60);

        if(Day < "0"){ 
            clearInterval(timer); // 清除定时器
            document.getElementById("endTips").innerHTML = "活动已结束";
            document.getElementById("wrapDate").style.display = "none";
            return;
        }

        // 写入容器
        document.getElementById("timeDay").innerHTML = Day;
        document.getElementById("timeHour").innerHTML = Hour;
        document.getElementById("timeMin").innerHTML = Minute;
        document.getElementById("timeSec").innerHTML = Second;
    }
</script>

</head>

<body>

<div class="wrap">
距活动结束仅剩：
    <ul class="wrap-date" id="wrapDate">
        <li><span id="timeDay" class="date">0</span><br />天</li><!--
     --><li><span id="timeHour" class="date">0</span><br />时</li><!--
     --><li><span id="timeMin" class="date">0</span><br />分</li><!--
     --><li><span id="timeSec" class="date">0</span><br />秒</li>
    </ul>  
    <div id="endTips"></div>     


    <p class="author">—— Wing Meng 2016.12.03</p>
</div>

</body>
</html>

xw1985520

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JS倒计时

<!DOCTYPE html><html><head><meta charset="utf-8" /><title>倒计时效果</title><style type="text/css">.wrap {width:400px; margin:50px auto; color:#333; font-family:'\5FAE\8F6F\96C5\9ED1';}.wrap-date {fon
复制链接

扫一扫