使用JS语言编写个人成绩统计网页,要求在表单中输入上学期各门课程的成绩,点击计算按钮后,再底下网页空白处输出所有成绩的平均分值,总和分值,最高分值。最低分值及最高分值和最低分值所对应的课程
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form id="form">
</form>
<button id="count">计算</button>
<div id="result"></div>
</body>
<script>
let arr = [
{
key: "math",
name: "数学",
value: null
},
{
key: "chinese",
name: "语文",
value: null
},
{
key: "english",
name: "英语",
value: null
}
];
let str = "";
let form = document.getElementById("form");
arr.map((item) => {
str += `<div>
<label for="${item.key}">${item.name}</label>
<input type="number" name="" id="${item.key}" value="${item.value}">
</div>`
});
form.innerHTML = str;
let btnCount = document.getElementById("count");
btnCount.onclick = function () {
let inp = form.getElementsByTagName("input");
let inpLen = inp.length;
let avg = 0; //平均分
let max = 0; //最高分
let min = 0; //最低分
let zj = 0; //总分
for (var i = 0; i < inpLen; i++) {
console.log(inp[i].id)
let id = inp[i].id;
let val = inp[i].value;
if (!val) {
arr.map((item) => {
if (item.key == id) {
alert("请检查" + item.name + "的成绩是否输入有误");
}
})
return
} else {
arr.map((item) => {
if (item.key == id) {
item.value = Number(val);
zj += Number(item.value);
}
})
avg = zj / inpLen;
max = Math.max.apply(Math, arr.map(item => { return item.value }));
min = Math.min.apply(Math, arr.map(item => { return item.value }));
console.log(zj, avg, max, min)
maxStr = "";
minStr = "";
arr.map((item) => {
if (item.value == max) {
maxStr += item.name;
}
if (item.value == min) {
minStr += item.name;
}
});
let result = document.getElementById("result");
result.innerHTML = `
<div>平均分:${avg}</div>
<div>总分:${zj}</div>
<div>最高分:${maxStr} 分数为:${max}</div>
<div>最低分:${minStr} 分数为:${min}</div>
`
}
}
}
</script>
</html>
加科目的话 往 arr里加 对象就行