基于DatePicker的年龄计算器代码优化及双日期计算咨询

我是编程新手，写了一款基于DatePicker的年龄计算器，目前能通过输入出生日期计算年龄（示例：选择1980年2月19日，返回“该人士43岁零293天”）。已经根据建议调整过代码，现在想寻求资深开发者的优化建议，同时咨询如何添加双DatePicker来计算任意两个日期的时间跨度。以下是我的代码：

<summary>Age Calculator</summary>

<p>This calculator will calculate the age of an individual, given their date of birth.</p>

<ul>
    <li>Enter the individual&#39;s <strong>Date of birth</strong> then click the <strong>Submit</strong> button.&nbsp;

        <ul>
            <li>Use the arrows or type the month, day and year.</li>
        </ul>
    </li>
    <li>Enter another individual&#39;s <strong>Date of birth</strong> then click the <strong>Submit</strong> button again to run the calculation again with a different value.</li>
</ul>
<script>
    function submitBirthday()
    {
        var minutes = 1000 * 60;
        var hours = minutes * 60;
        var days = hours * 24;
        var years = days * 365;
        var birthday = Date.parse(document.getElementById("thisBirthday").value);
        var dateNow = new Date();
        var YearsOld = Math.round((dateNow - birthday) / years);
        var YearsOld1 = Math.floor((dateNow - birthday) / years);
        var DaysOld = Math.floor((dateNow - birthday) / days);
        var days1 = Math.floor((DaysOld / 365.2425));
        var days2 = DaysOld / 365.2425;
        var days3 = parseFloat((days2 - days1)).toFixed(5);
        var days4 = Math.floor((days3 / 0.002738));


        document.getElementById("displayBirthday").innerHTML = ("This individual is " + days1 + " years and " + days4 + " days old.");
    }

</script>
<input type="date" id="thisBirthday" value="">
<button onclick="submitBirthday();">Submit</button>
<hr>
<div id="displayBirthday">
    <br>
</div>

代码优化建议 #

1. 日期计算逻辑精确化 #

原代码用固定的365或365.2425天计算年份，会忽略闰年、不同月份天数差异，导致结果不准确。建议直接通过Date对象的年、月、日属性计算，同时处理闰年的影响：

// 计算两个日期的年数和剩余天数
function calculateDateSpan(startDate, endDate) {
    let years = endDate.getFullYear() - startDate.getFullYear();
    let months = endDate.getMonth() - startDate.getMonth();
    let days = endDate.getDate() - startDate.getDate();

    // 处理未到对应月份/日期的情况
    if (months < 0 || (months === 0 && days < 0)) {
        years--;
        months += 12;
        // 补上上月剩余天数
        const lastMonthEnd = new Date(endDate.getFullYear(), endDate.getMonth(), 0);
        days += lastMonthEnd.getDate();
    }

    // 计算总天数并扣除闰年额外天数，得到精确剩余天数
    const totalDays = Math.floor((endDate - startDate) / (1000 * 60 * 60 * 24));
    const leapYearCount = countLeapYears(startDate, endDate);
    const remainingDays = totalDays - (years * 365 + leapYearCount);

    return { years, days: remainingDays };
}

// 统计两个日期之间的闰年数量
function countLeapYears(start, end) {
    let count = 0;
    for (let year = start.getFullYear(); year <= end.getFullYear(); year++) {
        const isLeap = (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0;
        if (isLeap) {
            const leapDay = new Date(year, 1, 29);
            // 确认闰年2月29日在日期范围内
            if ((year === start.getFullYear() && leapDay >= start) || 
                (year === end.getFullYear() && leapDay <= end) || 
                (year > start.getFullYear() && year < end.getFullYear())) {
                count++;
            }
        }
    }
    return count;
}

2. 变量命名与代码结构优化 #

• 原变量名（如YearsOld1、days4）表意模糊，建议改为totalYears、remainingDays这类清晰名称；
• 将计算逻辑与DOM操作分离，比如把日期计算封装成独立函数，submitBirthday只负责获取输入、调用计算、更新页面，提升代码可读性和可维护性。

3. 添加输入验证 #

增加对用户输入的检查，避免空值或无效日期导致的错误：

function submitBirthday() {
    const birthdayInput = document.getElementById("thisBirthday");
    const birthdayStr = birthdayInput.value;
    if (!birthdayStr) {
        document.getElementById("displayBirthday").innerHTML = "请选择出生日期";
        return;
    }

    const birthday = new Date(birthdayStr);
    const now = new Date();
    if (birthday > now) {
        document.getElementById("displayBirthday").innerHTML = "出生日期不能晚于当前日期";
        return;
    }

    const { years, days } = calculateDateSpan(birthday, now);
    document.getElementById("displayBirthday").innerHTML = `该人士${years}岁零${days}天`;
}

双DatePicker实现任意日期跨度计算 #

1. 修改HTML结构 #

添加第二个日期选择器和对应的结果展示区域：

<!-- 原年龄计算部分保留 -->
<input type="date" id="thisBirthday" value="">
<button onclick="submitBirthday();">计算年龄</button>
<hr>
<div id="displayBirthday"></div>

<!-- 新增双日期跨度计算 -->
<h3>任意日期跨度计算</h3>
<input type="date" id="dateStart" value="">
<input type="date" id="dateEnd" value="">
<button onclick="calculateSpanBetweenDates();">计算跨度</button>
<div id="displaySpanResult"></div>

2. 实现跨度计算函数 #

复用之前的calculateDateSpan函数，处理两个日期的输入：

function calculateSpanBetweenDates() {
    const startStr = document.getElementById("dateStart").value;
    const endStr = document.getElementById("dateEnd").value;

    if (!startStr || !endStr) {
        document.getElementById("displaySpanResult").innerHTML = "请选择两个日期";
        return;
    }

    let startDate = new Date(startStr);
    let endDate = new Date(endStr);

    // 确保起始日期早于结束日期
    if (startDate > endDate) {
        [startDate, endDate] = [endDate, startDate];
    }

    const { years, days } = calculateDateSpan(startDate, endDate);
    document.getElementById("displaySpanResult").innerHTML = `两个日期相差${years}年零${days}天`;
}

内容的提问来源于stack exchange，提问作者Js Smith