185 lines
11 KiB
HTML
185 lines
11 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>推免（保研）综合成绩追分计算器</title>
|
||
<!-- 引入Tailwind CSS -->
|
||
<script src="./tailwind.js"></script>
|
||
<!-- 引入Inter字体 -->
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
<link href="./intel.css" rel="stylesheet">
|
||
<style>
|
||
/* 自定义样式，确保字体应用和一些微调 */
|
||
body {
|
||
font-family: 'Inter', 'Helvetica Neue', 'Arial', 'sans-serif';
|
||
-webkit-font-smoothing: antialiased;
|
||
-moz-osx-font-smoothing: grayscale;
|
||
}
|
||
/* Tab激活时的样式 */
|
||
.tab-active {
|
||
background-color: #3b82f6; /* bg-blue-600 */
|
||
color: #ffffff; /* text-white */
|
||
}
|
||
</style>
|
||
</head>
|
||
<body class="bg-gray-100 min-h-screen flex items-center justify-center p-4">
|
||
<div class="w-full max-w-2xl mx-auto bg-white rounded-2xl shadow-lg p-6 md:p-8 space-y-6">
|
||
|
||
<!-- 标题和说明区域 -->
|
||
<div class="text-center">
|
||
<h1 class="text-2xl md:text-3xl font-bold text-gray-800">推免（保研）综合成绩追分计算器</h1>
|
||
<p class="mt-2 text-sm text-gray-500">
|
||
根据规则：综合成绩 = (绩点*10+50)*80% + 创新能力分数*6% + ...
|
||
</p>
|
||
</div>
|
||
|
||
<!-- 计算模式切换Tabs -->
|
||
<div class="flex border border-gray-200 rounded-lg p-1 bg-gray-50">
|
||
<button id="tab-calc-innovation" class="w-1/2 p-2 rounded-md text-sm md:text-base font-medium transition-colors duration-300 tab-active">计算B的创新分</button>
|
||
<button id="tab-calc-gpa" class="w-1/2 p-2 rounded-md text-sm md:text-base font-medium transition-colors duration-300 text-gray-600">计算B的绩点</button>
|
||
</div>
|
||
|
||
<!-- 计算器表单区域 -->
|
||
<div id="calculator-section">
|
||
|
||
<!-- 模式一：计算B的创新能力分数 -->
|
||
<div id="form-calc-innovation" class="space-y-4">
|
||
<p class="text-gray-600 text-center text-sm">当您知道双方的绩点和A的创新分时，用此模式计算B需要多少创新分才能追平。</p>
|
||
<div>
|
||
<label for="gpaA_innovation" class="block text-sm font-medium text-gray-700 mb-1">A的绩点 (GPA)</label>
|
||
<input type="number" id="gpaA_innovation" placeholder="例如: 4.132" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500 transition">
|
||
</div>
|
||
<div>
|
||
<label for="gpaB_innovation" class="block text-sm font-medium text-gray-700 mb-1">B的绩点 (GPA)</label>
|
||
<input type="number" id="gpaB_innovation" placeholder="例如: 4.0" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500 transition">
|
||
</div>
|
||
<div>
|
||
<label for="innovationA" class="block text-sm font-medium text-gray-700 mb-1">A的创新能力分数 (满分100)</label>
|
||
<input type="number" id="innovationA" placeholder="例如: 80" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500 transition">
|
||
</div>
|
||
<button id="btn-calc-innovation" class="w-full bg-blue-600 text-white font-bold py-3 px-4 rounded-lg hover:bg-blue-700 transition-transform transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
|
||
计算B所需创新分
|
||
</button>
|
||
<div id="result-innovation" class="mt-4 p-4 text-center bg-gray-50 rounded-lg min-h-[70px] flex items-center justify-center">
|
||
<span class="text-gray-500">计算结果将显示在此</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 模式二：计算B的绩点 -->
|
||
<div id="form-calc-gpa" class="space-y-4 hidden">
|
||
<p class="text-gray-600 text-center text-sm">当您知道双方的创新分和A的绩点时，用此模式计算B需要多少绩点才能追平。</p>
|
||
<div>
|
||
<label for="innovationA_gpa" class="block text-sm font-medium text-gray-700 mb-1">A的创新能力分数 (满分100)</label>
|
||
<input type="number" id="innovationA_gpa" placeholder="例如: 80" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500 transition">
|
||
</div>
|
||
<div>
|
||
<label for="innovationB_gpa" class="block text-sm font-medium text-gray-700 mb-1">B的创新能力分数 (满分100)</label>
|
||
<input type="number" id="innovationB_gpa" placeholder="例如: 90" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500 transition">
|
||
</div>
|
||
<div>
|
||
<label for="gpaA_gpa" class="block text-sm font-medium text-gray-700 mb-1">A的绩点 (GPA)</label>
|
||
<input type="number" id="gpaA_gpa" placeholder="例如: 4.132" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500 transition">
|
||
</div>
|
||
<button id="btn-calc-gpa" class="w-full bg-green-600 text-white font-bold py-3 px-4 rounded-lg hover:bg-green-700 transition-transform transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500">
|
||
计算B所需绩点
|
||
</button>
|
||
<div id="result-gpa" class="mt-4 p-4 text-center bg-gray-50 rounded-lg min-h-[70px] flex items-center justify-center">
|
||
<span class="text-gray-500">计算结果将显示在此</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
// DOM 元素获取
|
||
const tabCalcInnovation = document.getElementById('tab-calc-innovation');
|
||
const tabCalcGpa = document.getElementById('tab-calc-gpa');
|
||
const formCalcInnovation = document.getElementById('form-calc-innovation');
|
||
const formCalcGpa = document.getElementById('form-calc-gpa');
|
||
|
||
const btnCalcInnovation = document.getElementById('btn-calc-innovation');
|
||
const btnCalcGpa = document.getElementById('btn-calc-gpa');
|
||
|
||
const resultInnovationDiv = document.getElementById('result-innovation');
|
||
const resultGpaDiv = document.getElementById('result-gpa');
|
||
|
||
// Tab切换逻辑
|
||
tabCalcInnovation.addEventListener('click', () => {
|
||
tabCalcInnovation.classList.add('tab-active');
|
||
tabCalcGpa.classList.remove('tab-active');
|
||
tabCalcGpa.classList.add('text-gray-600');
|
||
|
||
formCalcInnovation.classList.remove('hidden');
|
||
formCalcGpa.classList.add('hidden');
|
||
});
|
||
|
||
tabCalcGpa.addEventListener('click', () => {
|
||
tabCalcGpa.classList.add('tab-active');
|
||
tabCalcInnovation.classList.remove('tab-active');
|
||
tabCalcGpa.classList.remove('text-gray-600');
|
||
|
||
formCalcGpa.classList.remove('hidden');
|
||
formCalcInnovation.classList.add('hidden');
|
||
});
|
||
|
||
// 计算逻辑
|
||
// A的总分 = (GPA_A * 10 + 50) * 0.8 + Innovation_A * 0.06
|
||
// B的总分 = (GPA_B * 10 + 50) * 0.8 + Innovation_B * 0.06
|
||
// 令 A的总分 = B的总分
|
||
// (GPA_A * 10 + 50) * 0.8 + Innovation_A * 0.06 = (GPA_B * 10 + 50) * 0.8 + Innovation_B * 0.06
|
||
|
||
// 模式一：计算B的创新分
|
||
btnCalcInnovation.addEventListener('click', () => {
|
||
const gpaA = parseFloat(document.getElementById('gpaA_innovation').value);
|
||
const gpaB = parseFloat(document.getElementById('gpaB_innovation').value);
|
||
const innovationA = parseFloat(document.getElementById('innovationA').value);
|
||
|
||
if (isNaN(gpaA) || isNaN(gpaB) || isNaN(innovationA)) {
|
||
resultInnovationDiv.innerHTML = `<span class="text-red-500 font-medium">请输入所有有效的数值！</span>`;
|
||
return;
|
||
}
|
||
|
||
// 从上面的等式推导:
|
||
// Innovation_B * 0.06 = (GPA_A * 10 - GPA_B * 10) * 0.8 + Innovation_A * 0.06
|
||
// Innovation_B = (GPA_A - GPA_B) * 10 * 0.8 / 0.06 + Innovation_A
|
||
// Innovation_B = (GPA_A - GPA_B) * 8 / 0.06 + Innovation_A
|
||
// Innovation_B = (GPA_A - GPA_B) * (400 / 3) + Innovation_A
|
||
const requiredInnovationB = (gpaA - gpaB) * (400 / 3) + innovationA;
|
||
|
||
let resultHTML = `B的创新分需达到 <strong class="text-2xl text-blue-600 mx-2">${requiredInnovationB.toFixed(3)}</strong> 分才能与A打平。`;
|
||
if (requiredInnovationB > 100) {
|
||
resultHTML += `<p class="text-sm text-yellow-600 mt-1">(提示: 该分数已超过100分满分)</p>`;
|
||
} else if (requiredInnovationB < 0) {
|
||
resultHTML += `<p class="text-sm text-yellow-600 mt-1">(提示: 该分数小于0分)</p>`;
|
||
}
|
||
|
||
resultInnovationDiv.innerHTML = resultHTML;
|
||
});
|
||
|
||
// 模式二：计算B的绩点
|
||
btnCalcGpa.addEventListener('click', () => {
|
||
const innovationA = parseFloat(document.getElementById('innovationA_gpa').value);
|
||
const innovationB = parseFloat(document.getElementById('innovationB_gpa').value);
|
||
const gpaA = parseFloat(document.getElementById('gpaA_gpa').value);
|
||
|
||
if (isNaN(innovationA) || isNaN(innovationB) || isNaN(gpaA)) {
|
||
resultGpaDiv.innerHTML = `<span class="text-red-500 font-medium">请输入所有有效的数值！</span>`;
|
||
return;
|
||
}
|
||
|
||
// 从上面的等式推导:
|
||
// (GPA_B * 10 + 50) * 0.8 = (GPA_A * 10 + 50) * 0.8 + (Innovation_A - Innovation_B) * 0.06
|
||
// GPA_B * 8 + 40 = GPA_A * 8 + 40 + (Innovation_A - Innovation_B) * 0.06
|
||
// GPA_B * 8 = GPA_A * 8 + (Innovation_A - Innovation_B) * 0.06
|
||
// GPA_B = GPA_A + (Innovation_A - Innovation_B) * 0.06 / 8
|
||
// GPA_B = GPA_A + (Innovation_A - Innovation_B) * 0.0075
|
||
const requiredGpaB = gpaA + (innovationA - innovationB) * 0.0075;
|
||
|
||
resultGpaDiv.innerHTML = `B的绩点需达到 <strong class="text-2xl text-green-600 mx-2">${requiredGpaB.toFixed(4)}</strong> 才能与A打平。`;
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|