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

节日、活动、商城常用。

原理：

主要使用到时间戳，也就是从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. 《Django By Example》第五章 中文 翻译 （个人学习，渣翻）

    书籍出处:https://www.packtpub.com/web-development/django-example 原作者:Antonio Melé (译者@ucag注:大家好,我是新来的翻译, ...

  2. ASP.NET Core应用的错误处理[3]：ExceptionHandlerMiddleware中间件如何呈现“定制化错误页面”

    DeveloperExceptionPageMiddleware中间件利用呈现出来的错误页面实现抛出异常和当前请求的详细信息以辅助开发人员更好地进行纠错诊断工作,而ExceptionHandlerMi ...

  3. node服务的监控预警系统架构

    需求背景 目前node端的服务逐渐成熟,在不少公司内部也开始承担业务处理或者视图渲染工作.不同于个人开发的简单服务器,企业级的node服务要求更为苛刻: 高稳定性.高可靠性.鲁棒性以及直观的监控和报警 ...

  4. python自动化测试（2）-自动化基本技术原理

    python自动化测试(2) 自动化基本技术原理 1   概述 在之前的文章里面提到过:做自动化的首要本领就是要会 透过现象看本质 ,落实到实际的IT工作中就是 透过界面看数据. 掌握上面的这样的本领 ...

  5. setAttribute()

    ●节点分为不同的类型:元素节点.属性节点和文本节点等.   ●getElementById()方法将返回一个对象,该对象对应着文档里的一个特定的元素节点.   ●getElementsByTagNam ...

  6. SQLServer执行命令出现“目录无效的提示”

    异常处理汇总-数据库系列  http://www.cnblogs.com/dunitian/p/4522990.html 一般都是清理垃圾清理过头了,把不该删的目录删了 网上说法: 问题描述: 1.s ...

  7. xpath提取多个标签下的text

    title: xpath提取多个标签下的text author: 青南 date: 2015-01-17 16:01:07 categories: [Python] tags: [xpath,Pyth ...

  8. B样条基函数的定义和性质

    定义:令U={u0,u1,…,um}是一个单调不减的实数序列,即ui≤ui+1,i=0,1,…,m-1.其中,ui称为节点,U称为节点矢量,用Ni,p(u)表示第i个p次(p+1阶)B样条基函数,其定 ...

  9. Ubuntu搭建lnmp环境

    1.安装nginx 安装 sudo apt-get install nginx 服务启动.停止.重启 /etc/init.d/nginx start /usr/sbin/nginx -c /etc/n ...

  10. CocoaPods的安装、使用、以及遇到的问题

    CocoaPods是什么? 当你开发iOS应用时,会经常使用到很多第三方开源类库,比如JSONKit,AFNetWorking等等.可能某个类库又用到其他类库,所以要使用它,必须得另外下载其他类库,而 ...