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

最新推荐文章于 2024-06-20 20:25:49 发布
最新推荐文章于 2024-06-20 20:25:49 发布
阅读量1.2w 收藏 24
点赞数 2
分类专栏： JS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fanfan_h/article/details/90664179
版权

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

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

  1. 设置未来的时间。（使用在new Date()后面直接设置时间的方法）

  2. 获取当前的时间（ newDate() ）

  3. 用未来时间减去现在的时间，算出总的毫秒数

  4. 算出倒计时的月、日 、时、分、秒、毫秒（1s =1000ms 1分=60s 1时 =60分 1天 =24时 1月=30天 1年=12）

  5. 每个时间内容出现在设置的块中。

  6. 间歇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
    评论
专栏目录
烟花版- 新年倒计时代码
12-21
风一样的美狼子 提前预祝各位新年快乐。 愿大家所念之人平安喜乐 愿大家所想之事顺心如意。
js实现倒计时
MrHao_的博客
04-29 1681
js实现倒计时： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <tit
Countdown.js 创建倒计时功能
最新发布
文摘资讯
06-20 46
Countdown.js 是一个 JavaScript 库，用于创建倒计时功能的定时器。它提供了简单易用的 API，可以帮助开发者在网页中实现各种倒计时功能，比如倒计时活动结束时间、倒计时页面跳转等。一般来说，Countdown.js 允许你指定一个目标时间，然后自动计算当前时间与目标时间之间的时间差，并实时更新显示剩余时间。这个库通常提供了一些配置选项，比如自定义显示格式、倒计时结束时的回调函数...
如何用js实现日期天数、时分秒的倒计时
西门吹雪
11-24 1万+
js实现天数倒计时 在用js实现倒计时的时候，可以先算出截止日期和今天之间相差的毫秒数，然后进行相应的比例进行day、 month 、hour、minute、second的计算，便可以准确的计算出相差的时间。 倒计时格式为：纯天数倒计时 function CountDown(year, month, day, hours) { let now = new Date(); let endDate = new Date(year, month - 1, day, hours);
JS实现简单的倒计时
热门推荐
第二世界
06-13 5万+
1、第一种 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>www.jb51.net JS倒计时</title> </head> <body> <div id="div"></div&gt...
JS倒计时算法
qq_55227591的博客
01-28 3019
JS倒计时
元旦倒计时代码-简单的javascript倒计时完整源码下载
12-12
JavaScript倒计时是一种常见的前端开发技术，用于在网页上显示特定日期或事件的剩余时间。在本案例中，我们关注的是一个专为“元旦”设计的倒计时代码。这个JavaScript代码可以帮助用户在网页上创建一个实时更新的倒...
元旦倒计时代码-JavaScript新年（元旦）倒计时完整源码下载
12-15
这篇文档将深入解析“元旦倒计时代码-JavaScript新年（元旦）倒计时完整源码”的关键知识点，包括如何实现倒计时功能，以及涉及的相关技术。 首先，JavaScript是这个项目的核心编程语言，它是一种轻量级的、解释型...
倒计时插件-jquery.zip
05-20
总之，"倒计时插件-jquery.zip"是一个使用jQuery实现的JavaScript插件，它为Web开发者提供了一种简单的方法来在网页上添加倒计时功能。通过`demo.html`的示例和`time.js`的源代码，我们可以学习如何设置和更新倒计时...
jQuery 60秒倒计时精确到毫秒.zip
07-05
本项目涉及的是使用jQuery实现一个精确到毫秒的60秒倒计时功能，这对于在线计时器、考试倒计时或者任何需要精准时间显示的应用来说都是至关重要的。在JavaScript中，Date对象是处理日期和时间的基础，但默认情况下，...
js实现多个倒计时并行 js拼团倒计时
10-17
主要为大家详细介绍了js实现多个倒计时并行功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue之事件绑定
deep_zhuheihei的博客
07-20 298
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc
js倒计时
zhang515745112的博客
06-21 251
时间戳和当前时间的毫秒值相减，除1000转化成秒，传参到timer（intDiff）获取倒计时，天数不为空，只显示天数function timer(intDiff){    window.setInterval(function(){        var day=0,            hour=0,            minute=0,            second=0;//时间...
JavaScript实现倒计时（附完整源码）
希望我的博客，能帮上你解决学习中工作中所遇到的问题
10-23 788
JavaScript实现倒计时（附完整源码）
JS 实现倒计时功能
qq_37698249的博客
02-08 3014
JS 定时器 setInterval setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。 由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。 /* 1.uniapp中使用定时器，实现倒计时功能 2.需要在页面销毁的时候，清除定时器 3.每次生成定时器前，必须判断，该定时器是否存在，如果存在，就return（不可重复生成） */ <template> <view>剩余时间
dayjs实现倒计时并且格式化时间格式
weixin_59559908的博客
01-25 1007
1.下载dayjs插件。
js实现 日期倒计时.
Coinker的博客
02-06 2376
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" &gt; &lt;title&gt;JS实现倒计时(天数,时,分,秒)&lt;/title&gt; &lt;script language="javascript" type="text/ja
用js制作一个两个小时零一分后的毫秒倒计时
04-19
好的，这是一个技术问题，可以回答。你可以使用 JavaScript 中的 Date 对象来实现自己的倒计时器。以下是一个基本的代码示例： ``` // 获取当前时间 var now = new Date().getTime(); // 将两个小时零一分转换成毫秒 var countDownTime = 2 * 60 * 60 * 1000 + 1 * 60 * 1000; // 计算到期时间 var expirationTime = now + countDownTime; // 定义更新计时器的函数 function updateTimer() { // 获取当前时间 var now = new Date().getTime(); // 计算剩余时间 var remainingTime = expirationTime - now; // 将剩余时间转换成小时、分钟和秒 var hours = Math.floor((remainingTime % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); var minutes = Math.floor((remainingTime % (1000 * 60 * 60)) / (1000 * 60)); var seconds = Math.floor((remainingTime % (1000 * 60)) / 1000); // 在网页上显示剩余时间 document.getElementById("timer").innerHTML = hours + " 小时 " + minutes + " 分钟 " + seconds + " 秒 "; // 如果倒计时结束，显示提示信息并停止计时器 if (remainingTime <= 0) { clearInterval(timer); document.getElementById("timer").innerHTML = "倒计时结束！"; } } // 调用更新计时器的函数，每秒执行一次 var timer = setInterval(updateTimer, 1000); ``` 你可以将这段代码嵌入到你的网页中，然后在页面中添加一个具有 ID “timer”的元素，倒计时就会自动开始并实时更新。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值