JS实现倒计时动画效果

最新推荐文章于 2021-06-09 22:24:09 发布

nanotry

最新推荐文章于 2021-06-09 22:24:09 发布

阅读量2.2k

点赞数

分类专栏：前端开发文章标签： javascript

本文链接：https://blog.csdn.net/Qimingweikun/article/details/78360208

版权

前端开发专栏收录该内容

22 篇文章 0 订阅

订阅专栏

js通过Date对象实现倒计时效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>倒计时动画</title>
    <style>
        div{
            text-align:center;
            height:100px;
            line-height:100px;
        }
    </style>
    <script>
        window.onload = function(){
           setInterval(FreeTime,1000);
        }
        function FreeTime(){
            var curTime = Date.now();
            var endTime = new Date("2017-10-26 16:00:00");
            var allFreeSeconds = (endTime-curTime)/1000;
            if(allFreeSeconds>0){
                var freeDay = Math.floor(allFreeSeconds/(24*60*60));
                var freeHour = Math.floor(allFreeSeconds/(60*60) % 24);
                var freeMinute = Math.floor(allFreeSeconds/60 % 60);
                var freeSecond = Math.floor(allFreeSeconds%60);
                document.getElementById("nowTime").innerHTML = "剩余"+freeDay+"天"+freeHour+"时"+freeMinute+"分"+freeSecond+"秒";
            }
            else{
                document.getElementById("nowTime").innerHTML = "已结束";
            }
        }
    </script>
</head>
<body>
<div>
    <span id="nowTime"></span>
</div>
</body>
</html>