倒计时很常见，例如离XX活动还有XX天XX小时XX分XX秒，然后逐秒减少，实现很简单，我只是想记录这过程中的一点小坑。

先上代码：

  1. <html>
  2.   <head>
  3.     <meta charset="UTF-8" >
  4.     <title>task0002_2</title>
  5.   </head>
  6.   <body>
  7.     <input id="input-date" type="text" />
  8.     <button id="btn">点击</button>
  9.     <p>
  10.       距离<span id="show-date">YYYY年MM月DD日</span>还有<span id="time-different">XX天XX小时XX分XX秒</span>
  11.     </p>
  12.  
  13.     <script src="./js/util.js"></script>
  14.     <script src="./js/task0002_2.js"></script>
  15.   </body>
  16. </html>

在按照xxxx-xx-xx这样的格式输入之后，点击按钮，下面就开始倒计时。

实现思路很简单：按照输入的时间转换成Date，然后获取现在的时间，两个时间相减，再转换成以天/时/分/秒为单位的就好了。

现在看看我的JS代码，我没有做格式错误的判断，默认输入的时间格式是正确的。

  1. addEvent($("#btn"), "click", displayTime);  // addEvent是我自己封装的函数，其实就是元素的事件绑定
  2.  
  3. function displayTime() {
  4.   var $inputDate = $("#input-date").value; // 获取日期字符串
    var date = new Date(Date.parse($inputDate)); // 用日期字符串构造Date
  5.   date.setHours(0);
  6.   date.setMinutes(0);
  7.   date.setSeconds(0);
  8.   console.log(date.toString());
  9.   var str = date.getFullYear().toString() + "年" + (date.getMonth()+1).toString() + "月" + date.getDate().toString() + "日";
  10.   $("#show-date").innerHTML = str;
  11.   display(date);
  12. }
  13.  
  14. // 倒计时
  15. function display(date) {
  16.   var nowDate = new Date();
  17.   console.log(nowDate.toString());
  18.   var diffTime = date.getTime() - nowDate.getTime(); // 相减后单位是毫秒
  19.   var remain = diffTime % parseInt(1000 * 3600 * 24); // 1000 * 3600 * 24， 因为单位是毫秒，这就是1天的毫秒数了，不需要自己算，列个公式出来就好，取余的意思就是剩下的毫秒数不够一天，继续算还剩多少小时，下面以此类推
  20.   var diffDate = Math.floor(diffTime / (1000 * 3600 * 24)); // 还剩多少天
  21.  
  22.   var diffHour = Math.floor(remain / (1000 * 3600));
  23.   remain = remain % (1000 * 3600);
  24.  
  25.   var diffMinute = Math.floor(remain / (1000 * 60));
  26.   remain = remain % (1000 * 60);
  27.  
  28.   var diffSecond = Math.floor(remain / (1000));
  29.   var str = diffDate + "天" + diffHour + "时" + diffMinute + "分" + diffSecond + "秒";
  30.   $("#time-different").innerHTML = str;
  31.  
  32.   // 如果不够1秒就继续倒数，否则停止
  33.   if (remain > 1000) {
  34.     setTimeout(display, 1000, date);
  35.   }
  36. }

上面代码基本上很好懂的，下面说一下要注意的地方：

1.parse() 返回的是1970年1月1日午夜到指定日期（字符串）的毫秒数。我上面的默认是到指定日期的00:00的倒计时，所以构造了Data要setHours()，否则默认是的8点

2.JavaScript中除法的结果默认是浮点数，就是我console.log(2/3);出来的结果是0.66666666，需要使用Math.floor向下取整

3.setTimeout要带参数，注意不要直接setTimeout(display(date), 1000);这样写，setTimeout详见JavaScript学习之setTimeout

4.getFullYear() 从 Date 对象以四位数字返回年份，所以最好就不要用getYear()。getMonth() 从 Date 对象返回月份是(0 ~ 11)，所以记得加一。

JavaScript学习之 倒计时的更多相关文章

  1. JavaScript学习（一） —— 环境搭建与JavaScript初探

    1.开发环境搭建 本系列教程的开发工具,我们采用HBuilder. 可以去网上下载最新的版本,然后解压一下就能直接用了.学习JavaScript,环境搭建是非常简单的,或者说,只要你有一个浏览器,一个 ...

  2. Web编程基础--HTML、CSS、JavaScript 学习之课程作业“仿360极速浏览器新标签页”

    Web编程基础--HTML.CSS.JavaScript 学习之课程作业"仿360极速浏览器新标签页" 背景: 作为一个中专网站建设出身,之前总是做静态的HTML+CSS+DIV没 ...

  3. JavaScript学习（3）：函数式编程

    在这篇文章里,我们讨论函数式编程. 什么是函数式编程?根据百度百科的描述,“函数式编程是种编程典范,它将电脑运算视为函数的计算.函数编程语言最重要的基础是 λ 演算(lambda calculus). ...

  4. JavaScript学习（2）：对象、集合以及错误处理

    在这篇文章里,我们讨论一下JavaScript中的对象.数组以及错误处理. 1. 对象 对象是JavaScript中的一种基本类型,它内部包含一些属性,我们可以对这些属性进行增删操作. 1.1 属性 ...

  5. JavaScript学习13 JavaScript中的继承

    JavaScript学习13 JavaScript中的继承 继承第一种方式:对象冒充 <script type="text/javascript"> //继承第一种方式 ...

  6. JavaScript学习12 JS中定义对象的几种方式

    JavaScript学习12 JS中定义对象的几种方式 JavaScript中没有类的概念,只有对象. 在JavaScript中定义对象可以采用以下几种方式: 1.基于已有对象扩充其属性和方法 2.工 ...

  7. JavaScript学习11 数组排序实例

    JavaScript学习11 数组排序实例 数组声明 关于数组对象的声明,以前说过:http://www.cnblogs.com/mengdd/p/3680649.html 数组声明的一种方式: va ...

  8. JavaScript学习10 JS数据类型、强制类型转换和对象属性

    JavaScript学习10 JS数据类型.强制类型转换和对象属性 JavaScript数据类型 JavaScript中有五种原始数据类型:Undefined.Null.Boolean.Number以 ...

  9. JavaScript学习09 函数本质及Function对象深入探索

    JavaScript学习09 函数本质及Function对象深入探索 在JavaScript中,函数function就是对象. JS中没有方法重载 在JavaScript中,没有方法(函数)重载的概念 ...

随机推荐

  1. CentOS 6.5 Apache+SVN使用户可以自己修改密码

    yum -y install php #安装php mkdir /var/www/svnadmin #建立页面目录 vi /var/www/svnadmin/index.php #创建index.ph ...

  2. spring入门案例分析及原理

    Springmvc执行原理: 一. 入门案例的执行流程 1. 当启动Tomcat服务器的时候,因为配置了load-on-startup标签,所以会创建DispatcherServlet对象,就会加载s ...

  3. html 输入框显示“小叉叉”的清空方法

    在IE10以下,我们的输入框input会出现小叉叉.怎么解决这个问题呢? 针对input框我们做一个处理 <style type="text/css"> input:: ...

  4. golang中函数类型

    今天看Martini文档,其功能列表提到完全兼容http.HandlerFunc接口,就去查阅了Go: net/http的文档,看到type HandlerFunc这部分,顿时蒙圈了.由于之前学习的时 ...

  5. 专访阿里云资深技术专家黄省江：中国SaaS公司的成功之路

    笔者采访中国SaaS厂商10多年,深感面对获客成本巨大.产品技术与功能成熟度不足.项目经营模式难以大规模复制.客户观念有待转变等诸多挑战,很多中国SaaS公司的经营状况都不容乐观. 7月26日,阿里云 ...

  6. Opencv中的阈值函数

    OpenCV基础——threshold函数的使用 图像的二值化就是将图像上的像素点的灰度值设置为0或255,这样将使整个图像呈现出明显的黑白效果. 参数原型 参数说明 src:源图像,可以为8位的灰度 ...

  7. 优雅的css写法

    一.利用好代码折叠 css也可以进行优雅的代码折叠而且会比html更好看 折叠后的效果: 这样就可以很舒服的把它折叠起来. 二.向Twitter Bootstrap学习 1. 学习的第一点就是用cla ...

  8. ACdream 1108（莫队）

    题目链接 The kth number Time Limit: 12000/6000MS (Java/Others)Memory Limit: 128000/64000KB (Java/Others) ...

  9. 读书笔记--Head First JQuery目录

    1.JQuery入门 2.选择器与方法 3.JQuery事件与函数 4.JQuery Web页面管理 5.JQuery效果与动画 6.JQuery与JavaScript 7.定制函数停工定制效果 8. ...

  10. Oil Deposits HDU - 1241 (dfs)

    Oil Deposits HDU - 1241 The GeoSurvComp geologic survey company is responsible for detecting undergr ...