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

写回答
好问题 0 提建议
追加酬金
关注问题
分享
邀请回答
编辑收藏删除
收藏举报

1条回答默认最新

崽崽的谷雨 2022-12-14 10:48

关注


<!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>