2025国家育儿补贴计算器开发教程 - 零基础HTML/CSS/JavaScript实战

编程狮（w3cschool.cn） 2025-07-29 14:41:43 浏览数 (43)
反馈

零基础掌握HTML+CSS+JavaScript实战开发

一、项目背景与政策解读

2025年7月28日，国务院发布了《育儿补贴制度实施方案》，为全国0-3岁婴幼儿家庭提供育儿补贴。今天编程狮(W3Cschool.cn)将带您一步步开发一个实用的育儿补贴计算器，帮助家长快速了解可领取的补贴金额。本教程专为零基础学员设计，无需前置知识，我们将使用最基础的HTML、CSS和JavaScript实现完整功能。

政策要点：

  • 补贴对象：所有3周岁以下婴幼儿
  • 补贴标准：每孩每月300元（全年3600元）
  • 过渡期处理：2025年1月1日前出生的儿童按剩余月数计算
  • 申请时间：2025年9月1日起开放申请

二、计算器功能设计

我们的计算器将实现以下功能：

  1. 支持多个不同年龄宝宝分别计算
  2. 动态添加/删除宝宝输入框
  3. 自动计算每个宝宝的补贴金额和可领取月数
  4. 显示详细计算结果和申请渠道
  5. 响应式设计，适配各种设备

三、零基础开发教程

1. HTML框架

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <!-- 头部代码如前所示 -->
</head>
<body>
    <!-- 完整HTML结构如前所示 -->

    
    <script>
        // 完整JavaScript代码如前所示
    </script>
</body>
</html>

相当于打了一个地基

2. HTML结构设计（用户界面）

<div class="calculator-container">
  <!-- 标题区域 -->
  <div class="calculator-header">
    <i class="fas fa-calculator"></i>
    <h2>补贴计算器</h2>
  </div>

  
  <!-- 宝宝输入区域 -->
  <div id="childrenContainer">
    <div class="child-input-group">
      <button class="remove-child"><i class="fas fa-times-circle"></i></button>
      <div class="input-group">
        <label><i class="fas fa-baby"></i> 宝宝出生日期</label>
        <input type="date" class="child-birthdate">
      </div>
    </div>
  </div>

  
  <!-- 添加宝宝按钮 -->
  <div class="add-child-btn">
    <i class="fas fa-plus-circle"></i> 添加另一个宝宝
  </div>

  
  <!-- 计算按钮 -->
  <button class="btn-calculate">计算我的补贴</button>

  
  <!-- 结果展示区域 -->
  <div class="result-container">
    <h3>您的育儿补贴计算结果</h3>
    <div class="result-amount">¥0</div>
    <div id="childrenResults"></div>
  </div>
</div>

将以上代码复制到HTML在线编译器预览效果：

可以看到现在还是个毛坯房的状态，我们继续↓

3. CSS样式设计（美化界面）

/* 编程狮推荐：现代化渐变背景 */
body {
  background: linear-gradient(135deg, #f0f9ff 0%, #e6f7ff 100%);
}


/* 计算器容器 */
.calculator-container {
  background: white;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  padding: 30px;
}


/* 宝宝输入组样式 */
.child-input-group {
  background: #f8f9ff;
  border: 1px solid #e6e9ff;
  border-radius: 12px;
  padding: 15px;
  margin-bottom: 15px;
  position: relative;
}


/* 添加宝宝按钮 */
.add-child-btn {
  background: #f0f7ff;
  color: #4361ee;
  border: 1px dashed #4361ee;
  padding: 10px;
  border-radius: 8px;
  text-align: center;
  cursor: pointer;
}


/* 计算按钮 */
.btn-calculate {
  background: linear-gradient(to right, #4361ee, #3f37c9);
  color: white;
  border: none;
  padding: 16px 30px;
  border-radius: 12px;
  cursor: pointer;
  width: 100%;
  margin: 20px 0;
}


/* 结果展示样式 */
.result-amount {
  font-size: 2.8rem;
  font-weight: 800;
  color: #4ade80;
  margin: 15px 0;
}


.child-result {
  background: white;
  border-radius: 8px;
  padding: 12px;
  margin: 10px 0;
  border-left: 3px solid #4cc9f0;
}

4. JavaScript核心逻辑

添加/删除宝宝功能

// 编程狮技巧：动态管理宝宝输入框
let childCount = 1;


function addChild() {
  childCount++;
  const container = document.getElementById('childrenContainer');

  
  const childGroup = document.createElement('div');
  childGroup.className = 'child-input-group';
  childGroup.innerHTML = `
    <button class="remove-child">
      <i class="fas fa-times-circle"></i>
    </button>
    <div class="input-group">
      <label><i class="fas fa-baby"></i> 宝宝出生日期</label>
      <input type="date" class="child-birthdate">
    </div>
  `;

  
  container.appendChild(childGroup);
}


function removeChild(button) {
  if (childCount <= 1) return;
  button.parentElement.remove();
  childCount--;
}

补贴计算核心算法

// 编程狮核心算法：精准计算育儿补贴
function calculateChildSubsidy(birthDate) {
  const 今日 = new Date();
  const 三周岁日期 = new Date(birthDate);
  三周岁日期.setFullYear(三周岁日期.getFullYear() + 3);

  
  // 已满3周岁无补贴
  if (今日 >= 三周岁日期) return { 金额: 0, 月数: 0 };

  
  // 计算剩余月数
  let 剩余月数 = (三周岁日期.getFullYear() - 今日.getFullYear()) * 12;
  剩余月数 -= 今日.getMonth() + 1;
  剩余月数 += 三周岁日期.getMonth() + 1;

  
  // 过渡期处理（2025年前出生）
  const 政策起始日 = new Date('2025-01-01');
  if (birthDate < 政策起始日) {
    const 过渡期月数 = Math.ceil((三周岁日期 - 政策起始日) / (30.44 * 24 * 60 * 60 * 1000));
    剩余月数 = Math.min(剩余月数, 过渡期月数);
  }

  
  const 总补贴 = Math.max(0, Math.round(300 * 剩余月数));

  
  return {
    金额: 总补贴,
    月数: 剩余月数
  };
}

四、核心功能实现详解

1. 多宝宝动态管理

  • 动态添加：用户可随时添加多个宝宝输入框
  • 独立计算：每个宝宝的补贴独立计算
  • 灵活删除：可删除不需要的宝宝输入（至少保留一个）

2. 日期计算算法

// 编程狮日期处理技巧
function 计算宝宝年龄(出生日期) {
  const 今日 = new Date();
  const 年龄月数 = (今日.getFullYear() - 出生日期.getFullYear()) * 12 +
                (今日.getMonth() - 出生日期.getMonth());

  
  if (年龄月数 >= 12) {
    return `${Math.floor(年龄月数/12)}岁${年龄月数%12}个月`;
  }
  return `${年龄月数}个月`;
}

3. 结果可视化展示

// 编程狮技巧：清晰展示计算结果
function 显示结果(总补贴, 宝宝结果) {
  const 结果容器 = document.getElementById('childrenResults');
  结果容器.innerHTML = '';

  
  宝宝结果.forEach((宝宝, 序号) => {
    结果容器.innerHTML += `
      <div class="child-result">
        <p><strong>宝宝${序号+1}</strong></p>
        <p>出生日期：${宝宝.出生日期}</p>
        <p>当前年龄：${宝宝.年龄}</p>
        <p>可领取月数：${宝宝.月数}个月</p>
        <p>补贴金额：<strong>¥${宝宝.金额.toLocaleString()}</strong></p>
      </div>
    `;
  });

  
  document.querySelector('.result-amount').textContent = 
    `¥${总补贴.toLocaleString()}`;
}

五、完整代码与部署

<!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="2025年最新国家育儿补贴计算器，根据宝宝出生日期计算可领取的育儿补贴金额">
    <title>2025国家育儿补贴计算器 - 编程狮(W3Cschool)实战项目</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
        }

        
        :root {
            --primary: #4361ee;
            --secondary: #3f37c9;
            --accent: #4cc9f0;
            --success: #4ade80;
            --warning: #facc15;
            --danger: #f87171;
            --light: #f8f9fa;
            --dark: #212529;
            --gray: #6c757d;
            --border: #dee2e6;
            --shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
            --transition: all 0.3s ease;
        }

        
        body {
            background: linear-gradient(135deg, #f0f9ff 0%, #e6f7ff 100%);
            color: var(--dark);
            line-height: 1.6;
            padding: 20px;
            min-height: 100vh;
        }

        
        .container {
            max-width: 1200px;
            margin: 0 auto;
        }

        
        header {
            text-align: center;
            padding: 30px 20px;
            background: linear-gradient(120deg, var(--primary), var(--secondary));
            color: white;
            border-radius: 16px;
            margin-bottom: 30px;
            box-shadow: var(--shadow);
            position: relative;
            overflow: hidden;
        }

        
        header::before {
            content: "";
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 70%);
            transform: rotate(30deg);
        }

        
        h1 {
            font-size: 2.5rem;
            margin-bottom: 15px;
            position: relative;
            z-index: 2;
        }

        
        .subtitle {
            font-size: 1.2rem;
            opacity: 0.9;
            max-width: 800px;
            margin: 0 auto;
            position: relative;
            z-index: 2;
        }

        
        .badge {
            display: inline-block;
            background: var(--warning);
            color: #333;
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 0.85rem;
            font-weight: 600;
            margin-top: 15px;
            position: relative;
            z-index: 2;
        }

        
        .main-content {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 30px;
            margin-bottom: 40px;
        }

        
        @media (max-width: 768px) {
            .main-content {
                grid-template-columns: 1fr;
            }
        }

        
        .calculator-container {
            background: white;
            border-radius: 16px;
            box-shadow: var(--shadow);
            padding: 30px;
            position: relative;
            overflow: hidden;
        }

        
        .calculator-container::after {
            content: "";
            position: absolute;
            top: 0;
            right: 0;
            width: 100px;
            height: 100px;
            background: var(--accent);
            border-radius: 0 0 0 100%;
            opacity: 0.1;
        }

        
        .calculator-header {
            display: flex;
            align-items: center;
            margin-bottom: 25px;
        }

        
        .calculator-header i {
            background: var(--primary);
            color: white;
            width: 50px;
            height: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 12px;
            font-size: 1.5rem;
            margin-right: 15px;
        }

        
        .calculator-title {
            font-size: 1.8rem;
            color: var(--primary);
        }

        
        .input-group {
            margin-bottom: 20px;
        }

        
        label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
            color: var(--dark);
        }

        
        input, select {
            width: 100%;
            padding: 14px 16px;
            border: 2px solid var(--border);
            border-radius: 12px;
            font-size: 1rem;
            transition: var(--transition);
        }

        
        input:focus, select:focus {
            border-color: var(--primary);
            outline: none;
            box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.2);
        }

        
        input[type="date"] {
            padding: 13px 16px;
        }

        
        .btn-calculate {
            background: linear-gradient(to right, var(--primary), var(--secondary));
            color: white;
            border: none;
            padding: 16px 30px;
            font-size: 1.1rem;
            font-weight: 600;
            border-radius: 12px;
            cursor: pointer;
            width: 100%;
            transition: var(--transition);
            margin: 10px 0 20px;
            box-shadow: 0 4px 15px rgba(67, 97, 238, 0.3);
        }

        
        .btn-calculate:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 20px rgba(67, 97, 238, 0.4);
        }

        
        .btn-calculate:active {
            transform: translateY(0);
        }

        
        .add-child-btn {
            background: var(--light);
            color: var(--primary);
            border: 1px dashed var(--primary);
            padding: 10px;
            border-radius: 8px;
            margin: 10px 0;
            cursor: pointer;
            text-align: center;
            transition: var(--transition);
        }

        
        .add-child-btn:hover {
            background: rgba(67, 97, 238, 0.1);
        }

        
        .child-input-group {
            position: relative;
            margin-bottom: 15px;
            padding: 15px;
            border-radius: 12px;
            background: #f8f9ff;
            border: 1px solid #e6e9ff;
        }

        
        .remove-child {
            position: absolute;
            top: 10px;
            right: 10px;
            color: var(--danger);
            cursor: pointer;
            background: none;
            border: none;
            font-size: 1.2rem;
        }

        
        .result-container {
            background: var(--light);
            border-radius: 12px;
            padding: 25px;
            text-align: center;
            border-left: 5px solid var(--success);
            display: none;
        }

        
        .result-title {
            font-size: 1.3rem;
            margin-bottom: 15px;
            color: var(--dark);
        }

        
        .result-amount {
            font-size: 2.8rem;
            font-weight: 800;
            color: var(--success);
            margin: 15px 0;
        }

        
        .child-result {
            background: white;
            border-radius: 8px;
            padding: 12px;
            margin: 10px 0;
            text-align: left;
            border-left: 3px solid var(--accent);
        }

        
        .result-details {
            background: white;
            border-radius: 12px;
            padding: 15px;
            margin-top: 20px;
            text-align: left;
        }

        
        .result-details ul {
            padding-left: 20px;
        }

        
        .result-details li {
            margin-bottom: 8px;
        }

        
        .info-section {
            background: white;
            border-radius: 16px;
            box-shadow: var(--shadow);
            padding: 30px;
        }

        
        .info-header {
            display: flex;
            align-items: center;
            margin-bottom: 25px;
        }

        
        .info-header i {
            background: var(--accent);
            color: white;
            width: 50px;
            height: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 12px;
            font-size: 1.5rem;
            margin-right: 15px;
        }

        
        .info-title {
            font-size: 1.8rem;
            color: var(--accent);
        }

        
        .policy-card {
            background: var(--light);
            border-radius: 12px;
            padding: 20px;
            margin-bottom: 20px;
            border-left: 4px solid var(--primary);
        }

        
        .policy-title {
            font-size: 1.2rem;
            margin-bottom: 10px;
            color: var(--primary);
        }

        
        .features {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            margin: 30px 0;
        }

        
        .feature-card {
            background: white;
            border-radius: 12px;
            padding: 25px;
            text-align: center;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
            transition: var(--transition);
            border: 1px solid var(--border);
        }

        
        .feature-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
            border-color: var(--accent);
        }

        
        .feature-icon {
            font-size: 2.5rem;
            color: var(--primary);
            margin-bottom: 15px;
        }

        
        .feature-title {
            font-size: 1.2rem;
            margin-bottom: 10px;
            color: var(--dark);
        }

        
        .w3cschool-brand {
            background: rgba(67, 97, 238, 0.08);
            border-radius: 12px;
            padding: 25px;
            text-align: center;
            margin-top: 30px;
            border: 2px dashed var(--primary);
        }

        
        .brand-title {
            font-size: 1.5rem;
            color: var(--primary);
            margin-bottom: 15px;
        }

        
        .brand-logo {
            font-size: 2rem;
            font-weight: 800;
            color: var(--primary);
            margin: 15px 0;
        }

        
        .brand-button {
            display: inline-block;
            background: var(--primary);
            color: white;
            padding: 12px 30px;
            border-radius: 30px;
            text-decoration: none;
            font-weight: 600;
            margin-top: 10px;
            transition: var(--transition);
        }

        
        .brand-button:hover {
            background: var(--secondary);
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(67, 97, 238, 0.3);
        }

        
        footer {
            text-align: center;
            padding: 30px;
            color: var(--gray);
            font-size: 0.9rem;
            border-top: 1px solid var(--border);
            margin-top: 40px;
        }

        
        .disclaimer {
            background: #fff8e6;
            border-left: 4px solid var(--warning);
            padding: 15px;
            border-radius: 8px;
            margin: 20px 0;
            font-size: 0.9rem;
        }

        
        .highlight {
            color: var(--primary);
            font-weight: 600;
        }

        
        @media (max-width: 576px) {
            h1 {
                font-size: 2rem;
            }

            
            .subtitle {
                font-size: 1rem;
            }

            
            .calculator-title, .info-title {
                font-size: 1.5rem;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>国家育儿补贴计算器</h1>
            <p class="subtitle">根据2025年最新育儿补贴政策开发，精准计算您可领取的育儿补贴金额</p>
            <div class="badge">2025年7月28日最新政策</div>
        </header>

        
        <div class="main-content">
            <div class="calculator-container">
                <div class="calculator-header">
                    <i class="fas fa-calculator"></i>
                    <h2 class="calculator-title">补贴计算器</h2>
                </div>

                
                <div id="childrenContainer">
                    <div class="child-input-group">
                        <button class="remove-child" onclick="removeChild(this)" style="display: none;">
                            <i class="fas fa-times-circle"></i>
                        </button>
                        <div class="input-group">
                            <label for="birthDate1"><i class="fas fa-baby"></i> 宝宝出生日期</label>
                            <input type="date" id="birthDate1" class="child-birthdate" max="2028-12-31">
                        </div>
                    </div>
                </div>

                
                <div class="add-child-btn" onclick="addChild()">
                    <i class="fas fa-plus-circle"></i> 添加另一个宝宝
                </div>

                
                <button class="btn-calculate" onclick="calculateSubsidy()">
                    <i class="fas fa-calculator"></i> 计算我的补贴
                </button>

                
                <div class="disclaimer">
                    <i class="fas fa-info-circle"></i> 本计算器基于2025年7月28日发布的《育儿补贴制度实施方案》开发，计算结果仅供参考，具体以当地执行为准。
                </div>

                
                <div class="result-container" id="resultContainer">
                    <h3 class="result-title">您的育儿补贴计算结果</h3>
                    <div class="result-amount" id="totalAmount">¥0</div>
                    <p>根据政策规定和您提供的信息计算得出</p>

                    
                    <div id="childrenResults">
                        <!-- 每个宝宝的结果将在这里动态生成 -->
                    </div>

                    
                    <div class="result-details">
                        <p><strong>计算说明：</strong></p>
                        <ul>
                            <li>每月补贴金额：¥300元</li>
                            <li>补贴发放至宝宝满3周岁</li>
                            <li>2025年1月1日前出生的宝宝按剩余月数计算</li>
                        </ul>
                    </div>

                    
                    <div class="apply-section" style="margin-top: 20px;">
                        <h4><i class="fas fa-external-link-alt"></i> 申请渠道：</h4>
                        <p>1. 当地政务服务平台（如浙里办、粤省事）</p>
                        <p>2. 支付宝搜索【育儿补贴申请】</p>
                        <p>3. 街道社区服务中心线下办理</p>
                    </div>
                </div>
            </div>

            
            <div class="info-section">
                <div class="info-header">
                    <i class="fas fa-file-alt"></i>
                    <h2 class="info-title">2025育儿补贴政策解读</h2>
                </div>

                
                <div class="policy-card">
                    <h3 class="policy-title">政策要点</h3>
                    <p>根据2025年7月28日发布的《育儿补贴制度实施方案》：</p>
                    <ul>
                        <li><strong>补贴对象</strong>：所有3周岁以下婴幼儿</li>
                        <li><strong>补贴标准</strong>：每孩每年3600元（按月发放）</li>
                        <li><strong>过渡期</strong>：2025年1月1日前出生儿童按剩余月数计算</li>
                        <li><strong>发放方式</strong>：按月发放至监护人银行账户</li>
                    </ul>
                </div>

                
                <div class="policy-card">
                    <h3 class="policy-title">申请条件</h3>
                    <ul>
                        <li>申请人需为婴幼儿法定监护人</li>
                        <li>婴幼儿需具有中国国籍</li>
                        <li>按规定完成出生登记</li>
                        <li>符合当地其他相关规定</li>
                    </ul>
                </div>

                
                <div class="policy-card">
                    <h3 class="policy-title">常见问题解答</h3>
                    <ul>
                        <li><strong>Q：多胞胎如何计算？</strong><br>A：每个孩子单独计算补贴</li>
                        <li><strong>Q：补贴需要缴税吗？</strong><br>A：育儿补贴属于免税收入</li>
                        <li><strong>Q：何时开始申请？</strong><br>A：2025年9月1日起开放申请</li>
                    </ul>
                </div>

                
                <h3 style="margin: 25px 0 15px; color: var(--primary);">政策官方来源</h3>
                <ul>
                    <li><a href="https://www.gov.cn/zhengce/202507/content_7034132.htm" target="_blank">育儿补贴制度实施方案</a></li>
                    <li><a href="https://www.gov.cn/yaowen/liebiao/202507/content_7034150.htm" target="_blank">政策解读及问答</a></li>
                </ul>
            </div>
        </div>

        
        <div class="features">
            <div class="feature-card">
                <div class="feature-icon">
                    <i class="fas fa-calendar-check"></i>
                </div>
                <h4 class="feature-title">精准计算</h4>
                <p>基于最新政策设计算法，考虑过渡期等特殊情况</p>
            </div>

            
            <div class="feature-card">
                <div class="feature-icon">
                    <i class="fas fa-mobile-alt"></i>
                </div>
                <h4 class="feature-title">移动友好</h4>
                <p>响应式设计，在手机、平板和电脑上均可完美使用</p>
            </div>

            
            <div class="feature-card">
                <div class="feature-icon">
                    <i class="fas fa-shield-alt"></i>
                </div>
                <h4 class="feature-title">隐私保护</h4>
                <p>所有计算在本地完成，不收集任何用户数据</p>
            </div>

            
            <div class="feature-card">
                <div class="feature-icon">
                    <i class="fas fa-sync-alt"></i>
                </div>
                <h4 class="feature-title">实时更新</h4>
                <p>政策变化时及时更新计算规则</p>
            </div>
        </div>

        
        <div class="w3cschool-brand">
            <h3 class="brand-title">想自己开发这样的实用工具？</h3>
            <p>在<span class="highlight">编程狮(W3Cschool)</span>学习Web开发技术，掌握HTML、CSS和JavaScript：</p>
            <div class="brand-logo">编程狮</div>
            <p>零基础入门到项目实战，快速成为前端开发工程师</p>
            <a href="https://www.w3cschool.cn" class="brand-button" target="_blank">
                立即学习 <i class="fas fa-arrow-right"></i>
            </a>
        </div>

        
        <footer>
            <p>© 2025 国家育儿补贴计算器 - 本工具仅作为参考，具体政策执行以当地政府规定为准</p>
            <p>技术支持：编程狮(W3Cschool)前端开发团队</p>
        </footer>
    </div>


    <script>
        // 初始宝宝数量
        let childCount = 1;

        
        // 页面加载时设置默认日期
        window.addEventListener('DOMContentLoaded', () => {
            // 设置第一个宝宝的默认出生日期为2年前
            const defaultDate = new Date();
            defaultDate.setFullYear(defaultDate.getFullYear() - 2);
            document.getElementById('birthDate1').value = formatDate(defaultDate);
        });

        
        // 添加宝宝输入框
        function addChild() {
            childCount++;
            const container = document.getElementById('childrenContainer');

            
            const childGroup = document.createElement('div');
            childGroup.className = 'child-input-group';
            childGroup.innerHTML = `
                <button class="remove-child" onclick="removeChild(this)">
                    <i class="fas fa-times-circle"></i>
                </button>
                <div class="input-group">
                    <label for="birthDate${childCount}"><i class="fas fa-baby"></i> 宝宝出生日期</label>
                    <input type="date" id="birthDate${childCount}" class="child-birthdate" max="2028-12-31">
                </div>
            `;

            
            container.appendChild(childGroup);

            
            // 设置新宝宝的默认出生日期为1年前
            const defaultDate = new Date();
            defaultDate.setFullYear(defaultDate.getFullYear() - 1);
            document.getElementById(`birthDate${childCount}`).value = formatDate(defaultDate);
        }

        
        // 移除宝宝输入框
        function removeChild(button) {
            if (childCount <= 1) return;

            
            const childGroup = button.parentElement;
            childGroup.remove();
            childCount--;

            
            // 如果只剩一个宝宝，隐藏其删除按钮
            if (childCount === 1) {
                document.querySelector('.remove-child').style.display = 'none';
            }
        }

        
        // 计算补贴函数
        function calculateSubsidy() {
            // 获取所有宝宝的出生日期
            const birthInputs = document.querySelectorAll('.child-birthdate');
            const birthDates = [];

            
            for (let i = 0; i < birthInputs.length; i++) {
                if (!birthInputs[i].value) {
                    alert(`请填写第${i+1}个宝宝的出生日期`);
                    return;
                }
                birthDates.push(new Date(birthInputs[i].value));
            }

            
            // 计算每个宝宝的补贴
            let totalSubsidy = 0;
            const childrenResults = [];

            
            for (let i = 0; i < birthDates.length; i++) {
                const subsidy = calculateChildSubsidy(birthDates[i]);
                totalSubsidy += subsidy.amount;

                
                childrenResults.push({
                    birthDate: formatDate(birthDates[i]),
                    amount: subsidy.amount,
                    months: subsidy.months,
                    age: subsidy.age
                });
            }

            
            // 显示结果
            showResults(totalSubsidy, childrenResults);
        }

        
        // 计算单个宝宝的补贴
        function calculateChildSubsidy(birthDate) {
            const today = new Date();
            const threeYearsOld = new Date(birthDate);
            threeYearsOld.setFullYear(threeYearsOld.getFullYear() + 3);

            
            // 计算宝宝年龄（年+月）
            const ageYears = today.getFullYear() - birthDate.getFullYear();
            const ageMonths = today.getMonth() - birthDate.getMonth();
            const totalMonths = (ageYears * 12) + ageMonths;
            const age = totalMonths >= 12 ? 
                `${Math.floor(totalMonths/12)}岁${totalMonths%12}个月` : 
                `${totalMonths}个月`;

            
            // 检查是否已满3周岁
            if (today >= threeYearsOld) {
                return {
                    amount: 0,
                    months: 0,
                    age: age
                };
            }

            
            // 计算剩余月数（更精确的方法）
            let monthsRemaining = (threeYearsOld.getFullYear() - today.getFullYear()) * 12;
            monthsRemaining -= today.getMonth() + 1;
            monthsRemaining += threeYearsOld.getMonth() + 1;

            
            // 确保月数不为负
            monthsRemaining = Math.max(0, monthsRemaining);

            
            // 处理过渡期（2025年1月1日前出生）
            const policyStartDate = new Date('2025-01-01');
            let eligibleMonths = monthsRemaining;

            
            if (birthDate < policyStartDate) {
                // 计算过渡期可用月数
                const transitionMonths = Math.ceil((threeYearsOld - policyStartDate) / (30.44 * 24 * 60 * 60 * 1000));
                eligibleMonths = Math.min(eligibleMonths, transitionMonths);
            }

            
            // 计算总补贴金额
            const totalSubsidy = Math.round(300 * eligibleMonths);

            
            return {
                amount: totalSubsidy,
                months: eligibleMonths,
                age: age
            };
        }

        
        // 显示结果
        function showResults(total, childrenResults) {
            // 更新总金额
            document.getElementById('totalAmount').textContent = `¥${total.toLocaleString()}`;

            
            // 更新每个宝宝的结果
            const childrenResultsContainer = document.getElementById('childrenResults');
            childrenResultsContainer.innerHTML = '';

            
            childrenResults.forEach((child, index) => {
                const childResult = document.createElement('div');
                childResult.className = 'child-result';
                childResult.innerHTML = `
                    <p><strong>宝宝${index+1}</strong></p>
                    <p>出生日期：${child.birthDate}（当前年龄：${child.age}）</p>
                    <p>可领取月数：${child.months}个月</p>
                    <p>补贴金额：<strong>¥${child.amount.toLocaleString()}</strong></p>
                `;
                childrenResultsContainer.appendChild(childResult);
            });

            
            // 显示结果容器
            document.getElementById('resultContainer').style.display = 'block';

            
            // 滚动到结果位置
            document.getElementById('resultContainer').scrollIntoView({ behavior: 'smooth', block: 'nearest' });
        }

        
        // 辅助函数：格式化日期为YYYY-MM-DD
        function formatDate(date) {
            const year = date.getFullYear();
            const month = String(date.getMonth() + 1).padStart(2, '0');
            const day = String(date.getDate()).padStart(2, '0');
            return `${year}-${month}-${day}`;
        }
    </script>
</body>
</html>

最终效果预览：

国家育儿补贴计算器

部署步骤：

  1. 复制完整代码到文本编辑器
  2. 保存为 育儿补贴计算器.html
  3. 用浏览器打开即可使用
  4. 也可直接复制至HTML在线编辑器里面运行使用。

使用说明

  1. 添加宝宝：
    • 默认显示一个宝宝输入框
    • 点击"添加另一个宝宝"按钮增加新输入框
    • 每个宝宝可单独设置出生日期
  2. 计算补贴：
    • 点击"计算我的补贴"按钮
    • 系统为每个宝宝独立计算补贴金额
    • 显示总补贴金额和每个宝宝的详情
  3. 查看结果：
    • 总补贴金额以大号字体显示
    • 每个宝宝的详情包括：
      • 出生日期
      • 当前年龄
      • 可领取月数
      • 补贴金额

六、学习资源推荐

在编程狮(W3Cschool)平台学习更多知识：

  1. 零基础入门：

  1. 进阶课程：

在编程狮平台，我们相信"代码改变生活"。通过开发这样的实用工具，您不仅能提升编程技能，还能为社会创造真实价值！

HTML CSS JavaScript 前端 实例代码

0 人点赞

©w3cschool编程狮闽ICP备15016281号-3

违法和不良信息举报电话：173-0602-2364|举报邮箱：jubao@eeedong.com