2025國家育兒補(bǔ)貼計算器開發(fā)教程 - 零基礎(chǔ)HTML/CSS/JavaScript實戰(zhàn)

編程獅（w3cschool.cn） 2025-07-29 14:41:43 瀏覽數(shù) (561)

反饋

零基礎(chǔ)掌握HTML+CSS+JavaScript實戰(zhàn)開發(fā)

一、項目背景與政策解讀

2025年7月28日，國務(wù)院發(fā)布了《育兒補(bǔ)貼制度實施方案》，為全國0-3歲嬰幼兒家庭提供育兒補(bǔ)貼。今天編程獅(W3Cschool.cn)將帶您一步步開發(fā)一個實用的育兒補(bǔ)貼計算器，幫助家長快速了解可領(lǐng)取的補(bǔ)貼金額。本教程專為零基礎(chǔ)學(xué)員設(shè)計，無需前置知識，我們將使用最基礎(chǔ)的HTML、CSS和JavaScript實現(xiàn)完整功能。

政策要點：

補(bǔ)貼對象：所有3周歲以下嬰幼兒
補(bǔ)貼標(biāo)準(zhǔn)：每孩每月300元（全年3600元）
過渡期處理：2025年1月1日前出生的兒童按剩余月數(shù)計算
申請時間：2025年9月1日起開放申請

二、計算器功能設(shè)計

我們的計算器將實現(xiàn)以下功能：

支持多個不同年齡寶寶分別計算
動態(tài)添加/刪除寶寶輸入框
自動計算每個寶寶的補(bǔ)貼金額和可領(lǐng)取月數(shù)
顯示詳細(xì)計算結(jié)果和申請渠道
響應(yīng)式設(shè)計，適配各種設(shè)備

三、零基礎(chǔ)開發(fā)教程

1. HTML框架

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <!-- 頭部代碼如前所示 -->
</head>
<body>
    <!-- 完整HTML結(jié)構(gòu)如前所示 -->

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

相當(dāng)于打了一個地基

2. HTML結(jié)構(gòu)設(shè)計（用戶界面）

<div class="calculator-container">
  <!-- 標(biāo)題區(qū)域 -->
  <div class="calculator-header">
    <i class="fas fa-calculator"></i>
    <h2>補(bǔ)貼計算器</h2>
  </div>

  
  <!-- 寶寶輸入?yún)^(qū)域 -->
  <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">計算我的補(bǔ)貼</button>

  
  <!-- 結(jié)果展示區(qū)域 -->
  <div class="result-container">
    <h3>您的育兒補(bǔ)貼計算結(jié)果</h3>
    <div class="result-amount">￥0</div>
    <div id="childrenResults"></div>
  </div>
</div>

將以上代碼復(fù)制到HTML在線編譯器預(yù)覽效果：

可以看到現(xiàn)在還是個毛坯房的狀態(tài)，我們繼續(xù)↓

3. CSS樣式設(shè)計（美化界面）

/* 編程獅推薦：現(xiàn)代化漸變背景 */
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;
}


/* 結(jié)果展示樣式 */
.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核心邏輯

添加/刪除寶寶功能

// 編程獅技巧：動態(tài)管理寶寶輸入框
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--;
}

補(bǔ)貼計算核心算法

// 編程獅核心算法：精準(zhǔn)計算育兒補(bǔ)貼
function calculateChildSubsidy(birthDate) {
  const 今日 = new Date();
  const 三周歲日期 = new Date(birthDate);
  三周歲日期.setFullYear(三周歲日期.getFullYear() + 3);

  
  // 已滿3周歲無補(bǔ)貼
  if (今日 >= 三周歲日期) return { 金額: 0, 月數(shù): 0 };

  
  // 計算剩余月數(shù)
  let 剩余月數(shù) = (三周歲日期.getFullYear() - 今日.getFullYear()) * 12;
  剩余月數(shù) -= 今日.getMonth() + 1;
  剩余月數(shù) += 三周歲日期.getMonth() + 1;

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

  
  const 總補(bǔ)貼 = Math.max(0, Math.round(300 * 剩余月數(shù)));

  
  return {
    金額: 總補(bǔ)貼,
    月數(shù): 剩余月數(shù)
  };
}

四、核心功能實現(xiàn)詳解

1. 多寶寶動態(tài)管理

動態(tài)添加：用戶可隨時添加多個寶寶輸入框
獨立計算：每個寶寶的補(bǔ)貼獨立計算
靈活刪除：可刪除不需要的寶寶輸入（至少保留一個）

2. 日期計算算法

// 編程獅日期處理技巧
function 計算寶寶年齡(出生日期) {
  const 今日 = new Date();
  const 年齡月數(shù) = (今日.getFullYear() - 出生日期.getFullYear()) * 12 +
                (今日.getMonth() - 出生日期.getMonth());

  
  if (年齡月數(shù) >= 12) {
    return `${Math.floor(年齡月數(shù)/12)}歲${年齡月數(shù)%12}個月`;
  }
  return `${年齡月數(shù)}個月`;
}

3. 結(jié)果可視化展示

// 編程獅技巧：清晰展示計算結(jié)果
function 顯示結(jié)果(總補(bǔ)貼, 寶寶結(jié)果) {
  const 結(jié)果容器 = document.getElementById('childrenResults');
  結(jié)果容器.innerHTML = '';

  
  寶寶結(jié)果.forEach((寶寶, 序號) => {
    結(jié)果容器.innerHTML += `
      <div class="child-result">
        <p><strong>寶寶${序號+1}</strong></p>
        <p>出生日期：${寶寶.出生日期}</p>
        <p>當(dāng)前年齡：${寶寶.年齡}</p>
        <p>可領(lǐng)取月數(shù)：${寶寶.月數(shù)}個月</p>
        <p>補(bǔ)貼金額：<strong>￥${寶寶.金額.toLocaleString()}</strong></p>
      </div>
    `;
  });

  
  document.querySelector('.result-amount').textContent = 
    `￥${總補(bǔ)貼.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年最新國家育兒補(bǔ)貼計算器，根據(jù)寶寶出生日期計算可領(lǐng)取的育兒補(bǔ)貼金額">
    <title>2025國家育兒補(bǔ)貼計算器 - 編程獅(W3Cschool)實戰(zhàn)項目</title>
    <link rel="stylesheet" >
    <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>國家育兒補(bǔ)貼計算器</h1>
            <p class="subtitle">根據(jù)2025年最新育兒補(bǔ)貼政策開發(fā)，精準(zhǔn)計算您可領(lǐng)取的育兒補(bǔ)貼金額</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">補(bǔ)貼計算器</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> 計算我的補(bǔ)貼
                </button>

                
                <div class="disclaimer">
                    <i class="fas fa-info-circle"></i> 本計算器基于2025年7月28日發(fā)布的《育兒補(bǔ)貼制度實施方案》開發(fā)，計算結(jié)果僅供參考，具體以當(dāng)?shù)貓?zhí)行為準(zhǔn)。
                </div>

                
                <div class="result-container" id="resultContainer">
                    <h3 class="result-title">您的育兒補(bǔ)貼計算結(jié)果</h3>
                    <div class="result-amount" id="totalAmount">￥0</div>
                    <p>根據(jù)政策規(guī)定和您提供的信息計算得出</p>

                    
                    <div id="childrenResults">
                        <!-- 每個寶寶的結(jié)果將在這里動態(tài)生成 -->
                    </div>

                    
                    <div class="result-details">
                        <p><strong>計算說明：</strong></p>
                        <ul>
                            <li>每月補(bǔ)貼金額：￥300元</li>
                            <li>補(bǔ)貼發(fā)放至寶寶滿3周歲</li>
                            <li>2025年1月1日前出生的寶寶按剩余月數(shù)計算</li>
                        </ul>
                    </div>

                    
                    <div class="apply-section" style="margin-top: 20px;">
                        <h4><i class="fas fa-external-link-alt"></i> 申請渠道：</h4>
                        <p>1. 當(dāng)?shù)卣?wù)服務(wù)平臺（如浙里辦、粵省事）</p>
                        <p>2. 支付寶搜索【育兒補(bǔ)貼申請】</p>
                        <p>3. 街道社區(qū)服務(wù)中心線下辦理</p>
                    </div>
                </div>
            </div>

            
            <div class="info-section">
                <div class="info-header">
                    <i class="fas fa-file-alt"></i>
                    <h2 class="info-title">2025育兒補(bǔ)貼政策解讀</h2>
                </div>

                
                <div class="policy-card">
                    <h3 class="policy-title">政策要點</h3>
                    <p>根據(jù)2025年7月28日發(fā)布的《育兒補(bǔ)貼制度實施方案》：</p>
                    <ul>
                        <li><strong>補(bǔ)貼對象</strong>：所有3周歲以下嬰幼兒</li>
                        <li><strong>補(bǔ)貼標(biāo)準(zhǔn)</strong>：每孩每年3600元（按月發(fā)放）</li>
                        <li><strong>過渡期</strong>：2025年1月1日前出生兒童按剩余月數(shù)計算</li>
                        <li><strong>發(fā)放方式</strong>：按月發(fā)放至監(jiān)護(hù)人銀行賬戶</li>
                    </ul>
                </div>

                
                <div class="policy-card">
                    <h3 class="policy-title">申請條件</h3>
                    <ul>
                        <li>申請人需為嬰幼兒法定監(jiān)護(hù)人</li>
                        <li>嬰幼兒需具有中國國籍</li>
                        <li>按規(guī)定完成出生登記</li>
                        <li>符合當(dāng)?shù)仄渌嚓P(guān)規(guī)定</li>
                    </ul>
                </div>

                
                <div class="policy-card">
                    <h3 class="policy-title">常見問題解答</h3>
                    <ul>
                        <li><strong>Q：多胞胎如何計算？</strong><br>A：每個孩子單獨計算補(bǔ)貼</li>
                        <li><strong>Q：補(bǔ)貼需要繳稅嗎？</strong><br>A：育兒補(bǔ)貼屬于免稅收入</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  target="_blank">育兒補(bǔ)貼制度實施方案</a></li>
                    <li><a  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">精準(zhǔn)計算</h4>
                <p>基于最新政策設(shè)計算法，考慮過渡期等特殊情況</p>
            </div>

            
            <div class="feature-card">
                <div class="feature-icon">
                    <i class="fas fa-mobile-alt"></i>
                </div>
                <h4 class="feature-title">移動友好</h4>
                <p>響應(yīng)式設(shè)計，在手機(jī)、平板和電腦上均可完美使用</p>
            </div>

            
            <div class="feature-card">
                <div class="feature-icon">
                    <i class="fas fa-shield-alt"></i>
                </div>
                <h4 class="feature-title">隱私保護(hù)</h4>
                <p>所有計算在本地完成，不收集任何用戶數(shù)據(jù)</p>
            </div>

            
            <div class="feature-card">
                <div class="feature-icon">
                    <i class="fas fa-sync-alt"></i>
                </div>
                <h4 class="feature-title">實時更新</h4>
                <p>政策變化時及時更新計算規(guī)則</p>
            </div>
        </div>

        
        <div class="w3cschool-brand">
            <h3 class="brand-title">想自己開發(fā)這樣的實用工具？</h3>
            <p>在<span class="highlight">編程獅(W3Cschool)</span>學(xué)習(xí)Web開發(fā)技術(shù)，掌握HTML、CSS和JavaScript：</p>
            <div class="brand-logo">編程獅</div>
            <p>零基礎(chǔ)入門到項目實戰(zhàn)，快速成為前端開發(fā)工程師</p>
            <a href="http://xlrtb.cn" class="brand-button" target="_blank">
                立即學(xué)習(xí) <i class="fas fa-arrow-right"></i>
            </a>
        </div>

        
        <footer>
            <p>? 2025 國家育兒補(bǔ)貼計算器 - 本工具僅作為參考，具體政策執(zhí)行以當(dāng)?shù)卣?guī)定為準(zhǔn)</p>
            <p>技術(shù)支持：編程獅(W3Cschool)前端開發(fā)團(tuán)隊</p>
        </footer>
    </div>


    <script>
        // 初始寶寶數(shù)量
        let childCount = 1;

        
        // 頁面加載時設(shè)置默認(rèn)日期
        window.addEventListener('DOMContentLoaded', () => {
            // 設(shè)置第一個寶寶的默認(rèn)出生日期為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);

            
            // 設(shè)置新寶寶的默認(rèn)出生日期為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';
            }
        }

        
        // 計算補(bǔ)貼函數(shù)
        function calculateSubsidy() {
            // 獲取所有寶寶的出生日期
            const birthInputs = document.querySelectorAll('.child-birthdate');
            const birthDates = [];

            
            for (let i = 0; i < birthInputs.length; i++) {
                if (!birthInputs[i].value) {
                    alert(`請?zhí)顚懙?{i+1}個寶寶的出生日期`);
                    return;
                }
                birthDates.push(new Date(birthInputs[i].value));
            }

            
            // 計算每個寶寶的補(bǔ)貼
            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
                });
            }

            
            // 顯示結(jié)果
            showResults(totalSubsidy, childrenResults);
        }

        
        // 計算單個寶寶的補(bǔ)貼
        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
                };
            }

            
            // 計算剩余月數(shù)（更精確的方法）
            let monthsRemaining = (threeYearsOld.getFullYear() - today.getFullYear()) * 12;
            monthsRemaining -= today.getMonth() + 1;
            monthsRemaining += threeYearsOld.getMonth() + 1;

            
            // 確保月數(shù)不為負(fù)
            monthsRemaining = Math.max(0, monthsRemaining);

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

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

            
            // 計算總補(bǔ)貼金額
            const totalSubsidy = Math.round(300 * eligibleMonths);

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

        
        // 顯示結(jié)果
        function showResults(total, childrenResults) {
            // 更新總金額
            document.getElementById('totalAmount').textContent = `￥${total.toLocaleString()}`;

            
            // 更新每個寶寶的結(jié)果
            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}（當(dāng)前年齡：${child.age}）</p>
                    <p>可領(lǐng)取月數(shù)：${child.months}個月</p>
                    <p>補(bǔ)貼金額：<strong>￥${child.amount.toLocaleString()}</strong></p>
                `;
                childrenResultsContainer.appendChild(childResult);
            });

            
            // 顯示結(jié)果容器
            document.getElementById('resultContainer').style.display = 'block';

            
            // 滾動到結(jié)果位置
            document.getElementById('resultContainer').scrollIntoView({ behavior: 'smooth', block: 'nearest' });
        }

        
        // 輔助函數(shù)：格式化日期為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>

最終效果預(yù)覽：

國家育兒補(bǔ)貼計算器

部署步驟：

復(fù)制完整代碼到文本編輯器
保存為 育兒補(bǔ)貼計算器.html
用瀏覽器打開即可使用
也可直接復(fù)制至HTML在線編輯器里面運行使用。

使用說明

添加寶寶：
- 默認(rèn)顯示一個寶寶輸入框
- 點擊"添加另一個寶寶"按鈕增加新輸入框
- 每個寶寶可單獨設(shè)置出生日期
計算補(bǔ)貼：
- 點擊"計算我的補(bǔ)貼"按鈕
- 系統(tǒng)為每個寶寶獨立計算補(bǔ)貼金額
- 顯示總補(bǔ)貼金額和每個寶寶的詳情
查看結(jié)果：
- 總補(bǔ)貼金額以大號字體顯示
- 每個寶寶的詳情包括：
  - 出生日期
  - 當(dāng)前年齡
  - 可領(lǐng)取月數(shù)
  - 補(bǔ)貼金額