简单倒计时实现，精确到到天，时，分，秒，具体可自行设置

最新推荐文章于 2022-05-17 19:07:20 发布

Altaba

最新推荐文章于 2022-05-17 19:07:20 发布

阅读量2.2k

点赞数

分类专栏： JavaScript 文章标签： JS javascript 前端

本文链接：https://blog.csdn.net/Altaba/article/details/54584693

版权

JavaScript 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

欢迎来到Altaba 的博客

不废话，直接上代码，代码虽然简单，能给读者带来点丝毫的便利也是好的。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>倒计时实现</title>
    <style>
        .ddd{
            width: 700px;
            height: 100px;
            margin: 100px auto;
            text-align: center;
            font-size: 30px;
            color: red;
        }
    </style>
    <script>
        window.οnlοad=function(){
            var box=document.getElementById("box");
            var endDate=new Date("2017/1/24 18:30:00");设置结束时间
            /*console.info(endDate);
             console.info(date);*/
            var endtime=endDate.getTime();  getTime() 方法可返回距 1970 年 1 月 1 日之间的毫秒数。

            window.setInterval(fun,1000); 此处是个计时器，已设置每一秒执行一次fun函数

            function fun(){
                var date=new Date();
                var nowtime=date.getTime();
                var allTime=parseInt((endtime-nowtime)/1000);此差值用来计算剩余时间
                //console.info(allTime);
                var d=parseInt(allTime/3600/24);
                var h=parseInt(allTime/3600%24);
                var m=parseInt(allTime/60%60);
                var s=parseInt(allTime%60);

                d<10 ? d="0"+d : d;
                h<10 ? h="0"+h : h;
                m<10 ? m="0"+m : m;
                s<10 ? s="0"+s : s;

                box.innerHTML="现在开始倒计时:"+d+"天"+h+"时"+m+"分"+s+"秒";

            }
        }
    </script>
</head>
<body>
<h2 style="text-align: center; font-size: 35px">距离放假倒计时！</h2>
    <div id="box" class="ddd"></div>
</body>
</html>

Altaba

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
简单倒计时实现，精确到到天，时，分，秒，具体可自行设置

欢迎来到Altaba 的博客不废话，直接上代码，代码虽然简单，能给读者带来点丝毫的便利也是好的。倒计时实现 .ddd{ width: 700px; height: 100px; margin: 100px auto; text-align: ce
复制链接

扫一扫