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

本例子的指定日期是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. csharp: WebBrowser read baidumap

    setpoint.html: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Typ ...

  2. kFreeBSD当前可以做的和不能做的

    可以进行FAMP FreeBSD.Apache/Nginx.Mysql/PostGreSQL.PHP/Perl/Python 虚拟化 最易用的VirtualBox 无法安装 Java OpenJDK及 ...

  3. Yii2学习笔记之场景

    场景 一个模型可能在多个场景中使用,在不同的场景中,模型可能使用不同的业务逻辑和规则.例如, User 模型可能在用户登录时使用,也可能在用户注册时使用,某些属性可能在用户注册时强制要求有,在用户登录 ...

  4. Delphi的几个跨平台小游戏例子。

    Embarcadero开源了几个FireMonkey的小游戏,支持Windows, Android,Ios, MacOS等. 源码地址: https://github.com/EmbarcaderoP ...

  5. S2 易买网总结

    易买网项目总结 --指导老师:原玉明 不知不觉,又到了S2结业的时间了,S1的项目KTV项目还历历在目.一路走来,感觉时间过的好快,我们离就业也越来越近... 展示: 1.主页面(首页) 01.商品分 ...

  6. ASP.NET WebAPI 11 参数验证

    在绑定完Action的所有参数后,WebAPI并不会马上执行该方法,而要对参数进行验证,以保证输入的合法性. ModelState 在ApiController中一个ModelState属性用来获取参 ...

  7. 干净的停止tomcat/java应用程序

    通常在使用了jdbc或者netty的应用程序中,当shutdown tomcat或java应用程序时,会出现无法停止的情况,报类似如下错误: 严重: The web application [] re ...

  8. C# 枚举、字符串、值的相互转换

    using  System; class  Program{    public   enum  Color   {      Red  =   0xff0000 ,      Orange  =   ...

  9. 关于IE中通过http-equiv="X-UA-Compatible指定文件兼容性模式

    .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier ...

  10. SharePoint Iframe 报错“此内容不能显示在一个框架中”<续>

    在之前的SharePoint站点iframe引用中,我们遇到过下面的问题,就是其它系统或者不通环境的SharePoint站点,引用SharePoint页面会报错“此内容不能显示在一个框架中”,之前我们 ...