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

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

       作为程序员，没有合适的工具，就得手搓一个，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;
}