网页倒计时 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="application/javascript">
        window.onload = function () {
            var showtime = document.getElementById('showtime');
           //实现倒计时逻辑
            function daojishi() {
                var nowtime = new Date();
                var futuretime = new Date(2020,3,30,24,0,0);
                //计算两个时间有多少时间，获得的是毫秒需要转换成秒
                var betweentime = parseInt((futuretime-nowtime)/1000);
                //计算还有多少天
                var bday = parseInt(betweentime/86400);
                //计算还有多少个小时
                var bhour = parseInt((betweentime%86400)/60/60);
                //计算还有多少分钟
                var bmin = parseInt((betweentime%86400%3600/60));
                //计算还有多少秒；
                var bsec = (betweentime%86400%3600%60);

                var str = '现在距离2020年5月1日还有:'+bday+'小时'+bhour+"天"+bmin+"分钟"
                +bsec+'秒';
                showtime.innerHTML = str;
           }
           daojishi();
            var timer = setInterval(daojishi,1000);
        }
    </script>
    <style>
        .showtime {
            font-size: 40px;
            color: red;
            text-align: center;
            margin-top: 300px;
        }

    </style>

</head>
<body>
    <div id="showtime" class="showtime"></div>
</body>
</html>

 

posted @ 2020-03-11 16:56  卢掌柜的  阅读(238)  评论(0)    收藏  举报