成绩录入页面编写： 点击"添加"按纽时完成成绩录入，并计算语文，数学，总分最高分，总评等级 总评等级按平均分计算，90及以上为优秀，80良好，70中等，60及格，60以下为不及格
时间: 2023-09-30 09:06:04 浏览: 53
好的，针对你的需求，我给出一个完整的示例代码，包括HTML、CSS和JavaScript。这里使用了jQuery库来简化代码。
HTML代码：
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>成绩录入</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<form id="grade-form">
<label for="name">姓名：</label>
<input type="text" id="name" name="name">
<br>
<label for="math-grade">数学成绩：</label>
<input type="number" id="math-grade" name="math-grade">
<br>
<label for="english-grade">英语成绩：</label>
<input type="number" id="english-grade" name="english-grade">
<br>
<label for="chinese-grade">语文成绩：</label>
<input type="number" id="chinese-grade" name="chinese-grade">
<br>
<input type="submit" value="添加">
</form>
<table id="grade-table">
<thead>
<tr>
<th>姓名</th>
<th>数学</th>
<th>英语</th>
<th>语文</th>
<th>总分</th>
<th>总评等级</th>
</tr>
</thead>
<tbody>
</tbody>
<tfoot>
<tr>
<td colspan="5">最高分：</td>
<td id="highest-grade"></td>
</tr>
<tr>
<td colspan="5">总评等级：</td>
<td id="average-grade"></td>
</tr>
</tfoot>
</table>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="script.js"></script>
</body>
</html>
```
CSS代码：
```css
form {
margin-bottom: 20px;
}
label {
display: inline-block;
width: 100px;
font-weight: bold;
margin-bottom: 10px;
}
input[type="text"],
input[type="number"] {
display: inline-block;
width: 200px;
height: 25px;
border: 1px solid #ccc;
border-radius: 3px;
padding: 5px;
margin-bottom: 10px;
}
input[type="submit"] {
display: block;
width: 100px;
height: 30px;
border: none;
background-color: #007bff;
color: #fff;
border-radius: 3px;
cursor: pointer;
}
table {
border-collapse: collapse;
border: 1px solid #ccc;
margin-bottom: 20px;
}
th, td {
padding: 10px;
border: 1px solid #ccc;
text-align: center;
}
tfoot td {
font-weight: bold;
}
```
JavaScript代码：
```javascript
$(document).ready(function() {
// 初始化成绩数组和统计变量
var grades = [];
var highestGrade = 0, averageGrade = 0;
// 表单提交事件处理函数
$('#grade-form').submit(function(event) {
event.preventDefault();
// 获取表单数据
var name = $('#name').val();
var mathGrade = parseInt($('#math-grade').val());
var englishGrade = parseInt($('#english-grade').val());
var chineseGrade = parseInt($('#chinese-grade').val());
// 计算总分和总评等级
var totalGrade = mathGrade + englishGrade + chineseGrade;
var averageGrade = totalGrade / 3;
var level = '';
if (averageGrade >= 90) {
level = '优秀';
} else if (averageGrade >= 80) {
level = '良好';
} else if (averageGrade >= 70) {
level = '中等';
} else if (averageGrade >= 60) {
level = '及格';
} else {
level = '不及格';
}
// 添加到成绩数组中
var grade = {
name: name,
mathGrade: mathGrade,
englishGrade: englishGrade,
chineseGrade: chineseGrade,
totalGrade: totalGrade,
level: level
};
grades.push(grade);
// 更新表格和统计信息
updateTable();
updateStatistics();
});
// 更新表格函数
function updateTable() {
var tbodyHtml = '';
for (var i = 0; i < grades.length; i++) {
var grade = grades[i];
tbodyHtml += '<tr>' +
'<td>' + grade.name + '</td>' +
'<td>' + grade.mathGrade + '</td>' +
'<td>' + grade.englishGrade + '</td>' +
'<td>' + grade.chineseGrade + '</td>' +
'<td>' + grade.totalGrade + '</td>' +
'<td>' + grade.level + '</td>' +
'</tr>';
}
$('#grade-table tbody').html(tbodyHtml);
}
// 更新统计信息函数
function updateStatistics() {
// 计算最高分
var maxTotalGrade = 0;
var maxGrade = null;
for (var i = 0; i < grades.length; i++) {
var grade = grades[i];
if (grade.totalGrade > maxTotalGrade) {
maxTotalGrade = grade.totalGrade;
maxGrade = grade;
}
}
highestGrade = maxTotalGrade;
$('#highest-grade').html(maxGrade ? maxGrade.name + '（' + maxTotalGrade + '分）' : '');
// 计算平均分和总评等级
var totalGrade = 0;
for (var i = 0; i < grades.length; i++) {
var grade = grades[i];
totalGrade += grade.totalGrade;
}
if (grades.length > 0) {
averageGrade = totalGrade / grades.length;
} else {
averageGrade = 0;
}
var level = '';
if (averageGrade >= 90) {
level = '优秀';
} else if (averageGrade >= 80) {
level = '良好';
} else if (averageGrade >= 70) {
level = '中等';
} else if (averageGrade >= 60) {
level = '及格';
} else {
level = '不及格';
}
$('#average-grade').html(level + '（' + averageGrade.toFixed(2) + '分）');
}
});
```
通过以上代码，当用户填写完成绩并点击“添加”按钮时，会将成绩数据存储在一个JavaScript数组中，并更新表格和统计信息。同时，会根据平均分计算总评等级。最后，会在表格底部显示最高分和总评等级。
相关推荐
最新推荐
c++大作业解决学生成绩录入、求平均分、单科成绩、总成绩等问题
问题分析 设某班有10位同学，每位同学有5门课成绩，要求程序包括4个方面的...（2）根据学生的学号查询学生的总成绩和平均成绩 （3）根据学生学号和科目号查询某单科的成绩 （4）根据科目号统计单科成绩的总分和平均分
java实现学生成绩录入系统
主要为大家详细介绍了java实现学生成绩录入系统，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
C语言输入学生成绩，计算并输出这些学生的最低分、最高分、平均分。
输入学生人数n,再输入n个学生的成绩，将所有成绩累加，再除以n，得到平均分；将第一个学生的成绩赋给最大最小值，用第i个分数与最大值比较，若第i个分数>最大值，将第i个分数赋值给最大值，同理得最小值，最后输出...
学生成绩管理VC总分平均分
学生成绩信息包括：学期...（2） 能按班级统计学生的成绩，求学生的总分及平均分 （3） 能查询学生成绩，不及格科目及学生名单 （4） 能按班级输出学生的成绩单 要求：使用二进制文件方式存储数据，系统以菜单方式工作
c语言作业——学生成绩统计.docx
整个程序功能 （1）学生基本信息（学号、姓名、…….）录入； （2）学生成绩录入； （3）统计学生成绩分布情况（每个分数段人数）；...（6）统计不同生源地学生的平均成绩，按平均成绩排序，并输出结果。
zigbee-cluster-library-specification
最新的zigbee-cluster-library-specification说明文档。
管理建模和仿真的文件
管理Boualem Benatallah引用此版本：布阿利姆·贝纳塔拉。管理建模和仿真。约瑟夫-傅立叶大学-格勒诺布尔第一大学，1996年。法语。NNT：电话：00345357HAL ID：电话：00345357https://theses.hal.science/tel-003453572008年12月9日提交HAL是一个多学科的开放存取档案馆，用于存放和传播科学研究论文，无论它们是否被公开。论文可以来自法国或国外的教学和研究机构，也可以来自公共或私人研究中心。L’archive ouverte pluridisciplinaire
MATLAB柱状图在信号处理中的应用：可视化信号特征和频谱分析
# 1. MATLAB柱状图概述**
MATLAB柱状图是一种图形化工具，用于可视化数据中不同类别或组的分布情况。它通过绘制垂直条形来表示每个类别或组中的数据值。柱状图在信号处理中广泛用于可视化信号特征和进行频谱分析。
柱状图的优点在于其简单易懂，能够直观地展示数据分布。在信号处理中，柱状图可以帮助工程师识别信号中的模式、趋势和异常情况，从而为信号分析和处理提供有价值的见解。
# 2. 柱状图在信号处理中的应用
柱状图在信号处理
用Spring boot和vue写一个登录注册界面
好的，这是一个比较常见的技术问题，我可以为您提供一些参考资料和思路。首先，您可以使用Spring Boot作为后端框架来处理用户认证和注册的逻辑，比如使用Spring Security实现用户登录认证。同时，您还需要设计相应的数据模型和数据库表结构来存储用户信息。在前端方面，您可以使用Vue.js作为框架来构建登录注册页面，使用Axios来发起API请求并和后端进行交互。当然，在实现过程中，还需要考虑一些具体细节，比如数据校验、安全性和用户体验等方面。希望这些信息能够帮助到您。
JSBSim Reference Manual
JSBSim参考手册，其中包含JSBSim简介，JSBSim配置文件xml的编写语法，编程手册以及一些应用实例等。其中有部分内容还没有写完，估计有生之年很难看到完整版了，但是内容还是很有参考价值的。