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

节日、活动、商城常用。

原理：

主要使用到时间戳，也就是从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. 梅须逊雪三分白，雪却输梅一段香——CSS动画与JavaScript动画

    CSS动画并不是绝对比JavaScript动画性能更优越,开源动画库Velocity.js等就展现了强劲的性能. 一.两者的主要区别 先开门见山的说说两者之间的区别. 1)CSS动画: 基于CSS的动 ...

  2. Socket聊天程序——初始设计

    写在前面: 可能是临近期末了,各种课程设计接踵而来,最近在csdn上看到2个一样问答(问题A,问题B),那就是编写一个基于socket的聊天程序,正好最近刚用socket做了一些事,出于兴趣,自己抽了 ...

  3. WPF 有用博客地址

    增加智能感知的RichTextBox扩展控件(WPF) WPF自定义控件与样式(3)-TextBox & RichTextBox & PasswordBox样式.水印.Label标签. ...

  4. ASP.NET MVC5----常见的数据注解和验证

    只要一直走,慢点又何妨. 在使用MVC模式进行开发时,数据注解是经常使用的(模型之上操作),下面是我看书整理的一些常见的用法. 什么是验证,数据注解 验证 从全局来看,发现逻辑仅是整个验证的很小的一部 ...

  5. ADO.NET一小记-select top 参数问题

    异常处理汇总-后端系列 http://www.cnblogs.com/dunitian/p/4523006.html 最近使用ADO.NET的时候,发现select top @count xxxx 不 ...

  6. 【夯实PHP基础】UML序列图总结

    原文地址 序列图主要用于展示对象之间交互的顺序. 序列图将交互关系表示为一个二维图.纵向是时间轴,时间沿竖线向下延伸.横向轴代表了在协作中各独立对象的类元角色.类元角色用生命线表示.当对象存在时,角色 ...

  7. iOS开发--ChildViewController实现订单页的切换

    先不说废话, 上效果图, 代码量也不大, 也不上传github骗星星了, 你们复制粘贴下代码, 就可以轻而易举的弄出一个小demo. 这个代码的实现并不复杂, 甚至于说非常简单, 就是逻辑有点小绕, ...

  8. Handler

    1.1 继承AbstractController优点:能定制请求方式 package cn.happyl.controller; import javax.servlet.http.HttpServl ...

  9. [转]ThinkPHP中实例化对象M()和D()的区别，select和find的区别

    1.ThinkPHP中实例化对象M()和D()的区别 在实例化的过程中,经常使用D方法和M方法,这两个方法的区别在于M方法实例化模型无需用户为每个数据表定义模型类,如果D方法没有找到定义的模型类,则会 ...

  10. JS高级前端开发群加群说明及如何晋级

    JS高级前端开发群加群说明 一.文章背景: 二. 高级群: 三. 加入方式: 四. 说明:   一.文章背景: 去年年初建了几个群,在不经意间火了,一直排在“前端开发”关键字搜索结果第一名.当然取得这 ...