<!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>
<style>
body {
font-family: 'Arial', sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 20px;
background-color: #f9f9f9;
color: #333;
}
h1 {
color: #2c3e50;
text-align: center;
margin-bottom: 30px;
}
.container {
background-color: white;
border-radius: 15px;
padding: 30px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.form-group {
margin-bottom: 20px;
}
label {
display: block;
margin-bottom: 8px;
color: #34495e;
font-weight: bold;
}
input, select {
width: 100%;
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
font-size: 16px;
}
button {
background-color: #3498db;
color: white;
border: none;
padding: 12px 20px;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
transition: background-color 0.3s;
width: 100%;
margin-top: 10px;
}
button:hover {
background-color: #2980b9;
}
#result {
margin-top: 30px;
padding: 20px;
border-radius: 10px;
background-color: #f8f9fa;
text-align: center;
font-size: 18px;
display: none;
}
.emoji {
font-size: 24px;
margin: 0 10px;
}
.note {
margin-top: 20px;
padding: 15px;
background-color: #e3f2fd;
border-radius: 5px;
font-size: 14px;
}
.diet-recommendations {
margin-top: 30px;
padding: 20px;
background-color: #fffde7;
border-radius: 10px;
display: none;
}
.diet-recommendations h2 {
color: #2c3e50;
margin-top: 0;
}
.diet-list {
list-style-type: none;
padding: 0;
}
.diet-list li {
padding: 10px;
margin-bottom: 10px;
background-color: white;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
.diet-list li h3 {
margin: 0 0 10px 0;
color: #3498db;
}
.diet-list li p {
margin: 5px 0;
color: #333;
}
</style>
</head>
<body>
<h1>BMI 计算工具 🌟</h1>
<div class="container">
<div class="form-group">
<label for="age">年龄 👶/👴</label>
<input type="number" id="age" min="0" max="120" placeholder="请输入年龄">
</div>
<div class="form-group">
<label for="gender">性别 👩/👨</label>
<select id="gender">
<option value="male">男性</option>
<option value="female">女性</option>
</select>
</div>
<div class="form-group">
<label for="height">身高 (厘米) 📏</label>
<input type="number" id="height" min="50" max="250" placeholder="请输入身高">
</div>
<div class="form-group">
<label for="weight">体重 (千克) 🏋️</label>
<input type="number" id="weight" min="10" max="300" placeholder="请输入体重">
</div>
<button>计算 BMI 📈</button>
<div id="result">
<h2 id="resultTitle">你的 BMI 结果 🌈</h2>
<p id="bmiValue">BMI: </p>
<p id="bmiCategory">类别: </p>
<p id="recommendation">建议: </p>
</div>
<div id="dietRecommendations" class="diet-recommendations">
<h2>根据您的 BMI 结果，以下是饮食推荐 🍎</h2>
<ul class="diet-list" id="specificDietRecommendations">
</ul>
</div>
<div class="note">
<p>⚠️ 注意: 此工具仅供参考，不能替代专业医疗建议。如果您有关于体重或健康的疑问，请咨询医生或营养师。</p>
</div>
</div>
<script>
function calculateBMI() {
const age = parseInt(document.getElementById('age').value);
const gender = document.getElementById('gender').value;
const height = parseFloat(document.getElementById('height').value) / 100;
const weight = parseFloat(document.getElementById('weight').value);
if (isNaN(age) || isNaN(height) || isNaN(weight)) {
alert('请填写所有信息！');
return;
}
const bmi = weight / (height * height);
let category = '';
let recommendation = '';
let dietRecommendations = [];
// 根据不同人群判断BMI范围并提供饮食推荐
if (age < 7) {
// 7岁以下儿童
if (bmi < 14) {
category = '消瘦';
dietRecommendations = [
'增加高热量、高蛋白食物，如全脂牛奶、鸡蛋、坚果等',
'保证充足的碳水化合物摄入，选择复杂碳水化合物如全麦面包、燕麦片',
'增加餐次，少量多餐',
'咨询儿科医生获取专业建议'
];
} else if (bmi < 17) {
category = '正常';
dietRecommendations = [
'保持均衡饮食，多样化食物选择',
'适量摄入优质蛋白质、碳水化合物和健康脂肪',
'保证新鲜蔬果的摄入',
'避免挑食和偏食'
];
} else if (bmi < 20) {
category = '超重';
dietRecommendations = [
'控制高糖、高脂肪食物的摄入',
'增加蔬菜、水果和全谷物的比例',
'选择低脂蛋白质，如鸡胸肉、鱼虾',
'避免饮料和果汁，多喝水'
];
} else {
category = '肥胖';
dietRecommendations = [
'在医生或营养师指导下进行饮食调整',
'减少高热量、高脂肪和高糖食物',
'增加膳食纤维摄入，帮助控制食欲',
'保证充足的优质蛋白质，维持肌肉量'
];
}
recommendation = '儿童的BMI评估较为复杂，建议咨询儿科医生。';
} else if (age < 18) {
// 7-18岁儿童青少年
if (bmi < 16) {
category = '消瘦';
dietRecommendations = [
'增加热量密度高的食物，如坚果、干果',
'保证足够的蛋白质摄入，支持生长发育',
'选择全谷物和复杂碳水化合物',
'避免过度节食'
];
} else if (bmi < 21) {
category = '正常';
dietRecommendations = [
'保持均衡饮食，多样化食物选择',
'适量摄入优质蛋白质、碳水化合物和健康脂肪',
'保证新鲜蔬果的摄入',
'避免挑食和偏食'
];
} else if (bmi < 25) {
category = '超重';
dietRecommendations = [
'控制高糖、高脂肪食物的摄入',
'增加蔬菜、水果和全谷物的比例',
'选择低脂蛋白质，如鸡胸肉、鱼虾',
'避免饮料和果汁，多喝水'
];
} else {
category = '肥胖';
dietRecommendations = [
'在医生或营养师指导下进行饮食调整',
'减少高热量、高脂肪和高糖食物',
'增加膳食纤维摄入，帮助控制食欲',
'保证充足的优质蛋白质，维持肌肉量'
];
}
recommendation = '保持健康饮食和适量运动，避免长时间久坐。';
} else if (age >= 65) {
// 老年人
if (bmi < 22) {
category = '体重过低';
dietRecommendations = [
'增加高生物价蛋白质摄入，如鸡蛋、鱼类',
'选择易消化的食物，如软质全谷物、炖菜',
'适量增加健康脂肪，如橄榄油、鱼油',
'少量多餐，避免一次性大量进食'
];
} else if (bmi < 27) {
category = '正常';
dietRecommendations = [
'保持均衡饮食，多样化食物选择',
'适量摄入优质蛋白质、碳水化合物和健康脂肪',
'保证新鲜蔬果的摄入',
'注意食物的质地和易咀嚼性'
];
} else {
category = '超重/肥胖';
dietRecommendations = [
'在医生或营养师指导下进行饮食调整',
'减少高热量、高脂肪和高糖食物',
'增加膳食纤维摄入，帮助控制食欲',
'保证充足的优质蛋白质，维持肌肉量'
];
}
recommendation = '老年人应保持适度运动和均衡饮食。';
} else {
// 18-64岁成年人
if (bmi < 18.5) {
category = '体重过低';
dietRecommendations = [
'增加热量密度高的食物，如坚果、干果',
'保证足够的蛋白质摄入，支持肌肉生长',
'选择全谷物和复杂碳水化合物',
'避免过度节食'
];
} else if (bmi < 24) {
category = '正常';
dietRecommendations = [
'保持均衡饮食，多样化食物选择',
'适量摄入优质蛋白质、碳水化合物和健康脂肪',
'保证新鲜蔬果的摄入',
'避免挑食和偏食'
];
} else if (bmi < 28) {
category = '超重';
dietRecommendations = [
'控制高糖、高脂肪食物的摄入',
'增加蔬菜、水果和全谷物的比例',
'选择低脂蛋白质，如鸡胸肉、鱼虾',
'避免饮料和果汁，多喝水'
];
} else {
category = '肥胖';
dietRecommendations = [
'在医生或营养师指导下进行饮食调整',
'减少高热量、高脂肪和高糖食物',
'增加膳食纤维摄入，帮助控制食欲',
'保证充足的优质蛋白质，维持肌肉量'
];
}
if (gender === 'male') {
recommendation = '男性应保持适量运动，避免过度饮酒。';
} else {
recommendation = '女性应注意营养均衡，保持健康生活方式。';
}
}
// 显示结果
document.getElementById('result').style.display = 'block';
document.getElementById('bmiValue').textContent = `BMI: ${bmi.toFixed(1)}`;
document.getElementById('bmiCategory').textContent = `类别: ${category}`;
document.getElementById('recommendation').textContent = `建议: ${recommendation}`;
// 显示饮食推荐
document.getElementById('dietRecommendations').style.display = 'block';
const dietList = document.getElementById('specificDietRecommendations');
dietList.innerHTML = '';
dietRecommendations.forEach(item => {
const li = document.createElement('li');
li.innerHTML = `<p>${item}</p>`;
dietList.appendChild(li);
});
}
</script>
</body>
</html>
[复制链接]
发表于 2025-3-13 10:10
