JavaScript学习之 倒计时
倒计时很常见，例如离XX活动还有XX天XX小时XX分XX秒，然后逐秒减少，实现很简单，我只是想记录这过程中的一点小坑。
先上代码：
<html> <head> <meta charset="UTF-8" > <title>task0002_2</title> </head> <body> <input id="input-date" type="text" /> <button id="btn">点击</button> <p> 距离<span id="show-date">YYYY年MM月DD日</span>还有<span id="time-different">XX天XX小时XX分XX秒</span> </p> <script src="./js/util.js"></script> <script src="./js/task0002_2.js"></script> </body> </html>
在按照xxxx-xx-xx这样的格式输入之后，点击按钮，下面就开始倒计时。
实现思路很简单：按照输入的时间转换成Date，然后获取现在的时间，两个时间相减，再转换成以天/时/分/秒为单位的就好了。
现在看看我的JS代码，我没有做格式错误的判断，默认输入的时间格式是正确的。
addEvent($("#btn"), "click", displayTime); // addEvent是我自己封装的函数，其实就是元素的事件绑定 function displayTime() { var $inputDate = $("#input-date").value; // 获取日期字符串
var date = new Date(Date.parse($inputDate)); // 用日期字符串构造Date date.setHours(0); date.setMinutes(0); date.setSeconds(0); console.log(date.toString()); var str = date.getFullYear().toString() + "年" + (date.getMonth()+1).toString() + "月" + date.getDate().toString() + "日"; $("#show-date").innerHTML = str; display(date); } // 倒计时 function display(date) { var nowDate = new Date(); console.log(nowDate.toString()); var diffTime = date.getTime() - nowDate.getTime(); // 相减后单位是毫秒 var remain = diffTime % parseInt(1000 * 3600 * 24); // 1000 * 3600 * 24， 因为单位是毫秒，这就是1天的毫秒数了，不需要自己算，列个公式出来就好，取余的意思就是剩下的毫秒数不够一天，继续算还剩多少小时，下面以此类推 var diffDate = Math.floor(diffTime / (1000 * 3600 * 24)); // 还剩多少天 var diffHour = Math.floor(remain / (1000 * 3600)); remain = remain % (1000 * 3600); var diffMinute = Math.floor(remain / (1000 * 60)); remain = remain % (1000 * 60); var diffSecond = Math.floor(remain / (1000)); var str = diffDate + "天" + diffHour + "时" + diffMinute + "分" + diffSecond + "秒"; $("#time-different").innerHTML = str; // 如果不够1秒就继续倒数，否则停止 if (remain > 1000) { setTimeout(display, 1000, date); } }
上面代码基本上很好懂的，下面说一下要注意的地方：
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)，所以记得加一。
