You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
130 lines
5.3 KiB
130 lines
5.3 KiB
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>学生成绩录入系统</title>
|
|
<style>
|
|
table {
|
|
border-collapse: collapse;
|
|
width: 60%;
|
|
margin: 20px auto;
|
|
}
|
|
th, td {
|
|
border: 1px solid black;
|
|
padding: 8px;
|
|
text-align: center;
|
|
}
|
|
th {
|
|
background-color: #f2f2f2;
|
|
}
|
|
input {
|
|
width: 100%;
|
|
text-align: center;
|
|
outline: none;
|
|
border: no;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1 style="text-align: center;">学生成绩录入系统</h1>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>姓名</th>
|
|
<th>语文</th>
|
|
<th>数学</th>
|
|
<th>英语</th>
|
|
<th>总分</th>
|
|
<th>平均分</th>
|
|
<th>等级</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td><input type="name" ></td>
|
|
<td><input type="number" step="0.1" min="0" max="100" oninput="calculateGrade(this)"></td>
|
|
<td><input type="number" step="0.1" min="0" max="100" oninput="calculateGrade(this)"></td>
|
|
<td><input type="number" step="0.1" min="0" max="100" oninput="calculateGrade(this)"></td>
|
|
<td>0</td>
|
|
<td>0</td>
|
|
<td>及格</td>
|
|
</tr>
|
|
<tr>
|
|
<td><input type="name" ></td>
|
|
<td><input type="number" step="0.1" min="0" max="100" oninput="calculateGrade(this)"></td>
|
|
<td><input type="number" step="0.1" min="0" max="100" oninput="calculateGrade(this)"></td>
|
|
<td><input type="number" step="0.1" min="0" max="100" oninput="calculateGrade(this)"></td>
|
|
<td>0</td>
|
|
<td>0</td>
|
|
<td>及格</td>
|
|
</tr>
|
|
<tr>
|
|
<td><input type="name" ></td>
|
|
<td><input type="number" step="0.1" min="0" max="100" oninput="calculateGrade(this)"></td>
|
|
<td><input type="number" step="0.1" min="0" max="100" oninput="calculateGrade(this)"></td>
|
|
<td><input type="number" step="0.1" min="0" max="100" oninput="calculateGrade(this)"></td>
|
|
<td>0</td>
|
|
<td>0</td>
|
|
<td>及格</td>
|
|
</tr>
|
|
<tr>
|
|
<td><input type="name" ></td>
|
|
<td><input type="number" step="0.1" min="0" max="100" oninput="calculateGrade(this)"></td>
|
|
<td><input type="number" step="0.1" min="0" max="100" oninput="calculateGrade(this)"></td>
|
|
<td><input type="number" step="0.1" min="0" max="100" oninput="calculateGrade(this)"></td>
|
|
<td>0</td>
|
|
<td>0</td>
|
|
<td>及格</td>
|
|
</tr>
|
|
<tr>
|
|
<td><input type="name" ></td>
|
|
<td><input type="number" step="0.1" min="0" max="100" oninput="calculateGrade(this)"></td>
|
|
<td><input type="number" step="0.1" min="0" max="100" oninput="calculateGrade(this)"></td>
|
|
<td><input type="number" step="0.1" min="0" max="100" oninput="calculateGrade(this)"></td>
|
|
<td>0</td>
|
|
<td>0</td>
|
|
<td>及格</td>
|
|
</tr>
|
|
<tr>
|
|
<td><input type="name" ></td>
|
|
<td><input type="number" step="0.1" min="0" max="100" oninput="calculateGrade(this)"></td>
|
|
<td><input type="number" step="0.1" min="0" max="100" oninput="calculateGrade(this)"></td>
|
|
<td><input type="number" step="0.1" min="0" max="100" oninput="calculateGrade(this)"></td>
|
|
<td>0</td>
|
|
<td>0</td>
|
|
<td>及格</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<script>
|
|
function calculateGrade(input) {
|
|
const row = input.parentElement.parentElement;
|
|
const chinese = parseFloat(row.cells[1].querySelector('input').value) || 0;
|
|
const math = parseFloat(row.cells[2].querySelector('input').value) || 0;
|
|
const english = parseFloat(row.cells[3].querySelector('input').value) || 0;
|
|
|
|
if (isNaN(chinese) || isNaN(math) || isNaN(english) || chinese < 0 || chinese > 100 || math < 0 || math > 100 || english < 0 || english > 100) {
|
|
alert("您输入的数值不合法，请重新输入");
|
|
input.value = '';
|
|
return;
|
|
}
|
|
|
|
const total = chinese + math + english;
|
|
const average = total / 3;
|
|
let grade = '';
|
|
|
|
if (average < 60) grade = '及格';
|
|
else if (average < 70) grade = '中等';
|
|
else if (average < 80) grade = '良好';
|
|
else if (average < 90) grade = '优秀';
|
|
else grade = '优秀';
|
|
|
|
row.cells[4].textContent = total.toFixed(1);
|
|
row.cells[5].textContent = average.toFixed(2);
|
|
row.cells[6].textContent = grade;
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |