可交互学生管理系统网页设计 - 学生信息查询及统计 - 常规

<html>
<head>
  <title>学生管理系统</title>
  <style>
    .error {
      color: red;
    }
  </style>
</head>
<body>
  <h1>学生管理系统</h1>
  <div id="loginForm">
    <h2>登录</h2>
    <input type="text" id="account" placeholder="请输入学号">
    <br><br>
    <input type="password" id="password" placeholder="请输入密码">
    <br><br>
    <button onclick="login()">登录</button>
    <p id="loginResult" class="error" style="display: none;">登录失败！</p>
  </div>
  <div id="studentInfo" style="display: none;">
    <h2>学生信息</h2>
    <p id="name"></p>
    <p id="studentId"></p>
    <p id="age"></p>
    <p id="address"></p>
    <br>
    <h2>图书馆统计</h2>
    <p id="libraryCount"></p>
    <canvas id="libraryChart" width="200" height="200"></canvas>
    <br>
    <h2>绩点和排名</h2>
    <p id="gpa"></p>
    <p id="rank"></p>
  </div>
  <script>
    var students = [
      {
        name: 'a',
        studentId: '121',
        age: 18,
        address: '北京市',
        gpa: 3.9,
        libraryCount: 3
      },
      {
        name: 'b',
        studentId: '122',
        age: 18,
        address: '北京市',
        gpa: 3.3,
        libraryCount: 3
      }
    ];

    function login() {
      var account = document.getElementById("account").value;
      var password = document.getElementById("password").value;

      var student = students.find(function(s) {
        return s.studentId === account && s.studentId === password;
      });

      if (student) {
        document.getElementById("loginForm").style.display = "none";
        document.getElementById("studentInfo").style.display = "block";
        displayStudentInfo(student);
      } else {
        document.getElementById("loginResult").style.display = "block";
      }
    }

    function displayStudentInfo(student) {
      document.getElementById("name").innerText = "姓名：" + student.name;
      document.getElementById("studentId").innerText = "学号：" + student.studentId;
      document.getElementById("age").innerText = "年龄：" + student.age;
      document.getElementById("address").innerText = "家庭住址：" + student.address;
      document.getElementById("gpa").innerText = "绩点：" + student.gpa;

      var libraryCount = student.libraryCount;
      document.getElementById("libraryCount").innerText = "去图书馆次数：" + libraryCount;

      var totalStudents = students.length;
      var percentage = (libraryCount / totalStudents) * 100;

      var canvas = document.getElementById("libraryChart");
      var ctx = canvas.getContext("2d");

      var startAngle = 0;
      var endAngle = (percentage / 100) * (2 * Math.PI);
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      ctx.beginPath();
      ctx.moveTo(100, 100);
      ctx.arc(100, 100, 100, startAngle, endAngle);
      ctx.closePath();
      ctx.fillStyle = "blue";
      ctx.fill();

      document.getElementById("rank").innerText = "在班级中排名：" + calculateRank(student);
    }

    function calculateRank(student) {
      var sortedStudents = students.slice().sort(function(a, b) {
        return b.gpa - a.gpa;
      });

      for (var i = 0; i < sortedStudents.length; i++) {
        if (sortedStudents[i].studentId === student.studentId) {
          return i + 1;
        }
      }
    }
  </script>
</body>
</html>