日期练习：
完整代码如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>IFE ECMAScript</title> </head> <body> <p id="todayDate"></p> <h4>通过调整 select 选择的 年月日时分秒；判断选择时间和当前时间的时间差</h4> <select id="year-select"></select> <select id="month-select"></select> <select id="day-select"></select> <select id="hour-select"></select> <select id="minute-select"></select> <select id="second-select"></select> <p id="result-wrapper"></p> <h4>Date</h4> <ul> <li>getFullYear() 四位数返回年份</li> <li>getMonth() 返回月份 （0-11）0是一月</li> <li>getDate() 返回一个月中的某一天；几月几号的 几号</li> <li>getDay() 返回一周中的某一天（0--6）;0是周日；1是周一</li> <li>getHours() 返回小时 ( 0-23)</li> <li>getMinutes() 返回分钟 ( 0-59)</li> <li>getSeconds() 返回秒数 (0-59)</li> </ul> <p>setInterval(function(){showTime()},500)<br/>setTimeout(function(){showTime()},500)</p> <p>捋一遍思路：<br/> 1. select 用 js填充完成； buildOp()==buildOption 方法；<br/> 2. select 中需要注意的是。时间 "n<10" 需要填充 "0"+n;<br/> 3. 展示 resultWrap.innerHTML = “现在距离 xxxxx 时间 还有 xxxx 天时分秒”<br/> 4. select 每个的 onchange 都会牵扯到 resultWrap.innerHTML 内容的变化<br/> 5. select 改变中，有两个 id = year-select / month-select 的改动，会牵扯到 daySelect [月份。闰年]<br/> </p> <script> // select 创建选择时间 const yearSelect = document.querySelector("#year-select"); const monthSelect = document.querySelector("#month-select"); const daySelect = document.querySelector("#day-select"); const hourSelect = document.querySelector("#hour-select"); const minuteSelect = document.querySelector("#minute-select"); const secondSelect = document.querySelector("#second-select"); //显示当前时间 const todayDate = document.querySelector("#todayDate"); showTime(); /// 展示时间差 const resultWrap = document.querySelector("#result-wrapper"); // 用户一进来就应该看到默认的时间差 // 改变任意一个 select ；显示的天数 result-wrapper 内容都要改变 // 用户通过select 自己选择的时间 let selectTime = ""; let selects = document.querySelectorAll("select"); //获取时间差 let timeLeft = ""; //默认给定时间选择范围；填充 option buildOp(yearSelect,2000,2032); buildOp(monthSelect, 1,12); buildOp(daySelect,1,31); buildOp(hourSelect,0,23); buildOp(minuteSelect,0,59); buildOp(secondSelect,0,59); showDefaultTime(); function showDefaultTime(){ // 选取默认的时间 let yearValue = Number(yearSelect.value); let monthValue = Number(monthSelect.value); let dateValue = Number(daySelect.value); let hourValue = Number(hourSelect.value); let minuteValue = Number(minuteSelect.value); let secondValue = Number(secondSelect.value); let dayValue = new Date(yearValue,monthValue,dateValue).getDay(); // 将日期转化--获取时间差--展示 result selectTime = writeTime(yearValue,monthValue,dateValue,dayValue,hourValue,minuteValue,secondValue); resultWrap.innerHTML = "现在距离 "+ selectTime; let selectGetTime = new Date(yearValue,monthValue,dateValue,hourValue,minuteValue,secondValue) timeLength(selectGetTime); resultWrap.innerHTML += timeLeft; } // 计算一个时间距离当前时间的时间差 function timeLength(starTime){ //获取毫秒数之差 let now = new Date().getTime(); starTime = starTime.getTime(); let Dvalue = now - starTime; let dstring = ""; if (Dvalue > 0){ dstring = "已经过去"; } else { dstring = "还有"; } // 求绝对值。删除 - 负号 Dvalue = Math.abs(Dvalue); getTimeLength(Dvalue); function getTimeLength(dvalue){ let data = new Date(dvalue); //每天的毫秒数。返回剩下的天数 let msPerDay = 24*60*60*1000; let daysLeft = dvalue / msPerDay; daysLeft = Math.round(daysLeft); let hour = data.getHours(); let minute = data.getMinutes(); let second = data.getSeconds(); timeLeft = dstring + " "+daysLeft+"天"+hour+"小时"+minute+"分"+second+"秒"; } } // 根据 select id ;展示范围;追加 option function buildOp(select,n,m){ // 这部分很重要。每次创建都需要置空 select.innerHTML =""; // 循环遍历。 attr value innerHTML for(let i=n; i<m+1; i++){ let option = document.createElement("option"); let value = document.createAttribute("value"); value.value=i; option.setAttributeNode(value); option.textContent = i; select.appendChild(option); } } // 针对小时；单独循环之后改内容 // 小时，从00--23 字符串格式； // // 时间补齐。直接用?: 判断 let hourOp = hourSelect.querySelectorAll("option"); for(let i=0; i< hourOp.length; i++){ let hour = Number(hourOp[i].value); hourOp[i].innerHTML = (hour < 10 ? ("0"+hour) : hour); } // 每个 select 改变都会触发展示+时间差的计算 // 这里比较特殊的是 年和月份的选择，会导致 date 的展示不同 for(let i=0; i<selects.length; i++){ selects[i].onchange = function(){ if(selects[i].id=="year-select"){ let yearValue = Number(yearSelect.value); let monthValue = Number(monthSelect.value); showDay(yearValue,monthValue); } if(selects[i].id =="month-select"){ let yearValue = Number(yearSelect.value); let monthValue = Number(monthSelect.value); showDay(yearValue,monthValue); } showDefaultTime(); } } // 闰年；2月29天；非闰年；2月28天 // 非整百年，被4整除是 闰年 // 能被4整除但不能被100整除； 能被100整除也能被 400 整除 // 当年、月份改变的时候。每个月的 day 要相应改变 // 根据年月来确定 月的day 天数 function showDay(year,month){ let monthMax = [1,3,5,7,8,10,12]; //31天 let monthMin = [4,6,9,11]; // 30天 if(monthMax.indexOf(month) >-1){ buildOp(daySelect,1,31); } else if(monthMin.indexOf(month) >-1){ buildOp(daySelect,1,30); } else if(month == 2){ if((year%4 ==0 && year%100 != 0) ||(year %100==0 && year%400 ==0)){ buildOp(daySelect,1,29); } else { buildOp(daySelect,1,28); } } } // 显示当前时间 // setInterval( function(){showTime()},500) // setTimeout(function(){showTime()}, 500)循环实时变更时间 showTime(); function showTime(){ let day = new Date(); let year = day.getFullYear(); let month = day.getMonth(); let date = day.getDate(); let d = day.getDay() let h = day.getHours(); let m = day.getMinutes(); let s = day.getSeconds(); let am = "AM"; month = writeNum(month+1); date = writeNum(date); m = writeNum(m); s = writeNum(s); writeTime(year,month,date,d,h,m,s); todayDate.innerHTML =writeTime(year,month,date,d,h,m,s); setTimeout(function(){showTime()},500) } // 返回年月日星期 时分秒 function writeTime(year,month,date,day,hour,minute,second){ let html = year+"-"; html += month +"-"+date+" "+writeDayHan(day)+" "+hour+":"+minute+":"+second+" "; return html; } // getDay() 0-6 汉化 function writeDayHan(n){ switch(n){ case 0: d = "周日"; break; case 1: d = "周一"; break; case 2: d = "周二"; break; case 3: d = "周三"; break; case 4: d = "周四"; break; case 5: d = "周五"; break; case 6: d = "周六"; break; } return d; } // 单数改成 0+n function writeNum(n){ if(n<10){ n = "0"+n; } return n; } </script> </body> </html>