BMI 計算器
:root {
–background-color: #ffffff;
–text-color: #333333;
–card-background: #f9f9f9;
–border-color: #dddddd;
–primary-color: #5D5CDE;
–primary-hover: #4b4ab2;
–success-color: #28a745;
–warning-color: #ffc107;
–danger-color: #dc3545;
–info-color: #17a2b8;
–gray-color: #6c757d;
}
@media (prefers-color-scheme: dark) {
:root {
–background-color: #121212;
–text-color: #e0e0e0;
–card-background: #1e1e1e;
–border-color: #444444;
–gray-color: #999999;
}
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: -apple-system, BlinkMacSystemFont, “Segoe UI", Roboto, “Helvetica Neue", Arial, sans-serif;
background-color: var(–background-color);
color: var(–text-color);
line-height: 1.6;
padding: 20px;
display: flex;
flex-direction: column;
align-items: center;
min-height: 100vh;
}
.container {
max-width: 500px;
width: 100%;
background-color: var(–card-background);
border-radius: 8px;
padding: 20px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
margin-bottom: 20px;
}
h1 {
color: var(–primary-color);
text-align: center;
margin-bottom: 20px;
}
.form-group {
margin-bottom: 15px;
}
label {
display: block;
margin-bottom: 5px;
font-weight: 500;
}
input {
width: 100%;
padding: 10px;
border: 1px solid var(–border-color);
border-radius: 4px;
background-color: var(–background-color);
color: var(–text-color);
font-size: 16px;
}
button {
width: 100%;
padding: 12px;
background-color: var(–primary-color);
color: white;
border: none;
border-radius: 4px;
font-size: 16px;
font-weight: 500;
cursor: pointer;
transition: background-color 0.3s;
}
button:hover {
background-color: var(–primary-hover);
}
#result {
display: none;
margin-top: 20px;
padding-top: 15px;
border-top: 1px solid var(–border-color);
}
.result-container {
display: flex;
flex-wrap: wrap;
gap: 15px;
margin-bottom: 15px;
}
.result-box {
flex: 1;
min-width: 140px;
background-color: rgba(0, 0, 0, 0.05);
padding: 15px;
border-radius: 4px;
}
.result-label {
color: var(–gray-color);
font-size: 14px;
margin-bottom: 5px;
}
.result-value {
font-size: 18px;
font-weight: bold;
}
.explanation {
font-size: 14px;
line-height: 1.5;
margin-top: 15px;
}
.footer {
text-align: center;
font-size: 13px;
color: var(–gray-color);
margin-top: 10px;
}
@media (max-width: 480px) {
.container {
padding: 15px;
}
.result-box {
min-width: 100%;
}
}
BMI 體重計算器
體重 (公斤)
身高 (厘米)
計算 BMI
document.getElementById(‘bmiForm’).addEventListener(‘submit’, function(e) {
e.preventDefault();
// 獲取輸入值
const weight = parseFloat(document.getElementById(‘weight’).value);
const heightCm = parseFloat(document.getElementById(‘height’).value);
// 檢查輸入是否有效
if (isNaN(weight) || isNaN(heightCm) || weight <= 0 || heightCm <= 0) {
alert('請輸入有效的體重和身高數值');
return;
}
// 厘米轉換為米
const heightM = heightCm / 100;
// 計算 BMI
const bmi = weight / (heightM * heightM);
// 顯示 BMI 值（保留兩位小數）
document.getElementById('bmiValue').textContent = bmi.toFixed(2);
// 判斷 BMI 類別
let category, explanation, categoryColor;
if (bmi < 18.5) {
category = "過輕";
explanation = "您的 BMI 低於正常範圍。過輕可能影響健康，建議諮詢醫生獲取健康飲食和增重建議。";
categoryColor = "#17a2b8"; // info color
} else if (bmi < 24) {
category = "正常";
explanation = "恭喜！您的 BMI 在正常範圍內。繼續保持健康的飲食和適當的運動習慣。";
categoryColor = "#28a745"; // success color
} else if (bmi < 27) {
category = "過重";
explanation = "您的 BMI 略高於正常範圍。建議增加運動量並注意飲食控制。";
categoryColor = "#ffc107"; // warning color
} else if (bmi < 30) {
category = "輕度肥胖";
explanation = "您的 BMI 顯示為輕度肥胖。建議諮詢醫生獲取體重管理計劃。";
categoryColor = "#fd7e14"; // orange color
} else if (bmi < 35) {
category = "中度肥胖";
explanation = "您的 BMI 顯示為中度肥胖。請考慮諮詢醫療專業人士制定減重計劃。";
categoryColor = "#dc3545"; // danger color
} else {
category = "重度肥胖";
explanation = "您的 BMI 顯示為重度肥胖。強烈建議尋求醫療專業人士的幫助。";
categoryColor = "#c82333"; // darker red
}
// 顯示 BMI 類別
const categoryElement = document.getElementById('bmiCategory');
categoryElement.textContent = category;
categoryElement.style.color = categoryColor;
// 顯示說明
document.getElementById('bmiExplanation').textContent = explanation;
// 顯示結果區域
document.getElementById('result').style.display = "block";
});
// 檢測系統主題設置
function detectColorScheme() {
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
document.body.classList.add('dark-mode');
} else {
document.body.classList.remove('dark-mode');
}
}
// 初始檢測
detectColorScheme();
// 監聽系統主題變化
if (window.matchMedia) {
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', detectColorScheme);
}
網站標題 