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

Update dianming.html

Browse Source
main
luoyonghuang 2 months ago
parent a10f391f85
commit 9a54ab08f0
1 changed files with 167 additions and 167 deletions
Show Stats Download Patch File Download Diff File

334
dianming.html
Unescape View File

@ -1,167 +1,167 @@
<!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, #89f7fe, #66a6ff); background: linear-gradient(135deg, #89f7fe, #66a6ff);
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 {
text-align: center; text-align: center;
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);
} }
h1 { h1 {
margin-bottom: 30px; margin-bottom: 30px;
font-size: 2em; font-size: 2em;
color: #ff5722; color: #ff5722;
} }
#studentNameDisplay { #studentNameDisplay {
font-size: 1.8em; font-size: 1.8em;
margin-bottom: 30px; margin-bottom: 30px;
min-height: 50px; min-height: 50px;
} }
.button-group { .button-group {
display: flex; display: flex;
justify-content: center; justify-content: center;
gap: 20px; gap: 20px;
flex-wrap: wrap; flex-wrap: wrap;
} }
button { button {
padding: 12px 25px; padding: 12px 25px;
font-size: 1em; font-size: 1em;
border: none; border: none;
border-radius: 30px; border-radius: 30px;
background-color: #4CAF50; background-color: #4CAF50;
color: white; color: white;
cursor: pointer; cursor: pointer;
transition: transform 0.2s, background-color 0.3s; transition: transform 0.2s, background-color 0.3s;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
} }
button:hover { button:hover {
background-color: #45a049; background-color: #45a049;
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);
} }
#absentButton { #absentButton {
background-color: #f44336; background-color: #f44336;
} }
#absentButton:hover { #absentButton:hover {
background-color: #e53935; background-color: #e53935;
} }
.back-button { .back-button {
margin-top: 30px; margin-top: 30px;
background-color: #2196F3; background-color: #2196F3;
} }
.back-button:hover { .back-button:hover {
background-color: #1e88e5; background-color: #1e88e5;
} }
</style> </style>
</head> </head>
<body> <body>
<div class="container"> <div class="container">
<h1>课堂点名</h1> <h1>课堂点名</h1>
<div id="studentNameDisplay">请点击“随机点名”按钮</div> <div id="studentNameDisplay">请点击“随机点名”按钮</div>
<div class="button-group"> <div class="button-group">
<button id="startAttendance">随机点名</button> <button id="startAttendance">随机点名</button>
<button id="presentButton" style="display:none;">到</button> <button id="presentButton" style="display:none;">到</button>
<button id="absentButton" style="display:none;">没到</button> <button id="absentButton" style="display:none;">没到</button>
</div> </div>
<button class="back-button" onclick="window.location.href='index.html'">返回主页面</button> <button class="back-button" onclick="window.location.href='index.html'">返回主页面</button>
</div> </div>
<script> <script>
const studentNameDisplay = document.getElementById('studentNameDisplay'); const studentNameDisplay = document.getElementById('studentNameDisplay');
const startAttendanceButton = document.getElementById('startAttendance'); const startAttendanceButton = document.getElementById('startAttendance');
const presentButton = document.getElementById('presentButton'); const presentButton = document.getElementById('presentButton');
const absentButton = document.getElementById('absentButton'); const absentButton = document.getElementById('absentButton');
let currentStudent = null; let currentStudent = null;
// 随机点名按钮点击事件 // 随机点名按钮点击事件
startAttendanceButton.addEventListener('click', async () => { startAttendanceButton.addEventListener('click', async () => {
try { try {
// 向后端请求随机学生 // 向后端请求随机学生
const response = await fetch('http://localhost:3000/api/random-call'); const response = await fetch('http://localhost:3000/api/random-call');
const data = await response.json(); const data = await response.json();
if (data.student) { if (data.student_id && data.student_name) {
currentStudent = data.student; currentStudent = data;
studentNameDisplay.textContent = `当前学生: ${currentStudent.student_name}`; studentNameDisplay.textContent = `当前学生: ${currentStudent.student_name}`;
presentButton.style.display = 'inline-block'; presentButton.style.display = 'inline-block';
absentButton.style.display = 'inline-block'; absentButton.style.display = 'inline-block';
startAttendanceButton.disabled = true; startAttendanceButton.disabled = true;
} else { } else {
alert('无法获取学生数据'); alert('无法获取学生数据');
} }
} catch (error) { } catch (error) {
console.error('获取学生失败', error); console.error('获取学生失败', error);
alert('获取学生失败，请重试'); alert('获取学生失败，请重试');
} }
}); });
// 到场按钮点击事件 // 到场按钮点击事件
presentButton.addEventListener('click', async () => { presentButton.addEventListener('click', async () => {
if (currentStudent) { if (currentStudent) {
await updatePoints(currentStudent.student_id, 1); // 到场加1分 await updatePoints(currentStudent.student_id, 0.5); // 到场加0.5分
alert(`${currentStudent.student_name} 已到，加1分`); alert(`${currentStudent.student_name} 已到，加0.5分`);
resetAttendance(); resetAttendance();
} }
}); });
// 没到按钮点击事件 // 没到按钮点击事件
absentButton.addEventListener('click', async () => { absentButton.addEventListener('click', async () => {
if (currentStudent) { if (currentStudent) {
await updatePoints(currentStudent.student_id, -1); // 未到减2分 await updatePoints(currentStudent.student_id, -1); // 未到减1分
alert(`${currentStudent.student_name} 未到，减1分`); alert(`${currentStudent.student_name} 未到，减1分`);
resetAttendance(); resetAttendance();
} }
}); });
// 更新分数的函数 // 更新分数的函数
async function updatePoints(studentId, points) { async function updatePoints(studentId, points) {
try { try {
// 发送请求更新分数 // 发送请求更新分数
const response = await fetch('http://localhost:3000/api/update-score', { const response = await fetch('http://localhost:3000/api/update-score', {
method: 'POST', method: 'POST',
headers: { headers: {
'Content-Type': 'application/json', 'Content-Type': 'application/json',
}, },
body: JSON.stringify({ student_id: studentId, points }), body: JSON.stringify({ student_id: studentId, points }),
}); });
if (!response.ok) { if (!response.ok) {
throw new Error('更新分数失败'); throw new Error('更新分数失败');
} }
} catch (error) { } catch (error) {
console.error('更新分数失败', error); console.error('更新分数失败', error);
alert('更新分数失败，请重试'); alert('更新分数失败，请重试');
} }
} }
// 重置点名的函数 // 重置点名的函数
function resetAttendance() { function resetAttendance() {
studentNameDisplay.textContent = '请点击“随机点名”按钮'; studentNameDisplay.textContent = '请点击“随机点名”按钮';
presentButton.style.display = 'none'; presentButton.style.display = 'none';
absentButton.style.display = 'none'; absentButton.style.display = 'none';
startAttendanceButton.disabled = false; startAttendanceButton.disabled = false;
} }
</script> </script>
</body> </body>
</html> </html>

Write Preview
Loading…
Cancel
Save