放假倒计时分析思路和源代码

最新推荐文章于 2024-01-30 19:50:45 发布

陌上红尘三千—前端

最新推荐文章于 2024-01-30 19:50:45 发布

阅读量324

点赞数

文章标签： setInterval

本文链接：https://blog.csdn.net/rong0914/article/details/82314734

版权

/*实现倒计时的思路：
1.统一把时间转成毫秒进行计算，会更加精准 
2.用将来的时间-现在的时间=剩下的时间
3.相同代码统一封装
 例如：距离放假还有180天01小时14分钟17秒*/
 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #time {
            font-size: 40px;
            color: lawngreen;
            text-align: center;
        }
    </style>
</head>
<body>
<div id="time"></div>
</body>
</html>
<script>
 // 1.自定义现在的时间
     var currentDate=new Date();
     console.log(currentDate);
 // 2.定义未来的时间
     var nextDate=new Date("2018/12/09 08:17:05");
     console.log(nextDate);
 // 3.定义过去的时间
     var preDate=new Date("2017/08/06 04:03:02");
     console.log(preDate);
  // 综上，new Date();可以定义现在、过去、将来的时间`

    window.onload = function () {
        // 1.获取需要的标签
        var time = document.getElementById('time');
        // 2.自定义将来的时间
        var nextDate = new Date("2018/12/09");
        // 3.开启定时器
        setInterval(function () {
            // 4.获取现在的时间
            var currentDate = new Date();
            // 5.获取时间戳
            var currentTime = currentDate.getTime();
            var nextTime = nextDate.getTime();
            // 6.剩下的时间戳
            var allTime = nextTime - currentTime;
            // 7.把毫秒转成秒
            var allSecond = parseInt(allTime / 1000);
            // 8.转换
            var d = size(parseInt(allSecond / 3600 / 24));
            var h = size(parseInt(allSecond / 3600 % 24));
            var m = size(parseInt(allSecond / 60 % 60));
            var s = size(parseInt(allSecond % 60));
            // 9.注入
            time.innerText = "距离放假还有" + d + "天" + h + "小时" + m + "分钟" + s + "秒";
        }, 1000)

        function size(num) {
            return num > 10 ? num : "0" + num;
        }
    }
</script>

陌上红尘三千—前端

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
放假倒计时分析思路和源代码

/*实现倒计时的思路：1.统一把时间转成毫秒进行计算，会更加精准 2.用将来的时间-现在的时间=剩下的时间3.相同代码统一封装例如：距离放假还有180天01小时14分钟17秒*/ &lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title
复制链接

扫一扫