📅 最后修改于: 2023-12-03 14:49:41.616000 🧑 作者: Mango
本文将介绍如何使用 JavaScript 编写一款学生成绩计算器。学生成绩计算器可以帮助老师计算学生的成绩，并且可以快速生成成绩单。本文将以一个简单的学生成绩计算器为例，向读者展示如何编写 JavaScript 代码实现这个功能。
学生成绩计算器需要完成以下功能：
学生成绩计算器需要使用 HTML、CSS 和 JavaScript 三种技术实现。其中，HTML 和 CSS 用于实现页面布局和样式，JavaScript 用于计算成绩和生成成绩单。
学生成绩计算器的页面主要分为三个部分：输入区、成绩列表和成绩单。其中，输入区包括学生姓名和课程成绩的输入框，成绩列表显示所有学生的成绩信息，成绩单则按照学生成绩排名显示每位学生的成绩。
页面的布局可以使用 HTML 和 CSS 实现，以下是一个简单的页面布局代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>学生成绩计算器</title>
<style>
/* CSS 样式 */
/* ...... */
</style>
</head>
<body>
<div id="input-area">
<!-- 学生姓名和课程成绩的输入区 -->
</div>
<div id="score-list">
<!-- 成绩列表 -->
</div>
<div id="score-report">
<!-- 成绩单 -->
</div>
<script>
/* JavaScript 代码 */
</script>
</body>
</html>
学生成绩计算器的核心功能是计算成绩和生成成绩单，这需要使用 JavaScript 实现。以下是一个简单的 JavaScript 代码实现：
// 输入区表单提交事件
document.querySelector('#input-area form').addEventListener('submit', function (event) {
event.preventDefault(); // 阻止表单默认行为
var data = serialize(this); // 获取表单数据
if (!check(data)) { // 校验表单数据
return false;
}
var score = calculate(data); // 计算成绩
render(score); // 渲染成绩列表
generateReport(score); // 生成成绩单
});
// 计算成绩
function calculate(data) {
var score = {};
for (var i = 0; i < data.length; i++) {
var name = data[i].name;
var chinese = parseInt(data[i].chinese);
var math = parseInt(data[i].math);
var english = parseInt(data[i].english);
score[name] = chinese + math + english;
score[name + '_chinese'] = chinese;
score[name + '_math'] = math;
score[name + '_english'] = english;
}
return score;
}
// 渲染成绩列表
function render(score) {
var html = '<table><thead><tr><th>姓名</th><th>语文</th><th>数学</th><th>英语</th><th>总分</th></thead><tbody>';
for (var name in score) {
if (!name.endsWith('_chinese') && !name.endsWith('_math') && !name.endsWith('_english')) {
html += '<tr><td>' + name + '</td><td>' + score[name + '_chinese'] + '</td><td>' + score[name + '_math']
+ '</td><td>' + score[name + '_english'] + '</td><td>' + score[name] + '</td></tr>';
}
}
html += '</tbody></table>';
document.querySelector('#score-list').innerHTML = html;
}
// 生成成绩单
function generateReport(score) {
var rank = Object.keys(score).sort(function (a, b) {
if (a.endsWith('_chinese')) {
return score[a] - score[b];
} else if (a.endsWith('_math')) {
return score[a] - score[b];
} else if (a.endsWith('_english')) {
return score[a] - score[b];
} else {
return score[b] - score[a];
}
});
var html = '<ol>';
for (var i = 0; i < rank.length; i++) {
var name = rank[i].replace(/(_chinese|_math|_english)?$/, '');
html += '<li>' + name + '：' + score[name] + '分</li>';
}
html += '</ol>';
document.querySelector('#score-report').innerHTML = html;
}
// 获取表单数据
function serialize(form) {
var data = [];
var inputs = form.querySelectorAll('input');
for (var i = 0; i < inputs.length; i += 3) {
var name = inputs[i].value.trim();
var chinese = inputs[i + 1].value.trim();
var math = inputs[i + 2].value.trim();
var english = 100 - chinese - math; // 计算英语成绩
data.push({
name: name,
chinese: chinese,
math: math,
english: english
});
}
return data;
}
// 校验表单数据
function check(data) {
var regex = /^[0-9]{1,2}$/;
for (var i = 0; i < data.length; i++) {
var name = data[i].name;
var chinese = data[i].chinese;
var math = data[i].math;
if (!name) {
alert('姓名不能为空！');
return false;
}
if (!regex.test(chinese) || parseInt(chinese) < 0 || parseInt(chinese) > 100) {
alert('语文成绩必须在 0~100 之间！');
return false;
}
if (!regex.test(math) || parseInt(math) < 0 || parseInt(math) > 100) {
alert('数学成绩必须在 0~100 之间！');
return false;
}
}
return true;
}
以上 JavaScript 代码实现了学生成绩计算器的核心功能，需要注意的是，由于本文只是一个简单的示例，这段 JavaScript 代码仅仅实现了一部分功能，读者可以自行扩展完善。