就是这个样的粗爆，手搓一个计算器：卡路里计算器

       作为程序员，没有合适的工具，就得手搓一个，PC端，移动端均可适用。废话不多说，直接上代码。

HTML:

<div class="calculator"><h1>卡路里计算器</h1><div class="instructions"><p>请输入以下信息以计算您的每日卡路里需求：</p><ul><li><strong>性别：</strong>选择您的性别 (男性/女性)。</li><li><strong>年龄：</strong>输入您的年龄。</li><li><strong>体重：</strong>输入您的体重 (公斤)。</li><li><strong>身高：</strong>输入您的身高 (厘米)。</li><li><strong>活动水平：</strong>选择您的活动水平。</li></ul><p>点击“计算”按钮以获取每日卡路里需求。</p></div><div class="form"><label for="gender">性别:</label><select id="gender"><option value="male">男性</option><option value="female">女性</option></select><label for="age">年龄:</label><input type="number" id="age" placeholder="输入年龄"><label for="weight">体重 (公斤):</label><input type="number" id="weight" placeholder="输入体重"><label for="height">身高 (厘米):</label><input type="number" id="height" 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"><h2>每日卡路里需求</h2><p id="calories"></p></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:

body {font-family: Arial, sans-serif;background-color: #f0f0f0;display: flex;justify-content: center;align-items: center;height: 100vh;margin: 0;
}.calculator {background-color: white;border-radius: 10px;box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);padding: 20px;max-width: 400px;width: 100%;
}h1 {font-size: 24px;margin-bottom: 20px;color: #333;
}.instructions {margin-bottom: 20px;font-size: 14px;color: #555;
}ul {padding-left: 20px;
}li {margin-bottom: 10px;
}label {display: block;margin: 10px 0 5px;font-weight: bold;color: #555;
}input, select {width: calc(100% - 10px);padding: 8px;margin-bottom: 10px;border: 1px solid #ddd;border-radius: 4px;
}button {background-color: #4CAF50;color: white;padding: 10px 20px;border: none;border-radius: 4px;cursor: pointer;margin-top: 10px;font-size: 16px;
}button:hover {background-color: #45a049;
}.result {margin-top: 20px;
}p {font-size: 18px;color: #333;
}

 线上运行，可以直接打开：卡路里计算器