计算指定时间到指定时间之间相差多少天、时、分、秒。

节日、活动、商城常用。

原理：

主要使用到时间戳，也就是从1970 年 1 月 1 日 到指定时间的毫秒数。

1. 求出毫秒差 ：当两个时间直接进行运算时，他们自动返回毫秒值。

2. 换算时间单位： 向下取整，把毫秒转为相应的单位；再把剩下的毫秒取出来转为下一个需要的单位。

时间戳可以用 Date.pare(时间) 或 时间.getTime() 得到。 前者可以用字符串或时间对象，后者只能使用时间对象。

HTML

<!--

Author: XiaoWen

Create a file: 2017-01-03 19:05:26

Last modified: 2017-01-04 14:17:31

Start to work:

Finish the work:

Other information:

-->

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Document</title>

</head>

<body>

<input type="text">

<input type="text">

<input type="button" value="开始倒计时">

</body>

<script>

//js代码在下面

</script>

</html>

JS

var input = document.getElementsByTagName('input');

var timer=null;

input[2].onclick=function(){

  //clearInterval(timer)

  timer=setInterval(test,1000);

}

function test(){

    var t1=input[0].value//='2017/01/05 13:31';

    if(new Date(t1)-new Date()<=0){

      clearInterval(timer);

      alert('计时完成');

    }else{

      var d=cd(t1, new Date(), 'd');

      var h=cd(t1, new Date(), 'h');

      var m=cd(t1, new Date(), 'm');

      var s=cd(t1, new Date(), 's');

      input[1].value=d+'天'+h+'时'+m+'分'+s+'秒';

    }

  }

JS倒计时函数

/*

2017-01-04 by xw
获取倒计时 返回值数字

t1 开始时 时间格式

t2 结束时 时间格式

tg 要获取的值 字符串

  d 天

  h 时

  m 分

  s 秒

*/

function cd(t1, t2, tg) {

    //相差的毫秒数

    var ms = Date.parse(t1) - Date.parse(t2);

    var minutes = 1000 * 60;

    var hours = minutes * 60;

    var days = hours * 24;

    var years = days * 365;

    //求出天数

    var d = Math.floor(ms / days);

    //求出除开天数，剩余的毫秒数

    ms %= days;

    var h = Math.floor(ms / hours);

    ms %= hours;

    var m = Math.floor(ms / minutes);

    ms %= minutes;

    var s = Math.floor(ms / 1000);

    //返回所需值并退出函数

    switch(tg){

      case 'd' : return d;

      case 'h' : return h;

      case 'm' : return m;

      case 's' : return s;

    }

}

js倒计时-倒计输入的时间的更多相关文章

  1. js 倒计时点击和当前时间

    <input id="btn" type="submit" value="确定" disabled="disabled&qu ...

  2. js 倒计时功能，获取当前时间的年月日，时分秒

    一.实现当前时间到指定截止时间的倒计时功能 <html> <head> <title>TEST</title> </head> <bo ...

  3. 160301、js倒计时，页面上显示时间

    js: //倒计时 var countdown=60,t; function settime(){ if (countdown == 0) { $("#validateBtn"). ...

  4. js倒计时 手机休眠时 时间不进行减少

    http://www.111cn.net/wy/js-ajax/94218.htm 手机版网页js倒计时存在的问题与解决的方法 www.111cn.net 更新:2015-09-16 编辑:kp123 ...

  5. js 倒计时（可自定义时间）

    <html> <head> <title>js 倒计时</title> </head> <body> <div> & ...

  6. JS倒计时 代码

    JS倒计时 代码 <div> <span id="KSD">3</span>天 <span id="KSH">1 ...

  7. [浪风推荐]javascritp中倒计定时器和循环定时器

    在javascritp中,有两个关于定时器的专用函数,分别为: 1.倒计定时器:timename=setTimeout(“function();”,delaytime); 2.循环定时器:timena ...

  8. js倒计时，秒倒计时，天倒计时

    按天倒计时 HTML代码1: <Script Language="JavaScript"> <!-- Begin var timedate= new Date(& ...

  9. JS倒计时（刷新页面不影响）的实现思路

    最近在做一个项目,用到了点击按钮实现倒计时,这个用js来实现很简单.但是遇到了一个问题 页面刷新后js重新加载导致 倒计时重新开始,或者直接初始化了 后来通过 cookie 保存来实现了js倒计时,关 ...

随机推荐

  1. JavaScript之父Brendan Eich，Clojure 创建者Rich Hickey，Python创建者Van Rossum等编程大牛对程序员的职业建议

    软件开发是现时很火的职业.据美国劳动局发布的一项统计数据显示,从2014年至2024年,美国就业市场对开发人员的需求量将增长17%,而这个增长率比起所有职业的平均需求量高出了7%.很多人年轻人会选择编 ...

  2. BZOJ 1911: [Apio2010]特别行动队 [斜率优化DP]

    1911: [Apio2010]特别行动队 Time Limit: 4 Sec  Memory Limit: 64 MBSubmit: 4142  Solved: 1964[Submit][Statu ...

  3. Socket聊天程序——服务端

    写在前面: 昨天在博客记录自己抽空写的一个Socket聊天程序的初始设计,那是这个程序的整体设计,为了完整性,今天把服务端的设计细化记录一下,首页贴出Socket聊天程序的服务端大体设计图,如下图: ...

  4. HTML中上传与读取图片或文件（input file）----在路上（25）

    input file相关知识简例 在此介绍的input file相关知识为: 上传照片及文件,其中包括单次上传.批量上传.删除照片.增加照片.读取图片.对上传的图片或文件的判断,比如限制图片的张数.限 ...

  5. PHP-解析验证码类--学习笔记

    1.开始 在 网上看到使用PHP写的ValidateCode生成验证码码类,感觉不错,特拿来分析学习一下. 2.类图 3.验证码类部分代码 3.1  定义变量 //随机因子 private $char ...

  6. Jquery的事件操作和文档操作

    对于熟悉前端开发的小伙伴,相信对于Jquery一定不陌生,相对于JavaScript的繁琐,Jquery更加的简洁,当然简洁不意味着简单,我们可以使用Jquery完成我们想要实现全部功能,这里为小白们 ...

  7. C#中5步完成word文档打印的方法

    在日常工作中,我们可能常常需要打印各种文件资料,比如word文档.对于编程员,应用程序中文档的打印是一项非常重要的功能,也一直是一个非常复杂的工作.特别是提到Web打印,这的确会很棘手.一般如果要想选 ...

  8. 【C#附源码】数据库文档生成工具支持（Excel+Html）

    [2015] 很多时候,我们在生成数据库文档时,使用某些工具,可效果总不理想,不是内容不详细,就是表现效果一般般.很多还是word.html的.看着真是别扭.本人习惯用Excel,所以闲暇时,就简单的 ...

  9. 微信网页开发之获取用户unionID的两种方法--基于微信的多点登录用户识别

    假设网站A有以下功能需求:1,pc端微信扫码登录:2,微信浏览器中的静默登录功能需求,这两种需求就需要用到用户的unionID,这样才能在多个登录点(终端)识别用户.那么这两种需求下用户的unionI ...

  10. Python多线程爬虫爬取电影天堂资源

    最近花些时间学习了一下Python,并写了一个多线程的爬虫程序来获取电影天堂上资源的迅雷下载地址,代码已经上传到GitHub上了,需要的同学可以自行下载.刚开始学习python希望可以获得宝贵的意见. ...