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

节日、活动、商城常用。

原理：

主要使用到时间戳，也就是从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进阶之路（一）初学者的开始

    一:写在前面的问题和话 一个javascript初学者的进阶之路! 背景:3年后端(ASP.NET)工作经验,javascript水平一般般,前端水平一般般.学习资料:犀牛书. 如有误导,或者错误的地 ...

  2. 如何一步一步用DDD设计一个电商网站（四）—— 把商品卖给用户

    阅读目录 前言 怎么卖 领域服务的使用 回到现实 结语 一.前言 上篇中我们讲述了“把商品卖给用户”中的商品和用户的初步设计.现在把剩余的“卖”这个动作给做了.这里提醒一下,正常情况下,我们的每一步业 ...

  3. JavaScript权威指南 - 数组

    JavaScript数组是一种特殊类型的对象. JavaScript数组元素可以为任意类型,最大容纳232-1个元素. JavaScript数组是动态的,有新元素添加时,自动更新length属性. J ...

  4. Python应用03 使用PyQT制作视频播放器

    作者:Vamei 出处:http://www.cnblogs.com/vamei 严禁任何形式转载. 最近研究了Python的两个GUI包,Tkinter和PyQT.这两个GUI包的底层分别是Tcl/ ...

  5. C#多线程之基础篇3

    在上一篇C#多线程之基础篇2中,我们主要讲述了确定线程的状态.线程优先级.前台线程和后台线程以及向线程传递参数的知识,在这一篇中我们将讲述如何使用C#的lock关键字锁定线程.使用Monitor锁定线 ...

  6. 谱聚类（spectral clustering）原理总结

    谱聚类(spectral clustering)是广泛使用的聚类算法,比起传统的K-Means算法,谱聚类对数据分布的适应性更强,聚类效果也很优秀,同时聚类的计算量也小很多,更加难能可贵的是实现起来也 ...

  7. C# 给word文档添加水印

    和PDF一样,在word中,水印也分为图片水印和文本水印,给文档添加图片水印可以使文档变得更为美观,更具有吸引力.文本水印则可以保护文档,提醒别人该文档是受版权保护的,不能随意抄袭.前面我分享了如何给 ...

  8. nginx服务器安装及配置文件详解

    nginx在工作中已经有好几个环境在使用了,每次都是重新去网上扒博客,各种编译配置,今天自己也整理一份安装文档和nginx.conf配置选项的说明,留作以后参考.像负载均衡配置(包括健康检查).缓存( ...

  9. 萌新笔记——linux下查看内存的使用情况

    windows上有各种软件可以进行"一键加速"之类的操作,释放掉一些内存(虽然我暂时不知道是怎么办到的,有待后续学习).而任务管理器也可以很方便地查看各进程使用的内存情况,如下图: ...

  10. 谈谈document.ready和window.onload的区别

    在Jquery里面,我们可以看到两种写法:$(function(){}) 和$(document).ready(function(){}) 这两个方法的效果都是一样的,都是在dom文档树加载完之后执行 ...