<body onload="myFunction()">

<p id="demo"></p>

<script>

function myFunction(){

    var nowDate = new Date();

    var EndDate=new Date("2020-10-01 10:30:00")

    var dateDiff=EndDate.getTime()-nowDate.getTime();

    var days=Math.floor(dateDiff/(24*3600*1000)) //计算出天数

        //计算出小时数

        var leave1=dateDiff%(24*3600*1000)  //计算天数后剩余的毫秒数

        var hours=Math.floor(leave1/(3600*1000))

        //计算相差分钟数

        var leave2=leave1%(3600*1000)    //计算小时数后剩余的毫秒数

        var minutes=Math.floor(leave2/(60*1000))

        //计算相差秒数

        var leave3=leave2%(60*1000)   //计算分钟数后剩余的毫秒数

        var seconds=Math.round(leave3/1000)

        //调用checkTime方法将数字小于10的在前面补0

    　　 days=checkTime(days);

    　　 hours=checkTime(hours);

    　　 minutes=checkTime(minutes);

    　　 seconds=checkTime(seconds);

        var x = document.getElementById("demo");

    　　 x.innerHTML="剩余时间:"+days+"天"+hours+"小时"+minutes+"分钟"+seconds+"秒";

    　　 t=setTimeout(function(){myFunction(),1000})

}

    function checkTime(i){

    if(i<10&&i!=0){

        i="0"+i;

    }

        return i;

    }

</script>

</body>

思路:使用getTime()计算出两个时间的毫秒单位并相减得到以毫秒为单位的时间差，然后通过计算分别获取到对应的时分秒。

扩展:

Math.floor()方法执行的是向下取整计算，它返回的是小于或等于函数参数，并且与之最接近的整数。

Math.round() 方法可把一个数字四舍五入为最接近的整数。

使用JS获取两个时间差(JS写一个倒计时功能)的更多相关文章

  1. Vue3语法快速入门以及写一个倒计时组件

    Vue3写一个倒计时组件 vue3 beta版本发布已有一段时间了,文档也大概看了一下,不过对于学一门技术,最好的方法还是实战,于是找了一个比较简单的组件用vue3来实现,参考的是vant的count ...

  2. js计算两个时间差 天 时 分 秒 毫秒

    // 计算两个时间差 dateBegin 开始时间 function timeFn(dateBegin) { //如果时间格式是正确的,那下面这一步转化时间格式就可以不用了 var dateEnd = ...

  3. JS计算两个时间差的问题

    计算两个时间差的问题 function getDateIsMatching(){ var pactbegindate=$("#loanbegindate").datetimebox ...

  4. js 获取两个日期相差的天数--自定义方法

    //获取两个日期的相差天数 datedifference=function(sDate1, sDate2) { var dateSpan, tempDate, iDays; sDate1 = Date ...

  5. JS[获取两个日期中所有的月份]

    //------[获取两个日期中所有的月份中] function getMonthBetween(start,end){ var result = []; var s = start.split(&q ...

  6. JS获取两个日期间的所有日期

    var stime = '2018-07-25'; //开始日期 var etime = '2018-08-02'; //结束日期 getdiffdate(stime,etime); //获取两日期之 ...

  7. JS获取当前日期时间及JS日期格式化

    Js获取当前日期时间: var myDate = new Date(); myDate.getYear(); //获取当前年份(2位) myDate.getFullYear(); //获取完整的年份( ...

  8. Vue.js 3.0搭配.NET Core写一个牛B的文件上传组件

    在开发Web应用程序中,文件上传是经常用到的一个功能. 在Jquery时代,做上传功能,一般找jQuery插件就够了,很少有人去探究上传文件插件到底是怎么做的. 简单列一下我们要做的技术点和功能点 使 ...

  9. 使用node.js 文档里的方法写一个web服务器

    刚刚看了node.js文档里的一个小例子,就是用 node.js 写一个web服务器的小例子 上代码 (*^▽^*) //helloworld.js// 使用node.js写一个服务器 const h ...

随机推荐

  1. Android NDK编程之Android.mk和Application.mk

    Android编程使用NDK必须创建一个jni文件夹,并且jni文件里一般包含有C/C++的源码文件.Android..mk文件.Application.mk文件(可选),Android.mk文件的编 ...

  2. Hook android系统调用研究（一）

    本文的博客链接:http://blog.csdn.net/qq1084283172/article/details/55657300 一.Android内核源码的编译环境 系统环境:Ubuntu 14 ...

  3. 6.PHP与JavaScript交互

    PHP与JS交互 JS年闰年判断(body里直接引用JS) <form name="form1" method="post" action="& ...

  4. 【python】Leetcode每日一题-位1的个数

    [python]Leetcode每日一题-位1的个数 [题目描述] 编写一个函数,输入是一个无符号整数(以二进制串的形式),返回其二进制表达式中数字位数为 '1' 的个数(也被称为汉明重量). 示例1 ...

  5. 【maven】maven资源过滤问题<build>

    需要在pom.xml加入以下代码(在父项目添加即可,如果还不行的话,就在子module的pom.xml也添加) <build> <resources> <resource ...

  6. Schema的快速入门

    Schema的快速入门 如果是简单元素直接  <element name="" type=""></element> Schema开发过 ...

  7. 【转】docker打包python应用

    转自https://www.cnblogs.com/shenh/p/9518343.html 一.前言 容器使用沙箱机制,互相隔离,优势在于让各个部署在容器的里的应用互不影响,独立运行,提供更高的安全 ...

  8. Solon 的过滤器 Filter 和两种拦截器 Handler、 Interceptor

    在web开发中,过滤器.拦截器是经常用到的功能.它可以帮我们限制流量.验证是否登陆.记录日志以及统计执行效率等等. 今天主要交流一下 Solon 框架中的过滤器和拦截器. Solon 是什么框架? S ...

  9. CRM系统实施中如何避免“踩雷”

    CRM系统实施后,效果没有达到预期是很多企业出现的情况.而最主要的原因就是在实施之前没有足够的思考和相应的计划.那么,企业应如何避免CRM系统实施时"踩雷"?这里有几条建议希望可以 ...

  10. 2.HTML案例二 头条页面

    4 HTML案例-头条页面 4.1 案例效果 4.2 案例分析 4.2.1 div布局的进阶 想要将div布局成案例效果,首先需要对多个div进行区分,再分别设置每一个div自身的效果. 1)div的 ...