本文实例为大家分享了Javascript实现简易天数计算器的具体代码，供大家参考，具体内容如下

效果图：

功能：

1. 支持选择日期；

2. 自动计算闰年；

3. 支持使用当前日期。

代码：

(1)html文件：

简易天数计算器

开始日期

年

月

日

使用当前日期

结束日期

年

月

日

使用当前日期

计算天数

/**

* 根据年和月更新日列表.

* @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;

}

}

(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));

//默认选中2016年

if (i == 2016) {

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]);

}

/**

* 计算天数，日期格式为 2016/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()];

}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。