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

本例子的指定日期是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. ES6中generator传参与返回值

    先看两个例子, 1, function* f() { for(var i=0; true; i++) { var reset = yield i; if(reset) { i = -1; } } } ...

  2. 数组拷贝 copyOf()

    Arrarys类的copyof方法与copyOfRange方法可以实现对数组的复制,前者是复制数组到指定的长度,后者将指定的长度复制到一个新数组中. 1.copyOf()方法 该方法提供了很多种重载形 ...

  3. xUtils类库的使用

    序言: 作为一个职业的程序猿,不会像新手一样把每一个需要实现的功能每次重写一遍,因为程序猿能熟练的使用各种第三方类库. 毕竟人类因为会使用工具才站到了食物链顶端. 现在就让我们学习使用xUtils类库 ...

  4. HBase数据模型剖析

    出处:http://wuyudong.com/1987.html HBase 进行数据建模的方式和你熟悉的关系型数据库有些不同.关系型数据库围绕表.列和数据类型——数据的形态使用严格的规则.遵守这些严 ...

  5. 限制UITextField输入内容的长度

    一.前言 今天做手机号输入限制长度,例如我的textfield只能输入11位,如果再多输入的话就不再textfield中显示,只显示11位的手机号. 如果用ReactiveCocoa的话,这个很好解决 ...

  6. 多线程之NSOperation和NSOperationQueue

    这篇文章里我将不过多的谈及理论知识,这些东西会的自然会,不会的,看多了也是云里雾里.下面我讲更多的用代码+注释的方式来讲如何使用NSOperation和NSOperationQueue. 1.NSOp ...

  7. Swift 设计指南之 编程规范

    基本准则 用法一目了然是你设计时最重要的目的. 方法和属性这样的实体只声明一次,却会被重复调用.因此你在设计 API 时应尽可能使其简单明了.当评估某个设计时,只阅读声明往往是不够的,有时还需要检查它 ...

  8. 斯坦福iOS7公开课1-3笔记及纸牌Demo

    1.MVC Model:模型 描述程序是什么,例如数据库操作之类的行文以及纸牌Demo里纸牌玩法都是写在Model这一层,通过Notification和KVO(后续文章会介绍)两种方式与Control ...

  9. IOS的UI基础02

    *:first-child { margin-top: 0 !important; } body > *:last-child { margin-bottom: 0 !important; } ...

  10. Android中有时候运行程序的时候会报错：An internal error occurred during:。。。。

    解决办法: Project -> Properties -> Run/Debug Settings: 1. select "Launching New_configuration ...