document.addEventListener('DOMContentLoaded', function() {
const bmiForm = document.getElementById('bmi-form');
const resultContent = document.getElementById('result-content');
const resultPlaceholder = document.getElementById('result-placeholder');
const bmiNumber = document.getElementById('bmi-number');
const bmiCategory = document.getElementById('bmi-category');
const categoryEmoji = document.getElementById('category-emoji');
const scalePointer = document.getElementById('scale-pointer');
const healthRiskText = document.getElementById('health-risk-text');
const historyContent = document.getElementById('history-content');
const historyPlaceholder = document.getElementById('history-placeholder');
const historyTableBody = document.getElementById('history-table-body');
const toggleHistory = document.getElementById('toggle-history');
const historyTableWrapper = document.getElementById('history-table-wrapper');
const recommendationsContent = document.getElementById('recommendations-content');
const recommendationsPlaceholder = document.getElementById('recommendations-placeholder');
const dietList = document.getElementById('diet-list');
const exerciseList = document.getElementById('exercise-list');
let bmiHistory = JSON.parse(localStorage.getItem('bmiHistory')) || [];
initializePage();
bmiForm.addEventListener('submit', function(e) {
e.preventDefault();
const age = parseInt(document.getElementById('age').value);
const gender = document.querySelector('input[name="gender"]:checked').value;
const height = parseFloat(document.getElementById('height').value);
const weight = parseFloat(document.getElementById('weight').value);
const bmi = calculateBMI(weight, height);
const category = getBMICategory(bmi, age, gender);
displayResult(bmi, category);
saveToHistory(age, gender, height, weight, bmi, category);
updateHistoryChart();
displayRecommendations(category);
});
toggleHistory.addEventListener('click', function() {
historyTableWrapper.style.display = historyTableWrapper.style.display === 'none' ? 'block' : 'none';
});
function initializePage() {
if (bmiHistory.length > 0) {
updateHistoryTable();
updateHistoryChart();
historyContent.style.display = 'block';
historyPlaceholder.style.display = 'none';
} else {
historyContent.style.display = 'none';
historyPlaceholder.style.display = 'flex';
}
historyTableWrapper.style.display = 'none';
}
function calculateBMI(weight, height) {
const heightInMeters = height / 100;
const bmi = weight / (heightInMeters * heightInMeters);
return Math.round(bmi * 10) / 10;
}
function getBMICategory(bmi, age, gender) {
if (age >= 18 && age < 65) {
if (bmi < 18.5) {
return {
name: '体重过轻',
emoji: '😢',
color: '#FFEB3B',
position: 12.5,
healthRisk: '体重过轻可能导致免疫力下降、营养不良、骨质疏松等健康问题。'
};
} else if (bmi >= 18.5 && bmi < 24) {
return {
name: '正常范围',
emoji: '😊',
color: '#4CAF50',
position: 37.5,
healthRisk: '您的BMI在正常范围内，继续保持健康的生活方式。'
};
} else if (bmi >= 24 && bmi < 28) {
return {
name: '超重',
emoji: '😐',
color: '#FF9800',
position: 62.5,
healthRisk: '超重可能增加心血管疾病、2型糖尿病等慢性疾病的风险。'
};
} else {
return {
name: '肥胖',
emoji: '😨',
color: '#F44336',
position: 87.5,
healthRisk: '肥胖会显著增加多种慢性疾病风险，包括心脏病、中风、糖尿病和某些癌症。'
};
}
}
else if (age >= 65) {
if (bmi < 20) {
return {
name: '体重过轻',
emoji: '😢',
color: '#FFEB3B',
position: 12.5,
healthRisk: '老年人体重过轻可能导致免疫力下降、肌肉减少、骨质疏松等健康问题。'
};
} else if (bmi >= 20 && bmi < 27) {
return {
name: '正常范围',
emoji: '😊',
color: '#4CAF50',
position: 37.5,
healthRisk: '您的BMI在老年人正常范围内，继续保持健康的生活方式。'
};
} else if (bmi >= 27 && bmi < 30) {
return {
name: '超重',
emoji: '😐',
color: '#FF9800',
position: 62.5,
healthRisk: '老年人超重可能增加心血管疾病、关节问题等健康风险。'
};
} else {
return {
name: '肥胖',
emoji: '😨',
color: '#F44336',
position: 87.5,
healthRisk: '老年人肥胖会增加多种慢性疾病风险，影响生活质量和寿命。'
};
}
}
else {
if (bmi < 16) {
return {
name: '体重过轻',
emoji: '😢',
color: '#FFEB3B',
position: 12.5,
healthRisk: '儿童体重过轻可能影响正常发育和免疫功能。'
};
} else if (bmi >= 16 && bmi < 22) {
return {
name: '正常范围',
emoji: '😊',
color: '#4CAF50',
position: 37.5,
healthRisk: '您的BMI在儿童/青少年正常范围内，继续保持健康的生活方式。'
};
} else if (bmi >= 22 && bmi < 26) {
return {
name: '超重',
emoji: '😐',
color: '#FF9800',
position: 62.5,
healthRisk: '儿童/青少年超重可能增加未来发生慢性疾病的风险。'
};
} else {
return {
name: '肥胖',
emoji: '😨',
color: '#F44336',
position: 87.5,
healthRisk: '儿童/青少年肥胖可能导致多种健康问题，并可能持续到成年。'
};
}
}
}
function displayResult(bmi, category) {
bmiNumber.textContent = bmi;
bmiCategory.textContent = category.name;
bmiCategory.style.color = category.color;
categoryEmoji.textContent = category.emoji;
scalePointer.style.left = `${category.position}%`;
healthRiskText.textContent = category.healthRisk;
resultContent.style.display = 'block';
resultPlaceholder.style.display = 'none';
}
function saveToHistory(age, gender, height, weight, bmi, category) {
const newRecord = {
date: new Date().toLocaleString(),
age: age,
gender: gender,
height: height,
weight: weight,
bmi: bmi,
category: category.name
};
bmiHistory.push(newRecord);
if (bmiHistory.length > 10) {
bmiHistory.shift();
}
localStorage.setItem('bmiHistory', JSON.stringify(bmiHistory));
updateHistoryTable();
historyContent.style.display = 'block';
historyPlaceholder.style.display = 'none';
}
function updateHistoryTable() {
historyTableBody.innerHTML = '';
bmiHistory.slice().reverse().forEach(record => {
const row = document.createElement('tr');
row.innerHTML = `
<td>${record.date}</td>
<td>${record.age}</td>
<td>${record.gender === 'male' ? '男性' : '女性'}</td>
<td>${record.height}</td>
<td>${record.weight}</td>
<td>${record.bmi}</td>
<td>${record.category}</td>
`;
historyTableBody.appendChild(row);
});
}
function updateHistoryChart() {
if (window.bmiChart) {
window.bmiChart.destroy();
}
const labels = bmiHistory.map(record => record.date);
const data = bmiHistory.map(record => record.bmi);
const ctx = document.getElementById('history-chart').getContext('2d');
window.bmiChart = new Chart(ctx, {
type: 'line',
data: {
labels: labels,
datasets: [{
label: 'BMI值',
data: data,
backgroundColor: 'rgba(76, 175, 80, 0.2)',
borderColor: 'rgba(76, 175, 80, 1)',
borderWidth: 2,
pointBackgroundColor: 'rgba(76, 175, 80, 1)',
pointRadius: 4,
tension: 0.1
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
y: {
beginAtZero: false,
min: Math.max(0, Math.min(...data) - 2),
max: Math.max(...data) + 2,
ticks: {
precision: 1
}
}
},
plugins: {
tooltip: {
callbacks: {
afterLabel: function(context) {
const index = context.dataIndex;
const record = bmiHistory[index];
return [
`分类: ${record.category}`,
`身高: ${record.height}cm`,
`体重: ${record.weight}kg`
];
}
}
},
annotation: {
annotations: {
normalRangeLine1: {
type: 'line',
yMin: 18.5,
yMax: 18.5,
borderColor: 'rgba(255, 235, 59, 0.5)',
borderWidth: 2,
borderDash: [5, 5],
label: {
content: '体重过轻 < 18.5',
enabled: true,
position: 'left'
}
},
normalRangeLine2: {
type: 'line',
yMin: 24,
yMax: 24,
borderColor: 'rgba(255, 152, 0, 0.5)',
borderWidth: 2,
borderDash: [5, 5],
label: {
content: '超重 ≥ 24',
enabled: true,
position: 'left'
}
},
normalRangeLine3: {
type: 'line',
yMin: 28,
yMax: 28,
borderColor: 'rgba(244, 67, 54, 0.5)',
borderWidth: 2,
borderDash: [5, 5],
label: {
content: '肥胖 ≥ 28',
enabled: true,
position: 'left'
}
}
}
}
}
}
});
}
function displayRecommendations(category) {
dietList.innerHTML = '';
exerciseList.innerHTML = '';
let dietRecommendations = [];
let exerciseRecommendations = [];
if (category.name === '体重过轻') {
dietRecommendations = [
{ text: '少吃多餐，每天5-6餐，每次份量适中', emoji: '🍽️' },
{ text: '选择富有营养和高热量的食物', emoji: '🥑' },
{ text: '增加健康脂肪的摄入（坚果、橄榄油、鳄梨等）', emoji: '🥜' },
{ text: '添加高蛋白食物（瘦肉、鱼、蛋、豆类、奶制品）', emoji: '🥩' },
{ text: '尝试营养丰富的果昔和奶昔', emoji: '🥤' }
];
exerciseRecommendations = [
{ text: '进行力量训练，增加肌肉质量', emoji: '💪' },
{ text: '避免过度的有氧运动', emoji: '🏃‍♂️' },
{ text: '每周进行2-3次中等强度的力量训练', emoji: '🏋️‍♂️' },
{ text: '确保充分休息和恢复', emoji: '😴' }
];
} else if (category.name === '正常范围') {
dietRecommendations = [
{ text: '保持均衡饮食，包括各种食物类别', emoji: '🥗' },
{ text: '每天摄入足够的蔬菜和水果（至少5份）', emoji: '🍎' },
{ text: '选择全谷物食品', emoji: '🌾' },
{ text: '适量摄入优质蛋白质', emoji: '🍗' },
{ text: '控制油盐糖的摄入', emoji: '🧂' }
];
exerciseRecommendations = [
{ text: '每周至少进行150分钟中等强度有氧运动', emoji: '🚶‍♀️' },
{ text: '每周进行2次以上的肌肉强化活动', emoji: '🏋️‍♀️' },
{ text: '减少久坐时间，每小时起来活动一下', emoji: '⏰' },
{ text: '保持日常活动，平均每天步行6000步以上', emoji: '👣' }
];
} else if (category.name === '超重') {
dietRecommendations = [
{ text: '控制总能量摄入，每天减少300-500千卡', emoji: '📉' },
{ text: '严格控制油和脂肪摄入', emoji: '🍔' },
{ text: '适量控制精白米面和肉类', emoji: '🍚' },
{ text: '保证蔬菜、水果和牛奶的摄入充足', emoji: '🥦' },
{ text: '每天食盐摄入量不超过5g', emoji: '🧂' }
];
exerciseRecommendations = [
{ text: '每周进行至少150分钟中等强度有氧运动', emoji: '🚴‍♀️' },
{ text: '逐渐增加运动时间至每周300分钟', emoji: '⏱️' },
{ text: '结合有氧运动和力量训练', emoji: '🏊‍♂️' },
{ text: '选择适合自己的运动方式，如快走、游泳、骑自行车等', emoji: '🚶‍♂️' }
];
} else if (category.name === '肥胖') {
dietRecommendations = [
{ text: '在医生或营养师指导下制定个性化饮食计划', emoji: '👨‍⚕️' },
{ text: '严格控制总能量摄入，每天减少500-750千卡', emoji: '📊' },
{ text: '优先选择低能量密度食物', emoji: '🥒' },
{ text: '增加膳食纤维摄入', emoji: '🌽' },
{ text: '避免高糖、高脂、高盐食物', emoji: '🍰' }
];
exerciseRecommendations = [
{ text: '在医生指导下开始运动计划', emoji: '👩‍⚕️' },
{ text: '从低强度运动开始，如步行', emoji: '🚶' },
{ text: '逐渐增加运动强度和时间', emoji: '📈' },
{ text: '结合有氧运动、抗阻训练和高强度间歇训练', emoji: '🏃‍♀️' },
{ text: '每周至少5天进行中等强度身体活动，累计150分钟以上', emoji: '📆' }
];
}
dietRecommendations.forEach(item => {
const li = document.createElement('li');
li.innerHTML = `<span class="recommendation-emoji">${item.emoji}</span> ${item.text}`;
dietList.appendChild(li);
});
exerciseRecommendations.forEach(item => {
const li = document.createElement('li');
li.innerHTML = `<span class="recommendation-emoji">${item.emoji}</span> ${item.text}`;
exerciseList.appendChild(li);
});
recommendationsContent.style.display = 'block';
recommendationsPlaceholder.style.display = 'none';
}
});
[复制链接]
发表于 2025-3-12 13:52
收藏
淘帖
有用
分享到朋友圈
