码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2019-08-13 15:54:50      阅读:76      评论:0      收藏:0      [点我收藏+]

标签:ice   auto   中秋   doctype   init   中秋节   date   http   dev   

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

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

<!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>

 

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

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

标签:ice   auto   中秋   doctype   init   中秋节   date   http   dev   

原文地址:https://www.cnblogs.com/sandraryan/p/11345895.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!