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

节日、活动、商城常用。

原理：

主要使用到时间戳，也就是从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. Online Judge（OJ）搭建（第一版）

    搭建 OJ 需要的知识(重要性排序): Java SE(Basic Knowledge, String, FileWriter, JavaCompiler, URLClassLoader, Secur ...

  2. SQL Server2014 SP2新增的数据库克隆功能

    SQL Server2014 SP2新增的数据库克隆功能 创建测试库 --创建测试数据库 create database testtest use testtest go --创建表 )) --插入数 ...

  3. 谈一下关于CQRS架构如何实现高性能

    CQRS架构简介 前不久,看到博客园一位园友写了一篇文章,其中的观点是,要想高性能,需要尽量:避开网络开销(IO),避开海量数据,避开资源争夺.对于这3点,我觉得很有道理.所以也想谈一下,CQRS架构 ...

  4. 玩转spring boot——结合JPA事务

    接着上篇 一.准备工作 修改pom.xml文件 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi=&q ...

  5. .Net Core上用于代替System.Drawing的类库

    目前.Net Core上没有System.Drawing这个类库,想要在.Net Core上处理图片得另辟蹊径. 微软给出了将来取代System.Drawing的方案,偏向于使用一个单独的服务端进行各 ...

  6. 来自于微信小程序的一封简讯

    9月21晚间,微信向部分公众号发出公众平台-微信应用号(小程序)的内测邀请,向来较为低调的微信在这一晚没人再忽视它了. 来自个人博客:Damonare的个人博客 一夜之间火了的微信应用号你真的知道吗? ...

  7. HA 高可用软件系统保养指南

    又过了一年 618,六月是公司一年一度的大促月,一般提前一个月各系统就会减少需求和功能的开发,转而更多去关注系统可用性.稳定性和管控性等方面的非功能需求.大促前的准备工作一般叫作「备战」,可以把线上运 ...

  8. Greenplum 的分布式框架结构

    Greenplum 的分布式框架结构 1.基本架构 Greenplum(以下简称 GPDB)是一款典型的 Shared-Nothing 分布式数据库系统.GPDB 拥有一个中控节点( Master ) ...

  9. CentOS7 + mono +Jexus 环境的搭建

    CentOS7的安装和配置 1,从http://www.centos.org/下载CentOS7的镜像,并在VMWare中创建该镜像的虚拟机,为方便操作,把虚拟机的网络连接设置为桥接模式:在安装过程中 ...

  10. .NET Portability Analyzer 已开源

    在一年前介绍过<介绍.NET 开发必备工具 .NET Portability Analyzer>,微软已经把代码开源到Github:https://github.com/Microsoft ...