js版的倒计时（月-日-时-分-秒-毫秒）

最新推荐文章于 2024-05-22 01:53:01 发布

莓莓儿～

最新推荐文章于 2024-05-22 01:53:01 发布

阅读量1.2w

点赞数 2

分类专栏： JS

本文链接：https://blog.csdn.net/fanfan_h/article/details/90664179

版权

JS 专栏收录该内容

49 篇文章 9 订阅

订阅专栏

大早上好瞌睡，爬起来接着写。

今天做的倒计时用了三种方法
过程和思路：

设置未来的时间。（使用在new Date()后面直接设置时间的方法）
获取当前的时间（ newDate() ）
用未来时间减去现在的时间，算出总的毫秒数
算出倒计时的月、日、时、分、秒、毫秒（1s =1000ms 1分=60s 1时 =60分 1天 =24时 1月=30天 1年=12）
每个时间内容出现在设置的块中。
间歇1ms变化时间（多种方法实现倒计时 setTimeout setInterval）

法一：setTimeout (countdown ,1);

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>倒计时</title>
    <script>
        window.onload=function(){
            var go_time=new Date("2019/7/17 00:00:00");
            //  countdown：倒计时
                 function  countdown(){
                var now_time=new Date();
                var alltime =go_time.getTime() -now_time.getTime ();  //总的时间（毫秒）
               var haoscend =alltime%1000;  //毫秒
                //console.log(haoscend);
                var scend = parseInt ((alltime/1000)%60  ) ;  //秒
                //console.log(scend);
                var minute =parseInt((alltime/1000/60)%60  ) ;  //  分钟
               // console.log(minute);
                var hour =parseInt((alltime/1000/60/60)%24 ) ;   //小时
               // console.log(hour);
                var day=parseInt((alltime/1000/60/60/24)%30);   //天数
               // console.log(day);
                var month=parseInt((alltime/1000/60/60/24/30)%12); //月
               // console.log(month);
                var btime=document.getElementById("block");
                var time1=document.getElementById("shi_jian");
                time1.innerHTML ="717倒计时："+month+"月"+day+"天"+hour+"时"+minute +"分"+scend +"秒"+(haoscend<10 ?"00"+haoscend :haoscend <100?"0"+haoscend :haoscend );
                setTimeout (countdown ,1);  //不加括号
            }
           countdown ();
        }

    </script>
    <style>
        *{
            margin:0;
            padding: 0;
        }
        #block {
            position:relative;
            width:420px;
            height:420px;
            background: #fbbff8;
            border-radius: 50%;
            margin:100px auto;
        }
        #shi_jian {
            position:absolute;
            width:320px;
            height:100px;
            top:150px;
            left:50px;
          /* background: paleturquoise;*/
            text-align: center;
            line-height: 100px;
            font-size: 18px;
        }
    </style>
</head>
<body>
<div id="block">
    <div id="shi_jian"></div>
</div>
</body>
</html>

法二： setInterval (function(){ }，1）

setInterval (function(){
                var now_time=new Date();
                var alltime =go_time.getTime() -now_time.getTime ();  //总的时间（毫秒）
                //console.log(alltime);   1s =1000ms  1分=60s   1时 =60分  1天 =24时   1月=30天  1年=12月
                var haoscend =alltime%1000;  //毫秒
                //console.log(haoscend);
                var scend = parseInt ((alltime/1000)%60  ) ;  //秒
                //console.log(scend);
                var minute =parseInt((alltime/1000/60)%60  ) ;  //  分钟
                // console.log(minute);
                var hour =parseInt((alltime/1000/60/60)%24 ) ;   //小时
                // console.log(hour);
                var day=parseInt((alltime/1000/60/60/24)%30);   //天数
                // console.log(day);
                var month=parseInt((alltime/1000/60/60/24/30)%12); //月
                // console.log(month);
                var btime=document.getElementById("block");
                var time1=document.getElementById("shi_jian");
                time1.innerHTML ="717倒计时："+month+"月"+day+"天"+hour+"时"+minute +"分"+scend +"秒"+(haoscend<10 ?"00"+haoscend :haoscend <100?"0"+haoscend :haoscend );
            },1)

法三： window.requestAnimationFrame(countdown );

countdown ();
              function  countdown(){
             var now_time=new Date();
             var alltime =go_time.getTime() -now_time.getTime ();  //总的时间（毫秒）
             //console.log(alltime);   1s =1000ms  1分=60s   1时 =60分  1天 =24时   1月=30天  1年=12月
             var haoscend =alltime%1000;  //毫秒    
             var scend = parseInt ((alltime/1000)%60  ) ;  //秒
             var minute =parseInt((alltime/1000/60)%60  ) ;  //  分钟
             var hour =parseInt((alltime/1000/60/60)%24 ) ;   //小时
             var day=parseInt((alltime/1000/60/60/24)%30);   //天数
             var month=parseInt((alltime/1000/60/60/24/30)%12); //月
             var btime=document.getElementById("block");
             var time1=document.getElementById("shi_jian");
             time1.innerHTML ="717倒计时："+month+"月"+day+"天"+hour+"时"+minute +"分"+scend +"秒"+(haoscend<10 ?"00"+haoscend :haoscend <100?"0"+haoscend :haoscend );
             window.requestAnimationFrame(countdown );   //不加括号
             }

在这里插入图片描述

莓莓儿～

关注

2
点赞
踩
24

收藏

觉得还不错? 一键收藏
1
评论
js版的倒计时（月-日-时-分-秒-毫秒）

大早上好瞌睡，爬起来接着写。今天做的倒计时用了三种方法过程和思路：设置未来的时间。（使用在new Date()后面直接设置时间的方法）获取当前的时间（ newDate() ）用未来时间减去现在的时间，算出总的毫秒数算出倒计时的月、日、时、分、秒、毫秒（1s =1000ms 1分=60s 1时 =60分 1天 =24时 1月=30天 1年=12）每个...
复制链接

扫一扫