You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
156 lines
6.4 KiB
156 lines
6.4 KiB
2 months ago
|
<!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>
|