js计算日期的时间差（天、时、分、秒）
内容要求：（下面的HTML，有一堆Select用于选择日期和时间，在选择后，实时在 id 为 result-wrapper 的 p 标签中显示所选时间和当前时间的差值。）
HTML代码：
现在距离 2001年1月1日星期X HH:MM:SS 还有 X 天 X 小时 X 分 X 秒
1、自行调整html内容（补全option）；
2、当变更任何一个select选择时，更新 result-wrapper 的内容；
3、当所选时间早于现在时间时，文案为 现在距离 “所选时间” 已经过去 xxxx
4、当所选时间晚于现在时间时，文案为 现在距离 “所选时间” 还有 xxxx
5、注意当前时间经过所选时间时候的文案变化
6、注意选择不同月份的时候，日期的可选范围不一样，比如1月可以选31天，11月只有30天，注意闰年
7、同样，需要注意，通过优雅的函数封装，使得代码更加可读且可维护
话不多说，开始： 一、直接优化一下html，反正都是要添加option，emmmm
现在距离 2001年1月1日星期X HH:MM:SS 还有 X 天 X 小时 X 分 X 秒
二、js代码
var select = document.querySelectorAll('select');
var para = document.querySelector('p');
var selectYear = document.querySelector('#year-select');
var selectMonth = document.querySelector('#month-select');
var selectDat = document.querySelector('#day-select');
var selectHour = document.querySelector('#hour-select');
var selectMinute = document.querySelector('#minite-select');
var selectSecond = document.querySelector('#second-select');
//给年份和月份的select项绑定方法c，根据年月改变天数
select[0].addEventListener('change', c);
select[1].addEventListener('change', c);
↑ 先把dom节点获取到手
//增添option节点的方法
function addItems(firstValue, parentNode, lastValue) {
for (var i = firstValue; i <= lastValue; i++) {
var option = document.createElement('option');
option.setAttribute('value', i);
if (i < 10) {
i = '0' + i;
}
option.innerHTML = i;
parentNode.appendChild(option);
}
}
↑ 增添option节点的方法
//window加载时，先把DOM补全
window.onload = function() {
addItems(1971, select[0], 2099);
addItems(1, select[1], 12);
addItems(1, select[2], 31);
addItems(0, select[3], 23);
addItems(0, select[4], 59);
addItems(0, select[5], 59);
}
↑ 补全DOM
//select域被改变时的事件，结果是改变p标签的内容
document.body.onchange = function(e) {
var e = e || window.event;
var target = e.target || e.srcElement;
if (target.nodeName.toLowerCase() == 'select') {
para.innerHTML = res();
}
}
↑ 每选择一次select，触发一次p文本的更新
//闰年2月份29天，平年2月份28天。大月31天，小月30天
function c(){
len = select[2].children.length;
//先把之前的option删除掉，不然日期是会累加在一起地哦！
for (var i = 0; i < len; i++) {
//这里的select[2].childNodes[0]一定要注意，不能写成select[2].childNodes[i]，否则删除不完
select[2].removeChild(select[2].childNodes[0]);
}
if (selectMonth.value == 2) {
if (selectYear.value % 4 == 0 || selectYear.value % 400 == 0) {
addItems(1, select[2], 29);
}else{
addItems(1, select[2], 28);
}
}else if (selectMonth.value == 4 || selectMonth.value == 6 || selectMonth.value == 9 || selectMonth.value == 11) {
addItems(1, select[2], 30);
}else{
addItems(1, select[2], 31)
}
}
↑ 平年、闰年、月份下的不同天数
//获取当前日期周天
function week() {
var day = new Date().getDay();
var arr = ['日','一','二','三','四','五','六'];
for (var i = 0, len = arr.length; i< len; i++) {
if (i == day) {
return arr[i];
}
}
}
↑ 今天是周几
//获取选择日期周天
function selectWeek(s) {
var day = new Date(s).getDay();
var arr = ['日','一','二','三','四','五','六'];
for (var i = 0, len = arr.length; i < len; i++) {
if (i == day) {
return arr[i];
}
}
}
↑ 所选日期是周几
//日期差方法，返回相差天、时、分、秒
function diffDate(obj1, obj2) {
var diff = obj2 - obj1;
var dd = Math.floor(diff/(24*3600*1000));
var rest1 = diff%(24*3600*1000);
var dh = Math.floor(rest1/(3600*1000));
var rest2 = rest1%(3600*1000);
var dm = Math.floor(rest2/(60*1000));
var rest3 = rest2%(60*1000);
var ds = Math.floor(rest3/1000);
result = ' ' + dd + '天' + dh + '小时' + dm + '分' + ds + '秒'
return result;
}
↑ 两个日期的时间差
//最终结果方法
function res() {
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth() + 1;
var dat = date.getDate();
var hour = date.getHours();
var minute = date.getMinutes();
var second = date.getSeconds();
//val是所选日期的字符串
var val = selectYear.value + '/' + selectMonth.value + '/' + selectDat.value + '/' + selectHour.value + ':' + selectMinute.value + ':' + selectSecond.value;
var dateSelect = new Date(val);
//两个日期的毫秒数
var date1 = dateSelect.getTime();
var date2 = date.getTime();
if (date1 <= date2) {
return '现在是 ' + year + '年' + month + '月' + dat + '日 星期' + week() + ' ' + hour + ':'+ minute + ':' + second +', 距离' + selectYear.value + '年' + selectMonth.value + '月' + selectDat.value + '日 星期' +selectWeek(val) + ' ' + selectHour.value + ':' + selectMinute.value + ':' + selectSecond.value + ' 已经过去' + diffDate(date1, date2);
}else {
return '现在是 ' + year + '年' + month + '月' + dat + '日 星期' + week() + ' ' + hour + ':'+ minute + ':' + second +', 距离' + selectYear.value + '年' + selectMonth.value + '月' + selectDat.value + '日 星期' +selectWeek(val) + ' ' + selectHour.value + ':' + selectMinute.value + ':' + selectSecond.value + ' 还有' + diffDate(date2, date1);
}
}
↑ 最终结果的返回
初学js，感觉内容还是很乱，勿怪！
遇到的问题：
1、基础不扎实，导致很多东西用不顺手
2、删除子元素节点的时候，卡了很久。（平年、闰年、月份下的不同天数中：select[2].childNodes[0]每次删除第一个子元素就行了。）
3、函数的封装，感觉不完美，希望大神提携。