Update studentList.html

studentList.html

@@ -9,17 +9,6 @@
     <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; /* 为绝对定位的子元素提供基准 */  
@@ -32,9 +21,9 @@
             right: 20px;  
         }  
 
-        /* 学生名单中按钮样式 */  
+        /* 按钮样式 */  
         .button-container button {  
-            margin-left: 30px; /* 按钮之间留一点间隔 */  
+            margin-left: 10px; /* 按钮之间留一点间隔 */  
         }  
 
     </style>  
@@ -44,10 +33,14 @@
     <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 
+            data-tooltip="清除所有积分"
+            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;">
+        <button 
+            data-tooltip="返回"
+            onclick="goBack()"style="background: none; border: none; padding: 0; cursor: pointer;">
             <img src="back-icon.svg" alt="返回" style="width: 50px; height: 50px;" />
         </button>    
     </div>  
@@ -57,100 +50,6 @@
     <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>  
+    <script src="student.js"></script>  
 </body>  
 </html>