<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. 【转】gitlab CI流水线配置文件.gitlab-ci.yml详解

    目录 GitLab CI流水线配置文件.gitlab-ci.yml详解 实验环境 GitLab CI介绍 .gitlab-ci.yml 配置参数 参数详解 script image services ...

  2. XML / HTML / XHTML 的区别

    目录 HTML XML XHTML HTML HTML(HyperText Markup Language):超文本标记语言,是一种用于创建网页的标准标记语言,是用来格式化并显示数据的 用HTML语法 ...

  3. 分子动力学模拟软件VMD的安装与使用

    技术背景 在分子动力学模拟过程中会遇到一些拓扑结构非常复杂的分子模型,所谓的复杂不仅仅是包含众多的原子,还有各种原子之间的成键关系与成键类型等.这时候就非常能够体现一个好的可视化软件的重要性了,这里我 ...

  4. 1、requests基础

    一.升级pip版本的命令 : python -m pip install --upgrade pip 二.requests安装  windows系统系cmd运行 pip install request ...

  5. 转： inline关键字使用

    1.inline用在函数声明时,还是函数定义时?还是两边都加? 首先,内联函数声明和定义最好在同一个文件中,其它的情况没有实用上的意义. 只要在同一个文件中,声明和定义至少其一加"inlin ...

  6. 『动善时』JMeter基础 — 19、JMeter配置元件【随机变量】

    目录 1.随机变量介绍 2.随机变量界面详解 3.随机变量的使用 (1)测试计划内包含的元件 (2)线程组界面内容 (3)随机变量界面内容 (4)HTTP请求界面内容 (5)查看结果 1.随机变量介绍 ...

  7. .NET平台系列9 .NET Core 3.0 / .NET Core 3.1 详解

    系列目录     [已更新最新开发文章,点击查看详细] .NET Core 3.0 于 2019年9月23日发布,重点是增加对同时支持使用 Windwos Forms.WPF 和 Entity Frm ...

  8. [Java] Git

    版本控制 VCS(Version Control System):版本控制系统 主要功能:版本控制.主动提交.中央仓库 中央仓库功能:保存版本历史.同步团队代码 DVCS(Distributed VC ...

  9. g77介绍 g77 是 Fortran77 的编译器。它对 Fortran 77 标准提供完备的支持，并支持 Fortran 90 和 95 的部分特性。 由于 Fortran 77 标准在数值计算中的影响力，g77 可能是应用最广的Fortran编译器。 在 GCC 4.0 之前，g77 是 GCC 的一部分，但现在，g77 已经停止开发。

    GFORTRAN 维基百科,自由的百科全书     跳到导航 跳到搜索 此条目需要扩充. (2018年11月2日)请协助改善这篇条目,更进一步的信息可能会在讨论页或扩充请求中找到.请在扩充条目后将此模 ...

  10. wmctrl像xmonad那样方便地用快捷键来控制任务窗口的显示

    窗口左右互搏之wmctrl篇 分类: LINUX 2012-10-24 16:34:41   一直有个念头,就是能够像xmonad那样方便地用快捷键来控制任务窗口的显示,今天弄wmctrl,刚好有时间 ...