使用JavaScript语言编写期末成绩统计网页，要求在表单中输入上学期各门课程的成绩，点击“计算”按钮后，在底下网页空白处输出所有成绩的平均分值、总和分值、最高分值、最低分值及最高分值和最低分值所对

使用JavaScript编写一个简单的期末成绩统计网页可以分为以下几个步骤： 1. HTML结构设计： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>期末成绩统计</title> </head> <body> <form id="scoreForm"> <label for="course">课程名：</label> <input type="text" id="course" name="course"> <br> <label for="grade">成绩：</label> <input type="number" id="grade" name="grade"> <br><br> </form> <button onclick="calculate()">计算</button> <hr> <div id="result"></div> <script src="stats.js"></script> </body> </html> ``` 2. JavaScript部分 (stats.js): ```javascript function calculate() { const formData = document.getElementById('scoreForm').getElementsByClassName('form-control'); let courses = []; let scores = []; // 提取课程名和成绩 for (let i = 0; i < formData.length; i += 2) { courses.push(formData[i].value); scores.push(parseInt(formData[i + 1].value)); } // 计算总和、平均、最高分和最低分 const sum = scores.reduce((acc, curr) => acc + curr, 0); const average = sum / scores.length; const maxScore = Math.max(...scores); const minScore = Math.min(...scores); // 更新结果区域 const resultDiv = document.getElementById('result'); resultDiv.innerHTML = ` 平均分：${average.toFixed(2)}<br> 总分值：${sum}<br> 最高分：${maxScore} - ${courses[scores.indexOf(maxScore)]}<br> 最低分：${minScore} - ${courses[scores.indexOf(minScore)]} `; } ``` 这个例子中，用户通过输入表单填写各门课程的成绩，点击“计算”按钮后，`calculate()`函数会被触发，它会收集数据并计算所需的统计数据，最后将结果显示在页面底部的<div id="result"></div>元素中。

阅读全文

使用JavaScript语言编写期末成绩统计网页，要求在表单中输入上学期各门课程的成绩，点击“计算”按钮后，在底下网页空白处输出所有成绩的平均分值、总和分值、最高分值、最低分值及最高分值和最低分值所对

大家在看

西软S酒店管理软件V3.0说明书

用单片机实现声级计智能

2_JFM7VX690T型SRAM型现场可编程门阵列技术手册.pdf

鲁大师 v5.1021.1300 LITE.rar

OpenCL 代码优化

最新推荐

JavaScript实现点击按钮切换网页背景色的方法

javascript实现点击按钮弹出一个可关闭层窗口同时网页背景变灰的方法

关于javascript中限定时间内防止按钮重复点击的思路详解

JavaScript实现点击按钮字体放大、缩小

Javascript实现带关闭按钮的网页漂浮广告代码

S7-PDIAG工具使用教程及技术资料下载指南

管理建模和仿真的文件

CC-LINK远程IO模块AJ65SBTB1现场应用指南：常见问题快速解决

python 画一个进度条

Nginx 1.19.0版本Windows服务器部署指南