JavaScript+HTML+css制作的简单成绩管理系统点赞加关注，案例持续更新~

十七同志

已于 2023-11-22 18:27:11 修改

阅读量888

点赞数 8

分类专栏： Javascript项目和经典案例专栏文章标签： javascript 开发语言前端 css html

于 2023-11-22 17:22:55 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_54049256/article/details/134557708

版权

Javascript项目和经典案例专栏专栏收录该内容

7 篇文章

订阅专栏

文章介绍了如何使用JavaScript实现一个基础的成绩管理系统，包括数据存储、动态渲染、添加和删除功能，以及表单验证和事件处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现效果：

实现思路：

实现了一个成绩管理系统的基本功能，包括添加、删除成绩、计算总分平均分并渲染到页面中。具体实现思路如下：

定义一个数组list来存储成绩数据，数组中的每一个元素是一个对象，包含三个属性：姓名(uname)、科目(subject)、成绩(score)。
定义一个render()函数，用来根据list数组的数据动态生成表格内容，并计算总分平均分并渲染到页面中。
定义一个set()函数，用来添加数据。在函数中，首先获取表单中输入的数据，然后判断输入是否为空以及分数是否为数字，如果不满足条件则弹出提示并停止运行；否则将数据添加到list中，然后重新渲染表格，并清空表单中的内容。
为添加按钮和删除按钮添加事件监听器，当按下添加按钮时调用set()函数添加数据，当按下删除按钮时从list数组中删除对应的数据，并重新渲染表格。
为表单添加键盘事件监听器，当按下Enter键时调用set()函数添加数据。

最终实现了一个简单的成绩管理系统，用户可以通过表单添加成绩数据，并在表格中显示出来，同时也可以删除某个成绩数据。

附上源代码，代码里也有详细的注释

<!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>
  <style>
    .score-case {
      width: 1000px;
      margin: 50px auto;
      display: flex;
    }

    .score-case .table {
      flex: 4;
    }

    .score-case .table table {
      width: 100%;
      border-spacing: 0;
      border-top: 1px solid #ccc;
      border-left: 1px solid #ccc;
    }

    .score-case .table table th {
      background: #f5f5f5;
    }

    .score-case .table table tr:hover td {
      background: #f5f5f5;
    }

    .score-case .table table td,
    .score-case .table table th {
      border-bottom: 1px solid #ccc;
      border-right: 1px solid #ccc;
      text-align: center;
      padding: 10px;
    }

    .score-case .table table td.red,
    .score-case .table table th.red {
      color: red;
    }

    .score-case .table .none {
      height: 100px;
      line-height: 100px;
      color: #999;
    }

    .score-case .form {
      flex: 1;
      padding: 20px;
    }

    .score-case .form .form-item {
      display: flex;
      margin-bottom: 20px;
      align-items: center;
    }

    .score-case .form .form-item .label {
      width: 60px;
      text-align: right;
      font-size: 14px;
    }

    .score-case .form .form-item .input {
      flex: 1;
    }

    .score-case .form .form-item input,
    .score-case .form .form-item select {
      appearance: none;
      outline: none;
      border: 1px solid #ccc;
      width: 200px;
      height: 40px;
      box-sizing: border-box;
      padding: 10px;
      color: #666;
    }

    .score-case .form .form-item input::placeholder {
      color: #666;
    }

    .score-case .form .form-item .cancel,
    .score-case .form .form-item .submit {
      appearance: none;
      outline: none;
      border: 1px solid #ccc;
      border-radius: 4px;
      padding: 4px 10px;
      margin-right: 10px;
      font-size: 12px;
      background: #ccc;
    }

    .score-case .form .form-item .submit {
      border-color: #069;
      background: #069;
      color: #fff;
    }
  </style>
</head>

<body>
  <div id="app" class="score-case">
    <div class="table">
      <table>
        <thead>
          <tr>
            <th>姓名</th>
            <th>科目</th>
            <th>成绩</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <!-- <tr>
              <td>1</td>
              <td>语文</td>
              <td class="red">46</td>
              <td><a href="#">删除</a></td>
            </tr> -->
        </tbody>

        <tfoot>
          <tr>
            <td colspan="5">
              <span class="total">总分：246</span>
              <span style="margin-left: 50px" class="average">平均分：79</span>
            </td>
          </tr>
        </tfoot>
      </table>
    </div>
    <div class="form">
      <div class="form-item">
        <div class="label">姓名：</div>
        <div class="input">
          <input type="text" placeholder="请输入姓名" class="username" />
        </div>
      </div>
      <div class="form-item">
        <div class="label">科目：</div>
        <div class="input">
          <input type="text" placeholder="请输入科目" class="subject" />
        </div>
      </div>
      <div class="form-item">
        <div class="label">分数：</div>
        <div class="input">
          <input type="text" placeholder="请输入分数" class="score" />
        </div>
      </div>
      <div class="form-item">
        <div class="label"></div>
        <div class="input">
          <button class="submit">添加</button> <!-- 添加按钮 -->
        </div>
      </div>
    </div>
  </div>

  <script>
    const list = [
      {
        uname: '奥特曼',
        subject: '语文',
        score: 60,
      },
      {
        uname: '海绵宝宝',
        subject: '数学',
        score: 60,
      },
      {
        uname: '光头强',
        subject: '英文',
        score: 0,
      },
    ]
    /*   基于数据渲染页面 */
    function render() {
      let sum = 0
      let str = ''
      for (let i = 0; i < list.length; i++) {
        sum += list[i].score
        str += `
    <tr>
        <td>${list[i].uname}</td>
        <td>${list[i].subject}</td>
        <td class="red">${list[i].score}</td>
        <td><a href="#" data-id=${i}>删除</a></td>
    </tr>
    `
      }
      document.querySelector('.score-case tbody').innerHTML = str
      /*   计算总分平均分渲染到页面 */
      document.querySelector('.total').innerHTML = `总分：${sum}`
      /* 解决平均数出现NaN */
      document.querySelector('.average').innerHTML = /* 当分数全为0时会显示NaN,所以做个判断，不然会有显示bug */
        `平均分：${(sum / list.length).toFixed(2) === 'NaN' ? 0 : (sum / list.length).toFixed(2)}`
    }

    render()

    set = function () {
      const uname = document.querySelector('.username')
      const subject = document.querySelector('.subject')
      const score = document.querySelector('.score')
      const uname_v = uname.value.trim()
      const subject_v = subject.value.trim()
      const score_v = +score.value.trim()
      /* 当有内容输入为空时弹出提醒，并停止运行 */
      if (uname_v.length === 0 || subject_v.length === 0 || score_v.length === 0) {
        alert('姓名、科目、分数都不能为空')
        return
      } else /* 判断输入分数是否为数字，非数字弹出提醒并停止运行*/
        if (isNaN(score_v)) {
          alert('分数必须为数字')
          return
        }
      list.push({
        uname: uname_v,
        subject: subject_v,
        score: score_v,
      })
      render()
      /* 清空文本框 */
      uname.value = ''
      subject.value = ''
      score.value = ''
    }
    /* 添加数据 */
    const submit = document.querySelector('.submit') //选中添加按钮
    submit.addEventListener('click', function () {
      set()
    })
    /* 删除数据 */
    document.querySelector('tbody').addEventListener('click', function (e) {
      /* 判断按下的是否是删除按钮 */
      if (e.target.tagName === 'A') {
        list.splice(e.target.dataset.id, 1)
        /* 重新渲染 */
        render()
      }
    })
    /* 当按下Enter键添加数据，用事件委托做 */
    document.querySelector('.form').addEventListener('keyup', function (e) {
      if (e.key === 'Enter') {
        set()
      }
    })
  </script>


</body>

</html>