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

延迟退休计算方法

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

  • 男性:退休年龄为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>

在线地址:https://black1099.github.io/Delaying-Retirement-Age-Calculator/

使用说明:部分浏览器不支持直接选择日期,可以在日期中自己输入,格式为2024-09

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/875576.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

一次开发,多端部署--实例二

一、视觉风格 1、分层参数 使用了分层参数后&#xff0c;当系统切换深色模式时&#xff0c;字体和背景也可以自适应。 Row() {Column() {Text(分层参数)// 分层参数在sysResource包&#xff0c;属于系统参数&#xff0c;全局可用.fontColor($r(sys_color.ohos_id_color_text_pr…

JavaScript模块化——ES6模块化规范

作者&#xff1a;CSDN-PleaSure乐事 欢迎大家阅读我的博客 希望大家喜欢 使用环境&#xff1a;vscode Chrome浏览器 1.ES6 1.1ES6介绍 ES6的全称是ECMAScript 6&#xff0c;也称为ES2015&#xff0c;是JavaScript的一个重要版本&#xff0c;它引入了许多新特性和改进&#xf…

云计算实训43——部署k8s基础环境、配置内核模块、基本组件安装

一、前期系统环境准备 1、关闭防火墙与selinux [rootk8s-master ~]# systemctl stop firewalld[rootk8s-master ~]# systemctl disable firewalldRemoved symlink /etc/systemd/system/multi-user.target.wants/firewalld.service. Removed symlink /etc/systemd/system/dbus…

云渲染与AI渲染分别是什么?两者的优势对比

云渲染和AI渲染是两种先进的渲染技术&#xff0c;它们各自具有独特的优势和应用场景。下面针对两种情况来简单说明下。 1、云渲染&#xff1a; - 定义&#xff1a;云渲染是一种利用远程服务器(云端)来处理和生成渲染效果的技术。它允许用户将计算密集型的任务转移到云端&#…

uniapp网络延迟优化之骨架屏

文章目录 前言uniapp网络延迟优化之骨架屏 一、骨架屏是什么&#xff1f;二、使用步骤1.在微信开发者工具生成骨架屏文件2.转成vue组件3.组件中使用4.效果展示4.开发时遇到的问题&#xff1f; 总结 前言 uniapp网络延迟优化之骨架屏 一、骨架屏是什么&#xff1f; 骨架屏的主…

C++ | Leetcode C++题解之第403题青蛙过河

题目&#xff1a; 题解&#xff1a; class Solution { public:bool canCross(vector<int>& stones) {int n stones.size();vector<vector<int>> dp(n, vector<int>(n));dp[0][0] true;for (int i 1; i < n; i) {if (stones[i] - stones[i -…

卷积神经网络经典模型架构简介

【图书推荐】《PyTorch深度学习与企业级项目实战》-CSDN博客 《PyTorch深度学习与企业级项目实战&#xff08;人工智能技术丛书&#xff09;》(宋立桓&#xff0c;宋立林)【摘要 书评 试读】- 京东图书 (jd.com) ImageNet是一个包含超过1 500万幅手工标记的高分辨率图像的数据…

Redis——常用数据类型List

目录 List列表常用命令lpushlpushxrpushrpushlrangelpoprpoplindexlinsertllenlremltrim key start stoplset 阻塞版本命令blpopbrpop list的编码方式list的应用 List列表 Redis中的list相当于数组&#xff0c;或者 顺序表&#xff0c;一些常用的操作可以通过下面这张图来理解…

ubuntu 遇到的一些问题及解决办法

一、“E: 无法定位软件包” 产生该问题的安全提示原因有很多。如网络链接问题、apt 源过期了。 解决方法&#xff1a; 1. 备份 /etc/apt/sources.list 文件 cp /etc/apt/sources.list /etc/apt/sources.list.old 2. 打开文件 gedit /etc/apt/sources.list 3. 添加清华源…

PHP一键约课高效健身智能健身管理系统小程序源码

一键约课&#xff0c;高效健身 —— 智能健身管理系统让健康触手可及 &#x1f3cb;️‍♀️ 告别繁琐&#xff0c;一键开启健身之旅 你还在为每次去健身房前的繁琐预约流程而烦恼吗&#xff1f;现在有了“一键约课高效健身智能健身管理系统”&#xff0c;所有问题都迎刃而解…

SaaS化多租户实现的两种方法

SaaS化多租户实现的两种方法 SaaS系统的定义 SaaS&#xff0c;全称为Software-as-a-Service&#xff08;软件即服务&#xff09;&#xff0c;是一种基于云计算的软件交付模式。而SaaS系统&#xff0c;即是通过这种模式提供给用户的软件系统。即多租户系统&#xff0c;每个租户…

Leetcode Hot 100刷题记录 -Day15(螺旋矩阵)

螺旋矩阵 问题描述&#xff1a; 给你一个 m 行 n 列的矩阵 matrix &#xff0c;请按照 顺时针螺旋顺序 &#xff0c;返回矩阵中的所有元素。 示例 1&#xff1a; 输入&#xff1a;matrix [[1,2,3],[4,5,6],[7,8,9]]输出&#xff1a;[1,2,3,6,9,8,7,4,5] 示例 2&#xff1a; 输…

WebGL系列教程七(二维及三维旋转、平移、缩放)

目录 1 前言2 二维2.1 平移2.2 旋转2.3 缩放 3 三维3.1 平移3.2 旋转3.2.1 绕 X X X 轴旋转3.2.2 绕 Y Y Y 轴旋转3.2.3 绕 Z Z Z 轴旋转3.2.4 绕任意轴旋转 3.3 缩放 4 WebGL中怎么实现旋转、平移、缩放4.1 声明顶点着色器和片元着色器4.2 计算旋转矩阵4.3 绘制立方体并进行…

基于Matlab的模拟答题卡识别阅卷可以识别指定答题卡的各个部分-界面

识别指定答题卡的各个部分-界面-如学号&#xff0c;准考证号&#xff0c;客观题答案&#xff0c;主观题分数等用户可以在Excel中自行设置标准答案&#xff0c;并对六十题客观题进行批改&#xff0c;并显示分数。 项目介绍 本项目旨在开发一个基于MATLAB的答题卡识别阅卷系统&a…

认识泛型和包装类

认识泛型和包装类 包装类基本数据类型和对应的包装类装箱和拆箱自动装箱和自动拆箱 什么是泛型引出泛型语法 泛型类的使用语法示例类型推导 裸类型(Raw Type)说明 泛型如何编译的擦除机制 泛型的上界语法示例复杂示例 泛型方法定义方法示例使用类型推导和不用类型推导静态的泛型…

IO模型---BIO、NIO、IO多路复用、AIO详解

本篇将想给详细解释一下什么是BIO、NIO、IO多路复用以及AIO~ 同步的阻塞(BIO)和非阻塞(NIO)的区别 BIO&#xff1a;线程发来IO请求后&#xff0c;一直阻塞着IO线程&#xff0c;需要缓冲区这边数据准备好之后&#xff0c;才会进行下一步的操作。 举个&#x1f330;&#xff1…

UE5学习笔记21-武器的射击功能

一、创建C类 创建武器子弹的类&#xff0c;创建生产武器子弹的类&#xff0c;创建弹壳的类&#xff0c;生产武器子弹的类的父类是武器的类 创建后如图&#xff0c;ProjectileMyWeapon类(产生子弹的类)继承自weapon类&#xff0c;Projectile(子弹的类)&#xff0c;Casing(弹壳声…

如何使用QT完成记事本程序的UI界面布局

每日QT技巧查询表-CSDN博客 会持续更新记事本编写的全部过程&#xff0c;关注不迷路 一、相关控件 ①水平和垂直布局 ②按键 ③文本框 ④水平弹簧 ⑤标签 ⑥Widget 二、控件使用方法 1、PushButton 拖出三个按键&#xff0c;并对其进行命名&#xff0c;两处地方命名可以不一…

【Echarts】vue3打开echarts的正确方式

ECharts 是一个功能强大、灵活易用的数据可视化工具&#xff0c;适用于商业报表、数据分析、科研教育等多种场景。那么该如何优雅的使用Echarts呢? 这里以vue3为例。 安装echarts pnpm i echarts封装公用方法 // ts-nocheck import * as echarts from echarts; // 我们这里借…

C++:入门基础

一.C参考文档 https://legacy.cplusplus.com/reference/ https://zh.cppreference.com/w/cpp https://en.cppreference.com/w/ 二.C的第一个程序 #include <iostream> using namespace std;int main() {cout << "Hello world!" << en…