倒计时很常见，例如离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)，所以记得加一。
时间： 2024-10-10 20:41:37