该程序可以计算任意指定的两个日期中间的差值。

本例子的指定日期是2017年1月1日，当前时间是2016年10月21日；计算它们之间的差值，在网页上显示如图所示：

关键部分代码：

 var nowtime = new Date().getTime();//获取当前时间的毫秒数

 var wtime = new Date("2017,1,1").getTime();//获取指定日期的毫秒数

 var lefttime = (wtime-nowtime)/1000;//获取指定日期和当前时间的相差的秒数

 var day = parseInt(lefttime/60/60/24);//转化为天数

 var hour = parseInt(lefttime/60/60%24);//转化为小时数

 var min = parseInt(lefttime/60%60);//转化为分钟数

 var sec = parseInt(lefttime%60);//转化为秒数

解析：

　　lefttime获得的是指定时间和当前时间的差值的秒数，我们要做的就是把秒数分别转化为天数，小时数，分钟数和秒数，

  • 转化为天数：用lefttime除以（60*60*24）得到的是结果是71.0685的小数，我们此时需要的是整数，故用parseInt()方法获取整数；
  • 转化为小时数：之前得到有小数点的天数是71.0685，天数已经取整得到了71天，那么剩余的小数不足一天则转化为小时数，用lefttime除以(60*60)得到差值的小时数，然后进行取余%24得到不足一天的小时数，此时小时数可能是带有小数点的，所以也用parseInt()方法取整。
  • 转化为分钟数：同理，分钟数是之前得到的有小数点的小时数后面的小数，所以此时用lefttime除以60得到差值的分钟数，然后取余%60得到不足一小时的分钟数，然后再次取整。
  • 转化为秒数：用lefttime取余%60得到不足一分钟的秒数。

完整代码：

 <!DOCTYPE html>

 <html>

 <head>

     <title></title>

     <meta charset="utf-8">

 </head>

 <style type="text/css">

     div{

         width:500px;

         height:100px;

         margin:200px auto;

         font-size: 20px;

     }

 </style>

 <body>

         <div>

             距离2017年元旦节还有:

             <span id="day"></span> 天

             <span id="hour"></span> 小时

             <span id="min"></span> 分钟

             <span id="sec"></span> 秒

         </div>

 <script type="text/javascript">

     function move(){

         var nowtime = new Date().getTime();//获取当前时间的毫秒数

         var wtime = new Date("2017,1,1").getTime();//获取指定日期的毫秒数

         var lefttime = (wtime-nowtime)/1000;//获取指定日期和当前时间的相差的秒数

         var day = parseInt(lefttime/60/60/24);//转化为天数

         var hour = parseInt(lefttime/60/60%24);//转化为小时数

         var min = parseInt(lefttime/60%60);//转化为分钟数

         var sec = parseInt(lefttime%60);//转化为秒数

         document.getElementById("day").innerHTML = day;

         document.getElementById("hour").innerHTML = hour;

         document.getElementById("min").innerHTML = min;

         document.getElementById("sec").innerHTML = sec;

     }

     move();

     setInterval(move,1000);

 </script>

 </body>

 </html>

如有代码上的错误或者不同的思路和建议，欢迎大家指正。

js制作倒计时效果的更多相关文章

  1. JS实现倒计时效果，并退出系统

    背景:由于单点登录后,一直在本系统操作,可是门户体统的会话失效时间有30分钟,所以30分钟后,需要重新登录系统才可以进行操作. 方法:想过在本系统中的每个操作都先跟门户系统进行交互,渠道refresh ...

  2. js实现倒计时效果

    <!DOCTYPE html><head><meta http-equiv="Content-Type" content="text/htm ...

  3. 二、JavaScript语言--JS实践--倒计时效果

    主要内容:分析不同倒计时效果的计算思路及方法,掌握日期对象Date,获取时间的方法,计算时差的方法,实现不同的倒时计效果. Javascript 日期对象: Date()返回当前的日期和时间 getY ...

  4. (转)js实现倒计时效果(年月日时分秒)

    原文链接:http://mengqing.org/archives/js-countdown.html 之前做的活动页面很多都用到了倒计时功能,所以整理下下次直接用.(用的是张鑫旭写的一个倒计时,稍作 ...

  5. js 实现倒计时效果

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  6. js日期倒计时效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. js制作烟花效果

    <html> <head> <link type="text/css" rel="stylesheet" href="c ...

  8. canvas制作倒计时效果

  9. js 验证码倒计时效果

    function settime(obj) { if(second == 0){ obj.removeAttribute("disabled"); obj.value=" ...

随机推荐

  1. 与众不同 windows phone (43) - 8.0 相机和照片: 镜头的可扩展性, 图片的可扩展性, 图片的自动上传扩展

    [源码下载] 与众不同 windows phone (43) - 8.0 相机和照片: 镜头的可扩展性, 图片的可扩展性, 图片的自动上传扩展 作者:webabcd 介绍与众不同 windows ph ...

  2. web ppt

    先记录,以后再试试 https://github.com/gnab/remark/wiki http://segmentfault.com/blog/sweetdum/1190000000484121 ...

  3. Docker on CentOS for beginners

    Introduction The article will introduce Docker on CentOS. Key concepts Docker Docker is the world's ...

  4. 优化磁盘I/O

    管理I/O,避免过度地寻道可以让硬盘更快.顺序I/O和随机I/O之间的性能差异随便就可以达到40:1,可能更多.这在数据库服务器中尤其重要,因为数据库的日志是以顺序格式写的.选择合适的硬件,合理地配置 ...

  5. Android从零开始——Android开发环境的安装

    Android开发环境的安装 1 IDE Android可以使用开发的IDE有Eclipse 或者 Android Studio.Android Studio还处于v 0.1.x版本,是early a ...

  6. .net mysql 支持表情

    1.表 utf8mb4 2.字段  utf8mb4 3.连接字符串 utf8mb4 4.存储过程参数  utf8mb4

  7. 转：Android 判断用户2G/3G/4G移动数据网络

    Android 判断用户2G/3G/4G移动数据网络 在做 Android App 的时候,为了给用户省流量,为了不激起用户的愤怒,为了更好的用户体验,是需要根据用户当前网络情况来做一些调整的,也可以 ...

  8. 关于Kb/s，KB/s的一些知识

    我们常见的有KB/s和Kb/s两种 1,Kb/s也就是Kbps.这里面小写的b是bit(比特)的缩写,是位的意思.一个位就是二进制的0或者1.一般代表传输单位,p就是/号,s是秒.bps就是b/s=比 ...

  9. 关于停止AsyncTask和Thread的问题

    在java的线程中,没有办法停止一个正在运行中的线程.在Android的AsyncTask中也是一样的.如果必须要停止一个线程,可以采用这个线程中设置一个标志位,然后在线程run方法或AsyncTas ...

  10. C语言中的指针和内存泄漏

    引言 对于任何使用C语言的人,如果问他们C语言的最大烦恼是什么,其中许多人可能会回答说是指针和内存泄漏.这些的确是消耗了开发人员大多数调试时间的事项.指针和内存泄漏对某些开发人员来说似乎令人畏惧,但是 ...