简易 BMI 身体质量指数计算器
1.优雅的视觉设计：
采用柔和的渐变色彩（淡蓝到淡粉的渐变）
圆角元素和阴影效果营造现代感
精心设计的间距和排版提升可读性
响应式设计适应不同屏幕尺寸
2.直观的用户界面：
清晰的输入区域带有图标标识
视觉反馈（焦点状态、悬停效果）
结果区域根据BMI值变化样式
彩色分类指示器直观展示BMI范围
3.详细的教育内容：
BMI定义和计算公式说明
完整的BMI分类标准表格
实用提示和注意事项
结果附带健康建议
4.交互体验优化：
平滑的动画过渡效果
输入验证和错误处理
结果区域动态更新样式
响应式按钮和交互元素
5.技术实现：
纯HTML/CSS/JavaScript实现
使用Flexbox进行布局
使用CSS变量保持一致性
使用Font Awesome图标库
6.截图展示：
7.代码重现：
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>简约优雅BMI计算器</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', Tahoma, Geneva, Verdana, sans-serif;}body {background: linear-gradient(135deg, #f5f7fa 0%, #e4edf5 100%);min-height: 100vh;display: flex;justify-content: center;align-items: center;padding: 20px;color: #4a5568;line-height: 1.6;}.container {max-width: 900px;width: 100%;background: rgba(255, 255, 255, 0.92);border-radius: 24px;box-shadow: 0 15px 50px rgba(113, 128, 150, 0.15);overflow: hidden;display: flex;flex-direction: column;transition: all 0.3s ease;}/* 头部样式 */header {background: linear-gradient(120deg, #a8edea 0%, #fed6e3 100%);padding: 40px 30px;text-align: center;color: #2d3748;position: relative;overflow: hidden;}header::before {content: "";position: absolute;top: -50px;left: -50px;width: 150px;height: 150px;background: rgba(255, 255, 255, 0.15);border-radius: 50%;}header::after {content: "";position: absolute;bottom: -80px;right: -60px;width: 200px;height: 200px;background: rgba(255, 255, 255, 0.1);border-radius: 50%;}h1 {font-size: 2.8rem;margin-bottom: 15px;position: relative;z-index: 2;font-weight: 700;letter-spacing: -0.5px;}.subtitle {font-size: 1.2rem;max-width: 600px;margin: 0 auto;position: relative;z-index: 2;font-weight: 400;opacity: 0.9;}/* 主内容区 */main {display: flex;padding: 30px;gap: 30px;}.calculator-section {flex: 1;background: #ffffff;border-radius: 18px;padding: 30px;box-shadow: 0 8px 25px rgba(160, 174, 192, 0.1);}.info-section {flex: 1;display: flex;flex-direction: column;gap: 25px;}.info-card {background: #ffffff;border-radius: 18px;padding: 25px;box-shadow: 0 8px 25px rgba(160, 174, 192, 0.1);}h2 {font-size: 1.8rem;margin-bottom: 20px;color: #2d3748;display: flex;align-items: center;gap: 10px;}h2 i {color: #63b3ed;}/* 输入区域样式 */.input-group {margin-bottom: 25px;}label {display: block;margin-bottom: 10px;font-weight: 500;color: #4a5568;font-size: 1.1rem;}.input-container {position: relative;}input {width: 100%;padding: 16px 20px 16px 50px;border: 2px solid #e2e8f0;border-radius: 14px;font-size: 1.1rem;transition: all 0.3s ease;color: #2d3748;background: #f8fafc;}input:focus {outline: none;border-color: #90cdf4;box-shadow: 0 0 0 3px rgba(144, 205, 244, 0.3);background: #ffffff;}.input-icon {position: absolute;left: 18px;top: 50%;transform: translateY(-50%);color: #a0aec0;font-size: 1.2rem;}.unit {position: absolute;right: 18px;top: 50%;transform: translateY(-50%);color: #a0aec0;font-size: 1rem;}/* 按钮样式 */.btn-calculate {background: linear-gradient(120deg, #63b3ed 0%, #4299e1 100%);color: white;border: none;padding: 16px 30px;font-size: 1.2rem;font-weight: 600;border-radius: 14px;cursor: pointer;width: 100%;transition: all 0.3s ease;box-shadow: 0 6px 15px rgba(66, 153, 225, 0.3);margin-top: 10px;}.btn-calculate:hover {transform: translateY(-3px);box-shadow: 0 8px 20px rgba(66, 153, 225, 0.4);}.btn-calculate:active {transform: translateY(0);}/* 结果展示 */.result-container {margin-top: 30px;text-align: center;padding: 25px;border-radius: 18px;background: #f8fafc;border: 2px dashed #e2e8f0;transition: all 0.4s ease;}.bmi-value {font-size: 3.5rem;font-weight: 800;margin: 10px 0;background: linear-gradient(120deg, #63b3ed 0%, #4299e1 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;}.bmi-category {font-size: 1.5rem;font-weight: 600;margin-bottom: 15px;color: #2d3748;}.bmi-description {font-size: 1.1rem;max-width: 400px;margin: 0 auto;}/* 分类指示器 */.category-indicator {height: 12px;background: #e2e8f0;border-radius: 10px;margin: 25px 0;position: relative;overflow: hidden;}.indicator-range {position: absolute;height: 100%;border-radius: 10px;}.range-underweight { background: #63b3ed; width: 20%; }.range-normal { background: #68d391; width: 30%; left: 20%; }.range-overweight { background: #f6e05e; width: 25%; left: 50%; }.range-obese { background: #fc8181; width: 25%; left: 75%; }.category-labels {display: flex;justify-content: space-between;font-size: 0.9rem;color: #718096;margin-top: 10px;}/* 信息卡片样式 */.bmi-table {width: 100%;border-collapse: collapse;margin-top: 15px;}.bmi-table th, .bmi-table td {padding: 14px;text-align: left;border-bottom: 1px solid #edf2f7;}.bmi-table th {color: #4a5568;font-weight: 600;}.bmi-table tr:last-child td {border-bottom: none;}.bmi-table tr:hover {background-color: #f8fafc;}.status-cell {display: flex;align-items: center;gap: 8px;}.status-indicator {width: 12px;height: 12px;border-radius: 50%;}.indicator-underweight { background: #63b3ed; }.indicator-normal { background: #68d391; }.indicator-overweight { background: #f6e05e; }.indicator-obese { background: #fc8181; }/* 响应式设计 */@media (max-width: 768px) {main {flex-direction: column;}h1 {font-size: 2.2rem;}}/* 动画效果 */@keyframes fadeIn {from { opacity: 0; transform: translateY(20px); }to { opacity: 1; transform: translateY(0); }}.fade-in {animation: fadeIn 0.6s ease forwards;}/* 底部样式 */footer {text-align: center;padding: 25px;color: #718096;font-size: 0.95rem;border-top: 1px solid #edf2f7;background: #f8fafc;}footer a {color: #4299e1;text-decoration: none;}footer a:hover {text-decoration: underline;}</style>
</head>
<body><div class="container"><header><h1>BMI身体质量指数计算器</h1><p class="subtitle">通过身高和体重计算您的身体质量指数，了解您的健康状况</p></header><main><section class="calculator-section"><h2><i class="fas fa-calculator"></i> BMI计算</h2><div class="input-group"><label for="height">身高</label><div class="input-container"><i class="fas fa-ruler-vertical input-icon"></i><input type="number" id="height" placeholder="输入您的身高" min="100" max="250" step="0.1"><span class="unit">cm</span></div></div><div class="input-group"><label for="weight">体重</label><div class="input-container"><i class="fas fa-weight input-icon"></i><input type="number" id="weight" placeholder="输入您的体重" min="20" max="300" step="0.1"><span class="unit">kg</span></div></div><button class="btn-calculate" id="calculateBtn"><i class="fas fa-calculator"></i> 计算BMI</button><div class="result-container" id="resultContainer"><p>填写您的身高体重信息并点击计算按钮</p><div class="bmi-value">--</div><div class="bmi-category">等待计算</div><p class="bmi-description">身体质量指数是衡量人体胖瘦程度的常用指标</p></div><div class="category-indicator"><div class="indicator-range range-underweight"></div><div class="indicator-range range-normal"></div><div class="indicator-range range-overweight"></div><div class="indicator-range range-obese"></div></div><div class="category-labels"><span>偏瘦</span><span>健康</span><span>超重</span><span>肥胖</span></div></section><section class="info-section"><div class="info-card"><h2><i class="fas fa-info-circle"></i> 什么是BMI？</h2><p>身体质量指数（Body Mass Index，简称BMI）是国际上常用的衡量人体胖瘦程度以及是否健康的一个标准。</p><p>BMI计算公式为：<strong>体重(kg) ÷ 身高(m)的平方</strong></p><p>例如：一个人体重70kg，身高1.75m，则BMI = 70 ÷ (1.75×1.75) ≈ 22.86</p></div><div class="info-card"><h2><i class="fas fa-list"></i> BMI分类标准</h2><table class="bmi-table"><thead><tr><th>分类</th><th>BMI范围</th><th>健康风险</th></tr></thead><tbody><tr><td><div class="status-cell"><div class="status-indicator indicator-underweight"></div><span>偏瘦</span></div></td><td>< 18.5</td><td>营养不良风险增加</td></tr><tr><td><div class="status-cell"><div class="status-indicator indicator-normal"></div><span>正常</span></div></td><td>18.5 - 24.9</td><td>健康风险最低</td></tr><tr><td><div class="status-cell"><div class="status-indicator indicator-overweight"></div><span>超重</span></div></td><td>25.0 - 29.9</td><td>轻度健康风险增加</td></tr><tr><td><div class="status-cell"><div class="status-indicator indicator-obese"></div><span>肥胖</span></div></td><td>≥ 30.0</td><td>显著健康风险增加</td></tr></tbody></table></div><div class="info-card"><h2><i class="fas fa-lightbulb"></i> 使用提示</h2><ul style="padding-left: 20px; margin-top: 10px;"><li>BMI适用于大多数成年人，但不适用于运动员、孕妇等特殊人群</li><li>BMI只是健康指标之一，应结合体脂率、腰围等综合评估</li><li>亚洲人的BMI标准可能略有不同，建议咨询专业医疗人员</li><li>计算结果仅供参考，不作为医疗诊断依据</li></ul></div></section></main><footer><p>© 2025 健康生活BMI计算器 | 数据仅供参考，健康问题请咨询专业医疗人员</p></footer></div><script>document.addEventListener('DOMContentLoaded', function() {const calculateBtn = document.getElementById('calculateBtn');const heightInput = document.getElementById('height');const weightInput = document.getElementById('weight');const resultContainer = document.getElementById('resultContainer');const bmiValueEl = document.querySelector('.bmi-value');const bmiCategoryEl = document.querySelector('.bmi-category');const bmiDescriptionEl = document.querySelector('.bmi-description');calculateBtn.addEventListener('click', calculateBMI);// 初始加载时显示提示信息showResultMessage('填写您的身高体重信息并点击计算按钮', '等待计算', '身体质量指数是衡量人体胖瘦程度的常用指标');function calculateBMI() {const height = parseFloat(heightInput.value) / 100; // 转换为米const weight = parseFloat(weightInput.value);if (isNaN(height) || isNaN(weight) || height <= 0 || weight <= 0) {showResultMessage('请输入有效的数值', '数据错误', '身高和体重必须是大于零的数字');return;}const bmi = weight / (height * height);const roundedBMI = bmi.toFixed(1);let category, description, color;if (bmi < 18.5) {category = '偏瘦';description = '您的体重低于正常范围，建议增加营养摄入和适度运动';color = '#63b3ed';} else if (bmi < 25) {category = '健康';description = '恭喜！您的体重在健康范围内，请继续保持良好生活习惯';color = '#68d391';} else if (bmi < 30) {category = '超重';description = '您的体重略高于正常范围，建议调整饮食和增加运动量';color = '#f6e05e';} else {category = '肥胖';description = '您的体重显著高于正常范围，建议咨询专业医疗人员制定健康计划';color = '#fc8181';}showResult(roundedBMI, category, description, color);}function showResult(bmiValue, category, description, color) {bmiValueEl.textContent = bmiValue;bmiCategoryEl.textContent = category;bmiDescriptionEl.textContent = description;// 更新结果容器样式resultContainer.style.borderColor = color;resultContainer.style.background = `${color}10`; // 10% 透明度的颜色// 添加动画效果resultContainer.classList.remove('fade-in');void resultContainer.offsetWidth; // 触发重绘resultContainer.classList.add('fade-in');}function showResultMessage(valueText, categoryText, descriptionText) {bmiValueEl.textContent = valueText;bmiCategoryEl.textContent = categoryText;bmiDescriptionEl.textContent = descriptionText;// 重置样式resultContainer.style.borderColor = '#e2e8f0';resultContainer.style.background = '#f8fafc';}});</script>
</body>
</html>