pg7s85mrc
/
select_random
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update score_display.html

Browse Source
main
luoyonghuang 2 months ago
parent a4cf04db29
commit 1fa4bf0c55
1 changed files with 249 additions and 197 deletions
Show Stats Download Patch File Download Diff File

446
score_display.html
Unescape View File

@ -1,197 +1,249 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="zh-CN"> <html lang="zh-CN">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>积分显示</title> <title>积分显示</title>
<style> <style>
body { body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #a18cd1, #fbc2eb); background: linear-gradient(135deg, #a18cd1, #fbc2eb);
height: 100vh; height: 100vh;
margin: 0; margin: 0;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
color: #333; color: #333;
} }
.container { .container {
width: 90%; width: 90%;
max-width: 800px; max-width: 800px;
background: rgba(255, 255, 255, 0.85); background: rgba(255, 255, 255, 0.85);
padding: 40px; padding: 40px;
border-radius: 20px; border-radius: 20px;
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37); box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
backdrop-filter: blur(8.5px); backdrop-filter: blur(8.5px);
-webkit-backdrop-filter: blur(8.5px); -webkit-backdrop-filter: blur(8.5px);
border: 1px solid rgba(255, 255, 255, 0.18); border: 1px solid rgba(255, 255, 255, 0.18);
text-align: center; text-align: center;
} }
h1 { h1 {
margin-bottom: 30px; margin-bottom: 30px;
font-size: 2em; font-size: 2em;
color: #ff5722; color: #ff5722;
} }
#sortButton { #sortButton {
padding: 10px 20px; padding: 10px 20px;
font-size: 1em; font-size: 1em;
border: none; border: none;
border-radius: 25px; border-radius: 25px;
background-color: #2196F3; background-color: #2196F3;
color: white; color: white;
cursor: pointer; cursor: pointer;
transition: background-color 0.3s, transform 0.2s; transition: background-color 0.3s, transform 0.2s;
margin-bottom: 20px; margin-bottom: 20px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
} }
#sortButton:hover { #sortButton:hover {
background-color: #1e88e5; background-color: #1e88e5;
transform: scale(1.05); transform: scale(1.05);
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3); box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
} }
table { table {
width: 100%; width: 100%;
border-collapse: collapse; border-collapse: collapse;
margin-top: 10px; margin-top: 10px;
} }
th, td { th, td {
padding: 12px 15px; padding: 12px 15px;
border-bottom: 1px solid #ddd; border-bottom: 1px solid #ddd;
font-size: 1em; font-size: 1em;
} }
th { th {
background-color: #4CAF50; background-color: #4CAF50;
color: white; color: white;
} }
tr:hover { tr:hover {
background-color: #f1f1f1; background-color: #f1f1f1;
} }
.button-group { .button-group {
margin-top: 30px; margin-top: 30px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
gap: 10px; gap: 10px;
} }
.back-button, .clear-button { .back-button, .clear-button {
padding: 10px 20px; padding: 10px 20px;
font-size: 1em; font-size: 1em;
border: none; border: none;
border-radius: 25px; border-radius: 25px;
color: white; color: white;
cursor: pointer; cursor: pointer;
transition: background-color 0.3s, transform 0.2s; transition: background-color 0.3s, transform 0.2s;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
} }
.back-button { .back-button {
background-color: #2196F3; background-color: #2196F3;
} }
.back-button:hover { .back-button:hover {
background-color: #1e88e5; background-color: #1e88e5;
transform: scale(1.05); transform: scale(1.05);
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3); box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
} }
.clear-button { .clear-button {
background-color: #f44336; background-color: #f44336;
} }
.clear-button:hover { .clear-button:hover {
background-color: #e53935; background-color: #e53935;
transform: scale(1.05); transform: scale(1.05);
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3); box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
} }
@media (max-width: 600px) { @media (max-width: 600px) {
th, td { th, td {
padding: 8px 10px; padding: 8px 10px;
} }
#sortButton, .button-group button { #sortButton, .button-group button {
width: 100%; width: 100%;
margin: 10px 0; margin: 10px 0;
} }
} }
</style> </style>
</head> </head>
<body> <body>
<div class="container"> <div class="container">
<h1>积分显示</h1> <h1>积分显示</h1>
<button id="sortButton">切换排序 (降序)</button> <button id="sortButton">切换排序 (降序)</button>
<table> <table>
<thead> <thead>
<tr> <tr>
<th>姓名</th> <th>姓名</th>
<th>积分</th> <th>学号</th>
</tr> <th>积分</th>
</thead> </tr>
<tbody id="studentList"> </thead>
<!-- 学生积分将在此处显示 --> <tbody id="studentList">
</tbody> <!-- 学生积分将在此处显示 -->
</table> </tbody>
<div class="button-group"> </table>
<button class="back-button" onclick="window.location.href='index.html'">返回主页面</button> <div class="button-group">
<button class="clear-button" id="clearButton">清除所有数据</button> <button class="back-button" onclick="window.location.href='index.html'">返回主页面</button>
</div> <button class="clear-button" id="clearButton">清除所有数据</button>
</div> </div>
</div>
<script>
const studentList = document.getElementById('studentList'); <script>
const sortButton = document.getElementById('sortButton'); const studentList = document.getElementById('studentList');
const clearButton = document.getElementById('clearButton'); const sortButton = document.getElementById('sortButton');
let ascending = false; // 默认降序 const clearButton = document.getElementById('clearButton');
let ascend = false; // 默认降序
// 预定义学生名单
const predefinedStudents = [
{ name: '张三', points: 0 }, //删除表
{ name: '李四', points: 0 }, async function deleteTable(tableName) {
{ name: '王五', points: 0 }, try {
{ name: '赵六', points: 0 }, const response = await fetch('/api/delete-table', {
]; method: 'POST',
headers: {
// 获取所有学生，包括预定义名单 'Content-Type': 'application/json',
function getAllStudents() { },
const students = predefinedStudents.map(student => { body: JSON.stringify({ tableName }),
const storedPoints = localStorage.getItem(student.name); });
return {
name: student.name, if (!response.ok) {
points: storedPoints !== null ? parseInt(storedPoints) : student.points throw new Error('删除表失败');
}; }
});
return students; const data = await response.json();
} alert(data.message); // 成功后显示消息
} catch (error) {
// 显示学生积分 console.error('删除表操作失败:', error);
function displayStudents() { alert('删除表失败');
const students = getAllStudents(); }
students.sort((a, b) => ascending ? a.points - b.points : b.points - a.points); }
studentList.innerHTML = '';
students.forEach(student => {
studentList.innerHTML += `
<tr> // 获取按分数降序排列的学生排名
<td>${student.name}</td> async function fetchDescendRanking() {
<td>${student.points}</td> try {
</tr> const response = await fetch('/api/descend_ranking');
`; if (!response.ok) {
}); alert('无法获取降序排名');
} return null;
}
// 切换排序
sortButton.addEventListener('click', () => { const ranking = await response.json(); // 获取并解析为JSON数组
ascending = !ascending; return ranking; // 返回排名数组
sortButton.textContent = `切换排序 (${ascending ? '升序' : '降序'})`; } catch (error) {
displayStudents(); console.error('请求失败:', error);
}); return null;
}
// 清除所有数据 }
clearButton.addEventListener('click', () => {
const confirmation = confirm("确定要清除所有学生数据吗？此操作无法撤销！"); // 获取按分数升序排列的学生排名
if (confirmation) { async function fetchAscendRanking() {
localStorage.clear(); try {
alert("所有数据已清除！"); const response = await fetch('/api/ascend_ranking');
displayStudents(); // 重新显示清空后的数据 if (!response.ok) {
} alert('无法获取升序排名');
}); return null;
}
// 初次加载时显示学生积分
displayStudents(); const ranking = await response.json(); // 获取并解析为JSON数组
</script> return ranking; // 返回排名数组
} catch (error) {
</body> console.error('请求失败:', error);
</html> return null;
}
}
async function displayStudents() {
let ranking; // 声明 ranking 变量
if (ascend) {
ranking = await fetchAscendRanking(); // 获取升序排名
} else {
ranking = await fetchDescendRanking(); // 获取降序排名
}
// 检查 ranking 是否为空
if (!ranking) {
alert('空 ranking');
return; // 退出函数
}
studentList.innerHTML = ''; // 清空表格内容
// 只显示前五名学生
ranking.slice(0, 5).forEach(student => {
studentList.innerHTML += `
<tr>
<td>${student.student_name}</td> <!-- 学生姓名 -->
<td>${student.student_id}</td> <!-- 学生ID -->
<td>${student.score}</td> <!-- 学生分数 -->
</tr>
`;
});
}
sortButton.addEventListener('click', () => {
ascend = !ascend;
sortButton.textContent = `切换排序 (${ascend ? '升序' : '降序'})`;
displayStudents();
});
clearButton.addEventListener('click', () => {
const confirmation = confirm("确定要清除所有学生数据吗？此操作无法撤销！");
if (confirmation) {
deleteTable('students');
alert("所有信息已清除！");
displayStudents(); // 重新显示清空后的数据
}
});
displayStudents();
</script>
</body>
</html>

Write Preview
Loading…
Cancel
Save