📌 简介：
政策更新：根据最新调整，渐进式延迟退休政策将于2026年1月1日起正式实施。本计算器精确适配2026年政策节点，支持男性职工、50岁/55岁退休女职工三类人群，自动计算延迟月数及实际退休年龄。
计算逻辑：以2026年1月1日为政策起算点，男性每4个月延迟1个月（最长36个月），女职工按不同节奏调整，总延迟不超过政策上限。
📌 2026年政策核心要点：
• 实施时间：2026年1月1日起
• 男性职工：60岁→63岁（每4个月延1个月）
• 50岁女职工：50岁→55岁（每2个月延1个月）
• 55岁女职工：55岁→58岁（每4个月延1个月）
代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="2026年1月1日起实施渐进式延迟退休政策，精准计算个人实际退休年龄、延迟月数及退休时间">
<title>2026延迟退休计算器 | 渐进式退休年龄在线测算工具</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', 'Microsoft YaHei', 'PingFang SC', sans-serif;
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
line-height: 1.6;
}
.calculator-wrapper {
background: #ffffff;
border-radius: 20px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
padding: 40px 35px;
max-width: 500px;
width: 100%;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
overflow: hidden; /* 防止内容溢出 */
}
.header-section {
text-align: center;
margin-bottom: 35px;
padding-bottom: 20px;
border-bottom: 2px solid #f0f4f8;
}
.main-heading {
font-size: 32px;
color: #2c3e50;
margin-bottom: 15px;
font-weight: 700;
background: linear-gradient(135deg, #4a6cf7 0%, #6a8cff 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
line-height: 1.3; /* 增加行高防止遮挡 */
}
/* === 核心修复：政策节点区域样式优化 === */
.policy-banner {
background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
padding: 15px;
border-radius: 12px;
margin: 15px 0;
border: 1px solid #90caf9;
text-align: center;
line-height: 1.7; /* 增加行高 */
box-sizing: border-box;
min-height: 70px; /* 确保最小高度 */
display: flex;
flex-direction: column;
justify-content: center;
}
.policy-date {
font-size: 18px;
font-weight: 700;
color: #1565c0;
margin-bottom: 5px;
display: block;
}
.policy-desc {
font-size: 14px;
color: #0d47a1;
line-height: 1.5;
}
.sub-heading {
font-size: 15px;
color: #7f8c8d;
line-height: 1.6;
margin-top: 10px;
}
.form-section {
margin-bottom: 25px;
}
.input-group {
margin-bottom: 20px;
}
.input-label {
display: block;
font-weight: 600;
color: #34495e;
margin-bottom: 8px;
font-size: 15px;
display: flex;
align-items: center;
gap: 8px;
line-height: 1.4;
}
.input-icon {
font-size: 18px;
}
.input-field,
.select-field {
width: 100%;
padding: 14px 16px;
border: 2px solid #e0e7ff;
border-radius: 12px;
font-size: 16px;
transition: all 0.3s ease;
background-color: #fafbfc;
font-family: inherit;
}
.calculate-button {
width: 100%;
padding: 16px;
background: linear-gradient(135deg, #4a6cf7 0%, #6a8cff 100%);
color: white;
border: none;
border-radius: 12px;
font-size: 18px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
letter-spacing: 0.5px;
margin-top: 10px;
}
.error-alert {
background: #fee;
color: #c33;
padding: 12px 15px;
border-radius: 10px;
margin-top: 12px;
font-size: 14px;
display: none;
border-left: 5px solid #c33;
}
.result-container {
margin-top: 30px;
padding: 25px;
background: #f8f9ff;
border-radius: 15px;
border: 1px solid #e0e7ff;
display: none;
animation: fadeInUp 0.5s ease;
}
.result-title {
font-size: 20px;
color: #2c3e50;
margin-bottom: 20px;
font-weight: 700;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.result-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 14px 0;
border-bottom: 1px solid #e0e7ff;
}
.result-value {
font-size: 17px;
font-weight: 700;
color: #4a6cf7;
}
.policy-info {
margin-top: 25px;
padding: 18px;
background: #e3f2fd;
border-radius: 10px;
font-size: 13px;
color: #1976d2;
line-height: 1.7;
border-left: 5px solid #2196f3;
}
/* === 移动端适配优化 === */
@media (max-width: 480px) {
.calculator-wrapper {
padding: 25px 20px;
border-radius: 15px;
}
.main-heading {
font-size: 26px;
margin-bottom: 12px;
}
/* 移动端政策节点区域特殊处理 */
.policy-banner {
padding: 12px 10px;
min-height: 65px;
margin: 10px 0;
}
.policy-date {
font-size: 16px;
}
.policy-desc {
font-size: 13px;
}
}
/* 更小的屏幕 */
@media (max-width: 360px) {
.policy-banner {
min-height: auto; /* 允许高度自适应 */
padding: 10px 8px;
}
.policy-date {
font-size: 15px;
margin-bottom: 3px;
}
.policy-desc {
font-size: 12px;
line-height: 1.4;
}
}
</style>
</head>
<body>
<div class="calculator-wrapper">
<div class="header-section">
<h1 class="main-heading">🎯 2026延迟退休计算器</h1>
<!-- === 修复后的政策节点区域 === -->
<div class="policy-banner">
<div class="policy-date">📅 政策实施节点：2026年1月1日</div>
<div class="policy-desc">渐进式延迟法定退休年龄 · 精准测算您的实际退休时间</div>
</div>
<p class="sub-heading">基于最新退休政策文件 · 适配2026年改革时间表</p>
</div>
<div class="form-section">
<div class="input-group">
<label for="birthYear" class="input-label">
<span class="input-icon">📅</span>
<span>出生年份 <span style="color:#999;font-size:13px">(1960-2025)</span></span>
</label>
<input type="number" id="birthYear" class="input-field" placeholder="例如：1985" min="1960" max="2025">
</div>
<div class="input-group">
<label for="birthMonth" class="input-label">
<span class="input-icon">📆</span>
<span>出生月份 <span style="color:#999;font-size:13px">(1-12)</span></span>
</label>
<input type="number" id="birthMonth" class="input-field" placeholder="例如：6" min="1" max="12">
</div>
<div class="input-group">
<label for="gender" class="input-label">
<span class="input-icon">👥</span>
<span>职工类别 <span style="color:#d32f2f;font-size:13px">*</span></span>
</label>
<select id="gender" class="select-field">
<option value="">请选择您的职工类别</option>
<option value="1">男性职工（原60周岁退休）</option>
<option value="2">原50周岁退休女职工</option>
<option value="3">原55周岁退休女职工</option>
</select>
</div>
</div>
<div id="errorAlert" class="error-alert"></div>
<button class="calculate-button" onclick="calculateRetirement2026()">
🧮 立即计算退休时间
</button>
<div id="resultContainer" class="result-container">
<h2 class="result-title">
<span>📊</span>
<span>您的延迟退休详情</span>
</h2>
<div class="result-row">
<span class="result-label">原法定退休年龄：</span>
<span class="result-value" id="originalAge"></span>
</div>
<div class="result-row">
<span class="result-label">改革后法定年龄：</span>
<span class="result-value" id="retirementAge"></span>
</div>
<div class="result-row">
<span class="result-label">实际退休时间：</span>
<span class="result-value" id="retirementDate"></span>
</div>
<div class="result-row">
<span class="result-label">延迟月数：</span>
<span class="result-value" id="delayMonths"></span>
</div>
</div>
<div class="policy-info">
<strong>📌 2026年政策核心要点：</strong>
<br>• 实施时间：<strong>2026年1月1日起</strong>
<br>• 男性职工：60岁→63岁（每4个月延1个月）
<br>• 50岁女职工：50岁→55岁（每2个月延1个月）
<br>• 55岁女职工：55岁→58岁（每4个月延1个月）
</div>
</div>
<script>
/**
* 2026版渐进式延迟退休计算器
* 政策实施日期：2026年1月1日
*/
class RetirementCalculator2026 {
constructor() {
// 2026年政策参数
this.policyConfig = {
1: { baseAge: 60, targetAge: 63, delayInterval: 4, startDate: new Date(2026, 0, 1) },
2: { baseAge: 50, targetAge: 55, delayInterval: 2, startDate: new Date(2026, 0, 1) },
3: { baseAge: 55, targetAge: 58, delayInterval: 4, startDate: new Date(2026, 0, 1) }
};
}
calculate(birthYear, birthMonth, gender) {
const validation = this.validateInput(birthYear, birthMonth, gender);
if (!validation.isValid) throw new Error(validation.message);
const config = this.policyConfig[gender];
const birthDate = new Date(birthYear, birthMonth - 1, 1);
const originalRetirementDate = new Date(
birthDate.getFullYear() + config.baseAge,
birthDate.getMonth(),
1
);
const delayMonths = this.calculateDelayMonths(originalRetirementDate, config);
const actualRetirementDate = new Date(originalRetirementDate);
actualRetirementDate.setMonth(actualRetirementDate.getMonth() + delayMonths);
const totalAgeMonths = config.baseAge * 12 + delayMonths;
const retirementAgeYears = Math.floor(totalAgeMonths / 12);
const retirementAgeMonths = totalAgeMonths % 12;
return {
retirementDate: actualRetirementDate,
originalAge: this.formatAge(config.baseAge, 0),
retirementAge: this.formatAge(retirementAgeYears, retirementAgeMonths),
delayMonths: delayMonths,
formattedDate: this.formatDate(actualRetirementDate)
};
}
calculateDelayMonths(originalRetirementDate, config) {
if (originalRetirementDate < config.startDate) return 0;
const monthsDiff = this.getMonthDifference(config.startDate, originalRetirementDate);
let delayMonths = Math.floor(monthsDiff / config.delayInterval) + 1;
const maxDelayMonths = (config.targetAge - config.baseAge) * 12;
return Math.min(delayMonths, maxDelayMonths);
}
getMonthDifference(startDate, endDate) {
return (endDate.getFullYear() - startDate.getFullYear()) * 12 + (endDate.getMonth() - startDate.getMonth());
}
validateInput(birthYear, birthMonth, gender) {
const currentYear = new Date().getFullYear();
if (!birthYear || isNaN(birthYear) || birthYear < 1960 || birthYear > currentYear) {
return { isValid: false, message: `请输入有效的出生年份（1960-${currentYear}）` };
}
if (!birthMonth || isNaN(birthMonth) || birthMonth < 1 || birthMonth > 12) {
return { isValid: false, message: "请输入有效的出生月份（1-12）" };
}
if (!gender || !this.policyConfig[gender]) {
return { isValid: false, message: "请选择职工类别" };
}
const birthDate = new Date(birthYear, birthMonth - 1, 1);
const now = new Date();
if (birthDate > now) {
return { isValid: false, message: "出生日期不能大于当前日期" };
}
return { isValid: true, message: "" };
}
formatDate(date) {
return `${date.getFullYear()}年${date.getMonth() + 1}月`;
}
formatAge(years, months) {
return months === 0 ? `${years}周岁` : `${years}岁${months}个月`;
}
}
const calculator2026 = new RetirementCalculator2026();
function calculateRetirement2026() {
const birthYear = parseInt(document.getElementById('birthYear').value);
const birthMonth = parseInt(document.getElementById('birthMonth').value);
const gender = document.getElementById('gender').value;
const errorElement = document.getElementById('errorAlert');
const resultContainer = document.getElementById('resultContainer');
errorElement.style.display = 'none';
resultContainer.style.display = 'none';
try {
const result = calculator2026.calculate(birthYear, birthMonth, gender);
document.getElementById('originalAge').textContent = result.originalAge;
document.getElementById('retirementAge').textContent = result.retirementAge;
document.getElementById('retirementDate').textContent = result.formattedDate;
document.getElementById('delayMonths').textContent = `${result.delayMonths}个月`;
resultContainer.style.display = 'block';
setTimeout(() => {
resultContainer.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
}, 100);
} catch (error) {
errorElement.textContent = error.message;
errorElement.style.display = 'block';
errorElement.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
}
}
// 回车键支持 & 实时验证
document.addEventListener('DOMContentLoaded', function() {
const inputs = document.querySelectorAll('.input-field, .select-field');
inputs.forEach(input => {
input.addEventListener('keypress', function(e) {
if (e.key === 'Enter') calculateRetirement2026();
});
input.addEventListener('input', function() {
const errorElement = document.getElementById('errorAlert');
if (errorElement.style.display === 'block') {
errorElement.style.display = 'none';
}
});
});
});
</script>
</body>
</html> 文章采用：署名-非商业性使用-相同方式知识共享 署名 4.0 协议国际版 (CC BY-NC-SA 4.0) 许可协议授权。
免责声明：本页面资源来自互联网收集，仅供用于学习和交流，请勿用于商业用途。如有侵权、不妥之处，请联系客服并出示版权证明以便删除。
免责声明：本页面资源来自互联网收集，仅供用于学习和交流，请勿用于商业用途。如有侵权、不妥之处，请联系客服并出示版权证明以便删除。