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

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

1条回答默认最新

崽崽的谷雨 2022-12-14 02: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>

加科目的话往 arr里加对象就行

展开全部

本回答被题主选为最佳回答 , 对您是否有帮助呢?

ruantiao2333 2022-12-15 05:52

 我加了但是没显示效果啊

崽崽的谷雨回复 ruantiao2333 2022-12-15 07:50

怎么加的？截个图看看

m0_73693595 回复甜桔汽水 2022-12-15 15:36

根据日期输出图片能做出来吗？

展开全部7条评论

编辑

预览

报告相同问题？

关注问题

问题事件

关注

码龄粉丝数原力等级 --

被采纳

被点赞

采纳率
系统已结题 12月22日
关注

码龄粉丝数原力等级 --

被采纳

被点赞

采纳率
已采纳回答 12月15日
关注

码龄粉丝数原力等级 --

被采纳

被点赞

采纳率
创建了问题 12月13日

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

1条回答 默认 最新

问题事件

1条回答默认最新