效果图：
功能：
1. 支持选择日期；
2. 自动计算闰年；
3. 支持使用当前日期。
代码：
（1）html文件：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>简易天数计算器</title><script type="text/javascript" src="js/dayCounter.js"></script></head><body onload="initView(['year', 'month', 'day']); initView(['year2', 'month2', 'day2'])"><form>开始日期<select id="year" onchange="update(1)"></select>年<select id="month" onchange="update(1)"></select>月<select id="day"></select>日<input type="checkbox" id="startCb" onclick="useTodayAsStart()">使用当前日期<br/>结束日期<select id="year2" onchange="update(2)"></select>年<select id="month2" onchange="update(2)"></select>月<select id="day2"></select>日<input type="checkbox" id="endCb" onclick="useTodayAsEnd()">使用当前日期<br/><br/></form><button onclick="calDays('dayCountText')">计算天数</button><p id="dayCountText" style="margin-left: 10px;"></p><script type="text/javascript">/*** 根据年和月更新日列表.* @param flag 1-开始日期 2-结束日期*/function update(flag) {if (flag == 1) {updateDaySelect(['year', 'month', 'day']);} else {updateDaySelect(['year2', 'month2', 'day2']);}}//计算天数function calDays(id) {var s = getDateStr(['year', 'month', 'day']);var e = getDateStr(['year2', 'month2', 'day2']);document.getElementById(id).innerHTML = calDayCount(s, e);}//使用当前日期作为开始日期function useTodayAsStart() {var checked = document.getElementById('startCb').checked;useToday(1, checked);}//使用当前日期作为结束日期function useTodayAsEnd() {var checked = document.getElementById('endCb').checked;useToday(2, checked);}/*** 使用当前日期。* @param flag 1-开始日期 2-结束日期* @param checked true-使用当前时期 false-取消使用当前日期*/function useToday(flag, checked) {var elements;if (flag == 1) {elements = getElements(['year', 'month', 'day']);} else {elements = getElements(['year2', 'month2', 'day2']);}if (checked) {//使用当前日期var ymd = getTodayYMD();var a;//设置年var yEle = elements[0];for (a = 0; a < yEle.options.length; a++) {if (yEle.options[a].value == ymd[0]) {yEle.options[a].selected = "selected";break;}}//设置月var mEle = elements[1];for (a = 0; a < mEle.options.length; a++) {if (mEle.options[a].value == ymd[1] + 1) {mEle.options[a].selected = "selected";break;}}//根据年和月更新日列表update(flag);//设置日var dEle = elements[2];for (a = 0; a < dEle.options.length; a++) {if (dEle.options[a].value == ymd[2]) {dEle.options[a].selected = "selected";break;}}}for (var i = 0; i < elements.length; i++) {elements[i].disabled = checked ? "disabled" : undefined;}}</script></body></html>
（2）外部js文件：
/*** dayCounter.* Created by Jack on 16-11-29.*//*** 通过元素的id获取Element.* @param arr id数组.*/function getElements(arr) {var elements = [];for (var i = 0; i < arr.length; i++) {elements.push(document.getElementById(arr[i]));}return elements;}//初始化年月日function initView(arr) {var elements = getElements(arr);//年for (var i = 2048; i >= 1949; i--) {var option = document.createElement("option");option.setAttribute("value", "" + i);option.appendChild(document.createTextNode("" + i));//默认选中if (i == ) {option.setAttribute("selected", "selected")}elements[0].appendChild(option);}//月for (var a = 1; a <= 12; a++) {var optionM = document.createElement("option");optionM.setAttribute("value", "" + a);optionM.appendChild(document.createTextNode((a < 10 ? "0" : "") + a));elements[1].appendChild(optionM);}//日initDay(elements[2], 31, 1);}function initDay(day, dayCount, selectedValue) {for (var i = 1; i <= dayCount; i++) {var optionD = document.createElement("option");optionD.setAttribute("value", "" + i);if (i == selectedValue) {optionD.setAttribute("selected", "selected");}optionD.appendChild(document.createTextNode((i < 10 ? "0" : "") + i));day.appendChild(optionD);}}//当年和月发生变化时，更新日function updateDaySelect(arr) {var elements = getElements(arr);//选中年var y = elements[0].options[elements[0].selectedIndex].value;//选中月var m = elements[1].options[elements[1].selectedIndex].value;if (m == 1 || m == 3 || m == 5 || m == 7 || m == 8 || m == 10 || m == 12) {setupDay(elements[2], 31);} else if (m == 4 || m == 6 || m == 9 || m == 11) {setupDay(elements[2], 30);} else {//判断是否为闰年if ((y % 4 == 0 && y % 100 != 0 ) || y % 400 == 0) {setupDay(elements[2], 29);} else {setupDay(elements[2], 28);}}}//更新 日 select元素function setupDay(day, dayCount) {//判断是否需要刷新if (day.options.length == dayCount) {//无需刷新return;}//原来选中的 日var oldValue = day.options[day.selectedIndex].value;if (oldValue > dayCount) {oldValue = dayCount;}//首先移除所有子元素for (var i = day.childNodes.length - 1; i >= 0; i--) {day.removeChild(day.childNodes.item(i))}//添加元素initDay(day, dayCount, oldValue);}function getSelectedText(ele) {return ele.options[ele.selectedIndex].text;}function getDateStr(arr) {var elements = getElements(arr);return getSelectedText(elements[0]) + "/" + getSelectedText(elements[1]) + "/" + getSelectedText(elements[2]);}/*** 计算天数，日期格式为 /08/09* @param startDay 开始日期* @param endDay 结束日期*/function calDayCount(startDay, endDay) {var s = new Date(startDay + " 00:00:00").getTime();var e = new Date(endDay + " 00:00:00").getTime();return (e - s) / 86400000;}function getTodayYMD() {var date = new Date();return [date.getFullYear(), date.getMonth(), date.getDate()];}
如果觉得《Javascript：简易天数计算器》对你有帮助，请点赞、收藏，并留下你的观点哦！
