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

欢迎来到我的博客

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

<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() 方法可返回距 197011 日之间的毫秒数。
 
            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>

在这里插入图片描述

发布了103 篇原创文章 · 获赞 19 · 访问量 1万+

猜你喜欢

转载自blog.csdn.net/M106588L/article/details/102495829
今日推荐