就是这个样的粗爆，手搓一个计算器：年龄等级计算器

线上运行，可以直接打开：年龄等级计算器(在线计算器)

​

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

HTML:

<div class="calculator"><div class="input-group"><label for="age">年龄：</label> <input id="age" min="1" type="number" placeholder="请输入年龄"></div><div class="input-group"><label for="userPerformance">用户表现（如跑步时间/举重重量）：</label> <input id="userPerformance" min="1" type="number" placeholder="例如：25"></div><div class="input-group"><label for="ageGroupStandard">年龄组标准表现：</label> <input id="ageGroupStandard" min="1" type="number" placeholder="例如：30"></div><button οnclick="calculateAgeGrade()">计算年龄等级</button><div id="result" class="result"></div></div>

JS:

function calculateAgeGrade() { const age = parseInt(document.getElementById("age").value); const userPerformance = parseFloat(document.getElementById("userPerformance").value); const ageGroupStandard = parseFloat(document.getElementById("ageGroupStandard").value); const resultDiv = document.getElementById("result"); if ( isNaN(age) || isNaN(userPerformance) || isNaN(ageGroupStandard) || age <= 0 || userPerformance <= 0 || ageGroupStandard <= 0 ) { resultDiv.innerHTML = "请输入有效的数值！"; return; } // 计算年龄等级 const ageGrade = (userPerformance / ageGroupStandard) * 100; // 输出结果 resultDiv.innerHTML = ` <div>您的年龄等级为：<strong>${ageGrade.toFixed(2)}%</strong></div> <div>${ageGrade >= 100 ? "您的表现高于年龄组平均水平！" : "您的表现低于年龄组平均水平。"}</div> `; }

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; }