JS 倒计时怎么做的

最新推荐文章于 2022-03-20 20:27:12 发布

web-小白白

最新推荐文章于 2022-03-20 20:27:12 发布

阅读量181

点赞数 1

分类专栏： JS

本文链接：https://blog.csdn.net/weixin_45030716/article/details/102766701

版权

JS 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

JS-倒计时

HTML代码：

<body>
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
</body>

CSS代码：

 <style>
        div {
            float: left;
            margin-left: 10px;
            width: 100px;
            height: 100px;
            background-color: gray;
            color: #fff;
            font-size: 40px;
            line-height: 100px;
            text-align: center;
        }
    </style>

JS代码：

 <script type="text/javascript">
        window.onload = function () {
            setInterval(countdown, 100);
        }
        function countdown() {
            // 获取当前时间
            var newdate = new Date();
            var year = newdate.getFullYear();
            var month = newdate.getMonth() + 1;
            var day = newdate.getDate();

            //结束时间

            var overtime = new Date(year + "-" + month + "-" + day + " " + "24:00:00");

            //时间差    为毫秒
            var timedifferent = (new Date(overtime).getTime() - newdate.getTime()) / 1000;
            // 分钟倒计时
            var mindifferent = timedifferent / 60;
            // 时钟倒计时
            var hourdifferent = mindifferent / 60;
            // 向下取整 小时数
            document.getElementById("div1").innerText = "0" + Math.floor(hourdifferent);
            // 取整数分钟，并能让60整除的数
            if ((mindifferent % 60) < 10) {
                document.getElementById("div2").innerText = "0" + parseInt(mindifferent % 60);
            } else
                document.getElementById("div2").innerText = parseInt(mindifferent % 60);
            // 取整数秒钟，并能让60整除的数
            if ((timedifferent % 60) < 10) {
                document.getElementById("div3").innerText = "0" + parseInt(timedifferent % 60);
            } else
                document.getElementById("div3").innerText = parseInt(timedifferent % 60);
        }
    </script>

web-小白白

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS 倒计时怎么做的

JS-倒计时HTML代码：<body> <div id="div1"></div> <div id="div2"></div> <div id="div3"></div></body>CSS代码： <style> div { ...
复制链接

扫一扫