为了准确计算延迟退休时间，我做了一个退休年龄计算器

延迟退休计算方法

原本退休分为三种情况，男性，女工人，女干部

男性：退休年龄为60岁。
女干部：退休年龄为55岁。
女工人：退休年龄为50岁。

现在延迟以后（根据2024年9月13日公布的规则）

男性：退休年龄为63岁。
女干部：退休年龄为58岁。
女工人：退休年龄为55岁。

具体的退休时间可以参考以下图片：
在这里插入图片描述

延迟退休计算器

代码实现：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>退休年龄计算器</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100">
    <div class="max-w-2xl mx-auto p-8">
        <div class="bg-white p-6 rounded-lg shadow-lg">
            <div class="mb-4">
                <label class="block text-gray-700 text-lg font-bold mb-2">性别/职务：</label>
                <select id="gender" class="block w-full p-2 border border-gray-300 rounded-lg">
                    <option value="male">男性</option>
                    <option value="female_worker">女性-工人</option>
                    <option value="female_cadre">女性-干部</option>
                </select>
            </div>
            <div class="mb-4">
                <label class="block text-gray-700 text-lg font-bold mb-2">出生日期：</label>
                <input type="month" id="birthDate" class="block w-full p-2 border border-gray-300 rounded-lg" />
            </div>
            <div class="flex space-x-4 mb-6">
                <button id="calculateBtn" class="bg-blue-500 text-white py-2 px-4 rounded-lg">开始计算</button>
                <button id="clearBtn" class="bg-gray-500 text-white py-2 px-4 rounded-lg">清除</button>
            </div>
            <div id="result" class="mt-6">
                <table class="w-full bg-white shadow-md rounded-lg overflow-hidden">
                    <tbody>
                        <tr class="border-b">
                            <td class="p-4 text-gray-700">退休年龄</td>
                            <td id="retirementAge" class="p-4 text-blue-600"></td>
                        </tr>
                        <tr>
                            <td class="p-4 text-gray-700">退休日期</td>
                            <td id="retirementDate" class="p-4 text-red-600"></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <script>
        document.getElementById('calculateBtn').addEventListener('click', function() {
            const genderType = document.getElementById('gender').value;
            const birthDateValue = document.getElementById('birthDate').value;
            if (birthDateValue) {
                const birthDate = new Date(birthDateValue);
                const birthYear = birthDate.getFullYear();
                const birthMonth = birthDate.getMonth() + 1;
                let retirementBaseAge = 50; 
                let additionalMonths = 0;

                if (genderType === 'male') {
                    if (birthYear >= 1965 && birthYear <= 1976) {
                        const startYear = 1965;
                        additionalMonths = calculateAdditionalMonths(birthYear, birthMonth, startYear, 4) + 1;
                    } else if (birthYear > 1976) {
                        additionalMonths = 36; 
                    }
                    retirementBaseAge = 60; 
                } else if (genderType === 'female_cadre') {
                    if (birthYear >= 1970 && birthYear <= 1981) {
                        const startYear = 1970;
                        additionalMonths = calculateAdditionalMonths(birthYear, birthMonth, startYear, 4) + 1;
                    } else if (birthYear > 1981) {
                        additionalMonths = 36; 
                    }
                    retirementBaseAge = 55;
                } else if (genderType === 'female_worker') {
                    if (birthYear >= 1975 && birthYear <= 1984) {
                        const startYear = 1975;
                        additionalMonths = calculateAdditionalMonths(birthYear, birthMonth, startYear, 2) + 1;
                    } else if (birthYear > 1984) {
                        additionalMonths = 60; 
                    }
                    retirementBaseAge = 50; 
                }

                const totalMonths = additionalMonths % 12;
                const additionalYears = Math.floor(additionalMonths / 12);
                const retirementYear = birthYear + retirementBaseAge + additionalYears;
                const retirementMonth = birthMonth - 1 + totalMonths;
                const retirementDate = new Date(retirementYear, retirementMonth, 1);

                document.getElementById('retirementAge').innerText = `${retirementBaseAge + additionalYears}岁${totalMonths}个月`;
                document.getElementById('retirementDate').innerText = `${retirementDate.getFullYear()}年${retirementDate.getMonth() + 1}月`;
            } else {
                alert("请选择出生日期！");
            }
        });

        function calculateAdditionalMonths(year, month, startYear, interval) {
            let monthsFromStart = (year - startYear) * 12 + month - 1;
            return Math.floor(monthsFromStart / interval); 
        }

        document.getElementById('clearBtn').addEventListener('click', function() {
            document.getElementById('retirementAge').innerText = '';
            document.getElementById('retirementDate').innerText = '';
            document.getElementById('birthDate').value = '';
        });
    </script>


</body>
</html>