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

本例子的指定日期是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. Yii路径总结

    如果是 // 就会默认去调 protected/views/layouts //代表 绝对路径 其实 就是 绝对和相对的关系 /代表相对路径,如module/user下的layout 用单斜杠的话默认 ...

  2. C程序(3)

  3. double 类型转化为Integer类型 ---DecimalFormat

    假设x是你要转换的double类型变量: 不进行四舍五入操作: (int)x 进行四舍五入操作: Integer.parseInt(new java.text.DecimalFormat(" ...

  4. [原创]html5游戏_五线谱打音符

    html5手机游戏—五线谱打音符 1.[用五线谱打唱名] 2.[用唱名打五线谱] 3.[无限练习模式] 用来熟悉五线谱上音符的位置 代码不难,这回注释还是有认真写的[只是废代码没有全部删除...] 效 ...

  5. ArcGIS知乎上有哪些干货可以推荐？

    http://zhihu.esrichina.com.cn/question/12709

  6. android view holder 优化

    android 一般都用viewholder来优化contentView,采用sparseArray能够进一步优化 /** * 用法: ImageView bananaView = ViewHolde ...

  7. C语言柔性数组

    结构中最后一个元素允许是未知大小的数组,这个数组就是柔性数组.但结构中的柔性数组前面必须至少一个其他成员,柔性数组成员允许结构中包含一个大小可变的数组,sizeof返回的这种结构大小不包括柔性数组的内 ...

  8. iOS-绘图(Quartz2D)的简单使用(原创)

    前言 附上绘图demo--https://github.com/yangfangxue/YFX_Quartz-2D 什么是Quartz2D? Quartz 2D是一个二维图形绘制引擎,支持ios环境和 ...

  9. 《慕客网：IOS动画案例之会跳动的登入界面（下）》学习笔记 －Sketch的使用

    导出选中的一个图片,比如这里我们选中background,然后点击软件的右下角,可以设置导出的尺寸: 然后添加1倍,2倍,3倍的尺寸,因为在ihpne6之后就需要这三个尺寸倍数的UI,以适应不同设备的 ...

  10. 由一个activity跳转到另一个activity

    定义一个按钮,当点击的时候跳转到另一个activity的界面 1.新建第二个activity 2.在第二个Java源码处继承第一个activity,导入 3.在source中复写Oncreat方法 4 ...