From 9c8e63a94d1008adc08acb8bc6c941b452d5eec3 Mon Sep 17 00:00:00 2001
From: pzf8uwcp6 <13519963156@163.com>
Date: Fri, 11 Oct 2024 19:19:16 +0800
Subject: [PATCH] ADD file via upload

---
 studentList.html | 156 +++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 156 insertions(+)
 create mode 100644 studentList.html
diff --git a/studentList.html b/studentList.html
new file mode 100644
index 0000000..4499b76
--- /dev/null
+++ b/studentList.html
@@ -0,0 +1,156 @@
+<!DOCTYPE html>  
+<html lang="zh">  
+<head>  
+    <meta charset="UTF-8">  
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
+    <title>学生名单</title>  
+    <link rel="stylesheet" href="styles.css">   
+    <link rel="preconnect" href="https://fonts.googleapis.com">  
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>  
+    <link href="https://fonts.googleapis.com/css2?family=Zhi+Mang+Xing&display=swap" rel="stylesheet">   
+    <style>  
+        .tooltip {  
+            display: none;  
+            position: absolute;  
+            background-color: #555;  
+            color: #fff;  
+            text-align: center;  
+            border-radius: 5px;  
+            padding: 5px;  
+            z-index: 1;  
+        }  
+
+        body {  
+            text-align: center;  
+            position: relative; /* 为绝对定位的子元素提供基准 */  
+        }  
+
+        /* 将按钮容器放在右上角 */  
+        .button-container {  
+            position: fixed;  
+            top: 20px;  
+            right: 20px;  
+        }  
+
+        /* 学生名单中按钮样式 */  
+        .button-container button {  
+            margin-left: 30px; /* 按钮之间留一点间隔 */  
+        }  
+
+    </style>  
+</head>  
+<body>  
+    <h1>学生名单</h1>  
+    <div id="studentList"></div>  
+
+    <div class="button-container">  
+        <button onclick="resetAllPoints()"style="background: none; border: none; padding: 0; cursor: pointer;">
+            <img src="clearall-icon.svg" alt="一键清除所有积分" style="width: 50px; height: 50px;" />
+        </button>  
+        <button onclick="goBack()"style="background: none; border: none; padding: 0; cursor: pointer;">
+            <img src="back-icon.svg" alt="返回" style="width: 50px; height: 50px;" />
+        </button>  
+    </div>  
+
+    <div class="tooltip" id="tooltip"></div>
+    
+    <div id="message" style="display:none; position:fixed; top:20px; left:50%; transform:translateX(-50%); background-color:rgba(0, 0, 0, 0.5); color:white; padding:10px; border-radius:5px; white-space:nowrap;">  
+    </div>
+
+    <script>  
+        // 返回上一页  
+        function goBack() {  
+            window.history.back();  
+        }  
+
+        function showMessage(text) {  
+            const messageDiv = document.getElementById("message");  
+            messageDiv.textContent = text;  
+            messageDiv.style.display = "block"; // 显示消息  
+
+            setTimeout(() => {  
+                messageDiv.style.display = "none"; // 1秒后隐藏消息  
+            }, 1000);  
+        }
+
+        // 加载学生名单  
+        function loadStudentList() {  
+            const students = JSON.parse(localStorage.getItem('students')) || [];  
+            const list = document.getElementById('studentList');  
+            list.innerHTML = '';  
+
+            if (students.length === 0) {  
+                list.innerHTML = '<div>尚未导入任何学生名单。</div>';  
+                return;  
+            }  
+
+            students.forEach((student, index) => {  
+                list.innerHTML += `  
+                    <div>  
+                        ${student.id} - ${student.name} - 积分: ${student.points}  
+                        <button 
+                            data-tooltip="清除积分"
+                            onclick="clearStudentPoints(${index})"style="background: none; border: none; padding: 0; cursor: pointer;">
+                            <img src="clear-icon.svg" alt="清除" style="width: 40px; height: 40px;" /> 
+                            </button>  
+                        <button 
+                            data-tooltip="删除学生"
+                            onclick="deleteStudent(${index}) "style="background: none; border: none; padding: 0; cursor: pointer;">
+                            <img src="delete-icon.svg" alt="删除" style="width: 40px; height: 40px;" /> 
+                        </button>
+                    </div>`;  
+            });
+
+            // 注册工具提示事件  
+            registerTooltipEvents();  
+        }  
+
+        function registerTooltipEvents() {  
+            const buttons = document.querySelectorAll('button[data-tooltip]');  
+            const tooltip = document.getElementById('tooltip');  
+
+            buttons.forEach(button => {  
+                button.addEventListener('mouseenter', function(event) {  
+                    tooltip.textContent = button.getAttribute('data-tooltip');  
+                    tooltip.style.display = 'block';  
+                    tooltip.style.left = event.pageX + 'px';  
+                    tooltip.style.top = (event.pageY + 20) + 'px'; // 鼠标下方略微偏移  
+                });  
+
+                button.addEventListener('mouseleave', function() {  
+                    tooltip.style.display = 'none';  
+                });  
+            });  
+        }  
+
+        // 清除单个学生积分  
+        function clearStudentPoints(index) {  
+            const students = JSON.parse(localStorage.getItem('students')) || [];  
+            students[index].points = 0; // 清除该学生的积分  
+            localStorage.setItem('students', JSON.stringify(students)); // 更新本地存储  
+            loadStudentList(); // 重新加载学生列表  
+            showMessage("已清除该学生积分。");  
+        }  
+
+        // 删除单个学生  
+        function deleteStudent(index) {  
+            let students = JSON.parse(localStorage.getItem('students')) || [];  
+            students.splice(index, 1); // 删除该学生  
+            localStorage.setItem('students', JSON.stringify(students)); // 更新本地存储  
+            loadStudentList(); // 重新加载学生列表  
+            showMessage("已删除该学生。");  
+        }                                                                               
+
+        // 一键清除所有学生的积分  
+        function resetAllPoints() {  
+            let students = JSON.parse(localStorage.getItem('students')) || [];  
+            students.forEach(student => student.points = 0); // 清除所有学生的积分  
+            localStorage.setItem('students', JSON.stringify(students)); // 更新本地存储  
+            loadStudentList(); // 重新加载学生列表  
+            showMessage("所有学生的积分已清除。");  
+        }  
+
+        window.onload = loadStudentList; // 页面加载时调用  
+    </script>  
+</body>  
+</html>
\ No newline at end of file
