请你设计一个可交互学生管理系统的网页首先要有账号和密码只有账号密码均正确才可以登陆成功若失败则显示登陆失败！字体用红色其中账号和密码均为学号；功能1是：可以统计该学生的姓名、学号、年龄、家庭住址；功能2是：统计该学生去过图书馆的次数以及显示该次数与整体学生的比例用扇形统计图表示；功能3：查看该学生的绩点以及在班级中的排名； 下边给予你数据： 假设全体学生共10人 第一位学生：姓名：a 、学号121

以下是一个简单的可交互学生管理系统的网页设计示例：

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

请注意，这只是一个简单的示例，没有进行真正的账号密码验证。在实际应用中，应该使用服务器端验证账号和密码，并确保数据的安全性。此示例中的数据是在前端硬编码的，实际应用中可能需要从服务器获取数据。

请你设计一个可交互学生管理系统的网页首先要有账号和密码只有账号密码均正确才可以登陆成功若失败则显示登陆失败！字体用红色其中账号和密码均为学号；功能1是：可以统计该学生的姓名、学号、年龄、家庭住址；功能2是：统计该学生去过图书馆的次数以及显示该次数与整体学生的比例用扇形统计图表示；功能3：查看该学生的绩点以及在班级中的排名；下边给予你数据：假设全体学生共10人第一位学生：姓名：a 、学号121