作为程序员，没有合适的工具，就得手搓一个，PC端，移动端均可适用。废话不多说，直接上代码。
HTML:
<div class="calculator"><div class="form"><label for="gender">性别:</label><select id="gender"><option value="male">男性</option><option value="female">女性</option></select><label for="age">年龄:</label> <input id="age" type="number" placeholder="输入年龄"> <label for="weight">体重 (公斤):</label> <input id="weight" type="number" placeholder="输入体重"> <label for="height">身高 (厘米):</label> <input id="height" type="number" placeholder="输入身高"> <label for="activity-level">活动水平:</label><select id="activity-level"><option value="sedentary">久坐不动</option><option value="light">轻度活动</option><option value="moderate">中度活动</option><option value="active">高度活动</option><option value="very-active">极度活动</option></select><button onclick="calculateCalories()">计算</button><div class="result"><div class="align-center">每日卡路里需求</div><div id="calories"></div></div></div></div>
JS:
function calculateCalories() { const gender = document.getElementById('gender').value; const age = parseInt(document.getElementById('age').value); const weight = parseFloat(document.getElementById('weight').value); const height = parseFloat(document.getElementById('height').value); const activityLevel = document.getElementById('activity-level').value; let bmr; if (gender === 'male') { bmr = 88.362 + (13.397 * weight) + (4.799 * height) - (5.677 * age); } else { bmr = 447.593 + (9.247 * weight) + (3.098 * height) - (4.330 * age); } let multiplier; switch (activityLevel) { case 'sedentary': multiplier = 1.2; break; case 'light': multiplier = 1.375; break; case 'moderate': multiplier = 1.55; break; case 'active': multiplier = 1.725; break; case 'very-active': multiplier = 1.9; break; default: multiplier = 1.2; } const calories = bmr * multiplier; document.getElementById('calories').textContent = `每日卡路里需求: ${calories.toFixed(2)} 卡路里`; }
CSS:
.calculator { width: 100%; background-color: #333; color: white; padding: 20px; border-radius: 10px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); } label { display: block; margin-bottom: 10px; font-size: 16px; } input, select { width: 100%!important; padding: 10px!important; margin-bottom: 20px; color: #000000; border-radius: 5px; border: 1px solid #555; font-size: 16px!important; background-color: #ffffff!important; } button { width: 100%; padding: 10px; background-color: #007bff; color: white; border: none; border-radius: 5px; cursor: pointer; font-size: 16px; } button:hover { background-color: orange; } .result { font-size: 18px; margin-top: 20px; text-align: center; } option { background-color: #ffffff; } p { font-size: 18px; margin-top: 5px!important; }
