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

本例子的指定日期是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. jQuery中each()、find()、filter()等节点操作方法

    1.each(callback) 官方解释: 返回值:jQuery 概述 以每一个匹配的元素作为上下文来执行一个函数. 意味着,每次执行传递进来的函数时,函数中的this关键字都指向一个不同的DOM元 ...

  2. ASP.NET WebAPI 13 Filter

    Filter(筛选器)是基于AOP(面向方面编程)的设计,它的作用是Actionr的执行注入额外的逻辑,以达到横切注入的目的. IFilter 在WebAPI中所以的Filter都实现了IFilter ...

  3. 【OpenCV】选择ROI区域

    问题描述:在测试目标跟踪算法时,需要选择不同区域作为目标,进行目标跟踪,测试目标跟踪的效果. 解决思路: 1.OpenCV中提供了鼠标交互控制,利用setMouseCallback()给固定的窗口设置 ...

  4. spring mvc绑定复杂对象报错“Could not instantiate property type [com.ld.net.spider.pojo.WorkNode] to auto-grow nested property path: java.lang.InstantiationException: com.ld.net.spider.pojo.WorkNode”

    解决方法之一: 1.确保所有的Pojo都包含了默认的构造器:

  5. HTML5中的SVG

    * SVG * 基本内容 * SVG并不属于HTML5专有内容 * HTML5提供有关SVG原生的内容 * 在HTML5出现之前,就有SVG内容 * SVG,简单来说就是矢量图 * SVG文件的扩展名 ...

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

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

  7. 小型工厂企业网站究竟该怎么做好SEO优化，从而带来更多订单？

    中 小企业以及小型工厂做好SEO工作,每年从SEO带来的订单量还是很可观的,随着互联网的蓬勃发展,越来越多的小型工厂型企业网站开始逐渐走向互联网营 销,开始逐渐利用互联网开展销售工作!但是大部分的工厂 ...

  8. 物联网网络编程、Web编程综述

    本文是基于嵌入式物联网研发工程师的视觉对网络编程和web编程进行阐述.对于专注J2EE后端服务开发的童鞋们来说,这篇文章可能稍显简单.但是网络编程和web编程对于绝大部分嵌入式物联网工程师来说是一块真 ...

  9. unity下载文件三（http异步下载）

    异步下载,顾名思义就是不影响你主线程使用客户端的时候,人家在后台搞你的明堂. 直接入主题,既然要下载,首先得请求,请求成功之后进行回调,这就是一个异步过程,异步回调的时间不可控. 1.首先请求下载. ...

  10. iOS开发笔记6：图片轮播及其无限循环效果

    平时APP中的广告位或者滚动的新闻图片等用到的就是图片轮播这种效果,实现方式主要有两种,一种是ScrollView+ImageView,另一种则是通过CollectionView,今天总结的是Scro ...