用定时器和时间戳计算距离中秋节的时间并动态刷新

虽然这个代码很快就“过期”了。不过思路还是可以保留的~~

获取当前和期待的时间的时间戳，求差值，用定时器使时间的变化随时刷新展示。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #show {
            width: 1000px;
            height: 300px;
            margin: 50px auto;
            font-size: 40px;
            background-color: rgb(146, 170, 236);
            text-align: center;
            color: aliceblue;
        }
    </style>
</head>

<body>
    <div id="show"></div>
<script>

        setInterval(function(){
            var now = new Date();
            var nowMS = now.getTime();
            // 获取现在时间并转换为时间戳
            var midAutumn = new Date("2019-9-13");
            var midAutumnMS = midAutumn.getTime();
            // 获取中秋时间，并转换为时间戳
            var time = midAutumnMS - nowMS;
            var finalTime = new Date(time);
            // 算出来中间值转为毫秒数
            var month = finalTime.getMonth();
            var day = finalTime.getDate();
            var hour = finalTime.getHours();
            var minutes = finalTime.getMinutes();
            var second = finalTime.getSeconds();
            // 获取月日时分秒等
            var show = document.getElementById("show");
            // 获取div
            show.innerHTML = "距离中秋还有" + month + "月" + day + "日" + "<br>" + hour + "时" + minutes + "分" +
                    second + "秒";
            // div内容变成所余时间
        },1000);

</script>
</body>

</html>

同理，也可以写出来类似的倒计时~~

用定时器和时间戳计算距离中秋节的时间并动态刷新

猜你喜欢