<!DOCTYPE html>
<html lang="zh-CN">
<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>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
.gradient-bg {
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
}
.child-card {
transition: all 0.3s ease;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
.fade-in {
animation: fadeIn 0.5s ease-in-out;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
</style>
</head>
<body class="bg-gray-50 min-h-screen">
<div class="container mx-auto px-4 py-8">
<div class="max-w-2xl mx-auto">
<!-- 头部区域 -->
<header class="text-center mb-8 fade-in">
<div class="gradient-bg text-white rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-4">
<i class="fas fa-baby-carriage text-2xl"></i>
</div>
<h1 class="text-3xl font-bold text-gray-800 mb-2">育儿补贴计算器</h1>
<p class="text-gray-600">根据国家最新育儿补贴政策开发</p>
</header>
<!-- 主功能区域 -->
<main>
<!-- 计算表单区域 -->
<section class="bg-white rounded-xl shadow-md p-6 mb-8 child-card fade-in">
<div class="flex justify-between items-center mb-4">
<h2 class="text-xl font-semibold text-gray-800 flex items-center">
<i class="fas fa-child mr-2 text-indigo-500"></i>宝宝信息
</h2>
<button id="clearAllBtn" class="text-sm text-red-500 hover:text-red-700">
<i class="fas fa-trash-alt mr-1"></i>清空所有
</button>
</div>
<div id="childrenContainer" class="space-y-4">
<!-- 动态生成的宝宝信息输入框 -->
</div>
<button id="addChildBtn" class="mt-4 w-full px-4 py-2 bg-indigo-500 text-white rounded-lg hover:bg-indigo-600 transition flex items-center justify-center">
<i class="fas fa-plus mr-2"></i>添加宝宝信息
</button>
</section>
<!-- 计算结果区域 -->
<section id="resultSection" class="hidden bg-white rounded-xl shadow-md p-6 child-card fade-in">
<div class="flex justify-between items-center mb-4">
<h2 class="text-xl font-semibold text-gray-800 flex items-center">
<i class="fas fa-calculator mr-2 text-indigo-500"></i>计算结果
</h2>
<button id="saveResultBtn" class="text-sm text-indigo-500 hover:text-indigo-700">
<i class="fas fa-save mr-1"></i>保存结果
</button>
</div>
<div id="resultContent" class="space-y-4"></div>
<!-- 政策说明 -->
<div class="mt-6 p-4 bg-indigo-50 rounded-lg border border-indigo-200">
<h3 class="font-medium text-indigo-800 mb-2 flex items-center">
<i class="fas fa-info-circle mr-2"></i>政策说明
</h3>
<ul class="text-sm text-gray-700 space-y-2">
<li class="flex items-start">
<i class="fas fa-check-circle text-indigo-500 mr-2 mt-1"></i>
<span>补贴标准：每孩每月300元（每年3600元），从出生至满3周岁</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle text-indigo-500 mr-2 mt-1"></i>
<span>2025年1月1日前出生：按剩余月数折算发放</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle text-indigo-500 mr-2 mt-1"></i>
<span>2025年1月1日后出生：可连续领取3年全额补贴</span>
</li>
</ul>
</div>
</section>
<!-- 历史记录区域 -->
<!--<section id="historySection" class="hidden bg-white rounded-xl shadow-md p-6 mt-6 child-card fade-in">
<h2 class="text-xl font-semibold text-gray-800 mb-4 flex items-center">
<i class="fas fa-history mr-2 text-indigo-500"></i>历史记录
</h2>
<div id="historyContent" class="space-y-3"></div>
</section>-->
</main>
<!-- 页脚区域 -->
<footer class="text-center mt-12 text-gray-500 text-sm">
<p>数据仅供参考，具体以当地政策为准</p>
<p class="mt-1">© 2025 国家育儿补贴计算器</p>
</footer>
</div>
</div>
<script>
// 初始化变量
let childCount = 0;
const childrenContainer = document.getElementById('childrenContainer');
const addChildBtn = document.getElementById('addChildBtn');
const clearAllBtn = document.getElementById('clearAllBtn');
const saveResultBtn = document.getElementById('saveResultBtn');
const resultSection = document.getElementById('resultSection');
const resultContent = document.getElementById('resultContent');
const historySection = document.getElementById('historySection');
// const historyContent = document.getElementById('historyContent');
// 初始化函数
function init() {
addChildInput();
setupEventListeners();
}
// 设置事件监听器
function setupEventListeners() {
addChildBtn.addEventListener('click', addChildInput);
clearAllBtn.addEventListener('click', clearAll);
saveResultBtn.addEventListener('click', saveResult);
}
// 添加宝宝信息输入框
function addChildInput(childData = null) {
childCount++;
const childId = Date.now() + Math.floor(Math.random() * 1000);
const childDiv = document.createElement('div');
childDiv.className = 'p-4 bg-gray-50 rounded-lg border border-gray-200 relative fade-in';
childDiv.dataset.childId = childId;
childDiv.innerHTML = `
<div class="flex justify-between items-center mb-3">
<label class="block text-sm font-medium text-gray-700 flex items-center">
<i class="fas fa-baby mr-2 text-indigo-500"></i>宝宝 ${childCount}
</label>
${childCount > 1 ? '<button class="remove-child text-red-500 hover:text-red-700"><i class="fas fa-trash-alt"></i></button>' : ''}
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">出生日期 <span class="text-red-500">*</span></label>
<input type="date" class="child-dob w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500" required
${childData ? `value="${childData.dob}"` : ''}>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">宝宝姓名（选填）</label>
<input type="text" class="child-name w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500" placeholder="请输入宝宝姓名"
${childData ? `value="${childData.name == undefined ? "" : childData.name}"` : ''}>
</div>
</div>
`;
childrenContainer.appendChild(childDiv);
// 添加删除事件
const removeBtn = childDiv.querySelector('.remove-child');
if (removeBtn) {
removeBtn.addEventListener('click', () => {
childDiv.classList.remove('fade-in');
childDiv.classList.add('opacity-0', 'h-0', 'overflow-hidden', 'transition-all', 'duration-300');
setTimeout(() => {
childrenContainer.removeChild(childDiv);
childCount--;
calculateSubsidy();
}, 300);
});
}
// 添加变更事件
childDiv.querySelector('.child-dob').addEventListener('change', calculateSubsidy);
childDiv.querySelector('.child-name').addEventListener('input', calculateSubsidy);
}
// 计算补贴金额
function calculateSubsidy() {
const childContainers = document.querySelectorAll('[data-child-id]');
if (childContainers.length === 0) {
resultSection.classList.add('hidden');
return;
}
let totalAmount = 0;
let resultHTML = '';
let hasValidInput = false;
childContainers.forEach((container, index) => {
const dobInput = container.querySelector('.child-dob');
const nameInput = container.querySelector('.child-name');
const dob = new Date(dobInput.value);
if (isNaN(dob.getTime())) return;
hasValidInput = true;
const today = new Date();
const policyStartDate = new Date('2025-01-01');
const childName = nameInput.value || `宝宝 ${index + 1}`;
// 计算年龄（月数）
const ageInMonths = (today.getFullYear() - dob.getFullYear()) * 12 +
(today.getMonth() - dob.getMonth());
const remainingMonths = Math.max(0, 36 - ageInMonths);
// 计算补贴金额
let subsidyAmount = 0;
let explanation = '';
let iconClass = '';
let timeRange = '';
if (dob >= policyStartDate) {
// 2025年1月1日及之后出生
subsidyAmount = 3600 * Math.min(3, remainingMonths / 12);
explanation = `可连续领取3年全额补贴`;
iconClass = 'text-green-500';
timeRange = `${dob.toLocaleDateString('zh-CN')} 至 ${new Date(dob.getFullYear() + 3, dob.getMonth(), dob.getDate()).toLocaleDateString('zh-CN')}`;
} else {
// 2025年1月1日前出生
subsidyAmount = 300 * remainingMonths;
explanation = `按剩余${remainingMonths}个月折算发放`;
iconClass = 'text-blue-500';
const endDate = new Date(dob.getFullYear() + 3, dob.getMonth(), dob.getDate());
timeRange = `${today.toLocaleDateString('zh-CN')} 至 ${endDate.toLocaleDateString('zh-CN')}`;
}
totalAmount += subsidyAmount;
resultHTML += `
<div class="p-4 bg-white rounded-lg border border-gray-200 shadow-sm">
<h3 class="font-medium text-gray-800 flex items-center mb-3">
<i class="fas fa-child ${iconClass} mr-2"></i>${childName}
<span class="ml-auto text-sm font-normal text-gray-500">${timeRange}</span>
</h3>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div class="bg-gray-50 p-3 rounded-lg">
<p class="text-sm text-gray-600 mb-1">出生日期</p>
<p class="font-medium">${dob.toLocaleDateString('zh-CN')}</p>
</div>
<div class="bg-gray-50 p-3 rounded-lg">
<p class="text-sm text-gray-600 mb-1">可领月数</p>
<p class="font-medium">${remainingMonths}个月</p>
</div>
<div class="bg-indigo-50 p-3 rounded-lg">
<p class="text-sm text-indigo-600 mb-1">补贴金额</p>
<p class="font-bold text-indigo-700">¥${subsidyAmount.toLocaleString('zh-CN')}</p>
</div>
</div>
<div class="mt-3 text-sm text-gray-600 flex items-center">
<i class="fas fa-info-circle ${iconClass} mr-2"></i>${explanation}
</div>
</div>
`;
});
if (hasValidInput) {
resultHTML += `
<div class="gradient-bg text-white p-4 rounded-lg shadow-md mt-4">
<div class="flex justify-between items-center">
<div>
<h3 class="font-bold flex items-center">
<i class="fas fa-coins mr-2"></i>总计可领取
</h3>
<p class="text-sm opacity-80 mt-1">${childContainers.length}个宝宝合计补贴金额</p>
</div>
<p class="text-2xl font-bold">¥${totalAmount.toLocaleString('zh-CN')}</p>
</div>
</div>
`;
resultContent.innerHTML = resultHTML;
resultSection.classList.remove('hidden');
historySection.classList.remove('hidden');
} else {
resultSection.classList.add('hidden');
}
}
// 清空所有输入
function clearAll() {
if (confirm('确定要清空所有宝宝信息吗？')) {
childrenContainer.innerHTML = '';
childCount = 0;
resultSection.classList.add('hidden');
addChildInput();
}
}
// 保存计算结果
function saveResult() {
const childContainers = document.querySelectorAll('[data-child-id]');
if (childContainers.length === 0) return;
const childrenData = [];
let totalAmount = 0;
const calculationDate = new Date().toLocaleString('zh-CN');
childContainers.forEach(container => {
const dobInput = container.querySelector('.child-dob');
const nameInput = container.querySelector('.child-name');
const dob = new Date(dobInput.value);
if (isNaN(dob.getTime())) return;
const today = new Date();
const ageInMonths = (today.getFullYear() - dob.getFullYear()) * 12 +
(today.getMonth() - dob.getMonth());
const remainingMonths = Math.max(0, 36 - ageInMonths);
const subsidyAmount = dob >= new Date('2025-01-01') ?
3600 * Math.min(3, remainingMonths / 12) :
300 * remainingMonths;
childrenData.push({
name: nameInput.value || '未命名宝宝',
dob: dobInput.value,
amount: subsidyAmount,
months: remainingMonths
});
totalAmount += subsidyAmount;
});
if (childrenData.length === 0) return;
const resultData = {
date: calculationDate,
children: childrenData,
total: totalAmount
};
// 保存到localStorage
let history = JSON.parse(localStorage.getItem('subsidyHistory') || '[]');
history.unshift(resultData);
if (history.length > 5) history = history.slice(0, 5);
localStorage.setItem('subsidyHistory', JSON.stringify(history));
// 显示保存成功提示
alert('计算结果已保存！');
}
init();
</script>