<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>课堂点名</title> <style> body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: linear-gradient(135deg, #89f7fe, #66a6ff); height: 100vh; margin: 0; display: flex; justify-content: center; align-items: center; color: #333; } .container { text-align: center; background: rgba(255, 255, 255, 0.85); padding: 40px; border-radius: 20px; box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37); backdrop-filter: blur(8.5px); -webkit-backdrop-filter: blur(8.5px); border: 1px solid rgba(255, 255, 255, 0.18); } h1 { margin-bottom: 30px; font-size: 2em; color: #ff5722; } #studentNameDisplay { font-size: 1.8em; margin-bottom: 30px; min-height: 50px; } .button-group { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; } button { padding: 12px 25px; font-size: 1em; border: none; border-radius: 30px; background-color: #4CAF50; color: white; cursor: pointer; transition: transform 0.2s, background-color 0.3s; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); } button:hover { background-color: #45a049; transform: scale(1.05); box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3); } #absentButton { background-color: #f44336; } #absentButton:hover { background-color: #e53935; } .back-button { margin-top: 30px; background-color: #2196F3; } .back-button:hover { background-color: #1e88e5; } </style> </head> <body> <div class="container"> <h1>课堂点名</h1> <div id="studentNameDisplay">请点击“随机点名”按钮</div> <div class="button-group"> <button id="startAttendance">随机点名</button> <button id="presentButton" style="display:none;">到</button> <button id="absentButton" style="display:none;">没到</button> </div> <button class="back-button" onclick="window.location.href='index.html'">返回主页面</button> </div> <script> const studentNameDisplay = document.getElementById('studentNameDisplay'); const startAttendanceButton = document.getElementById('startAttendance'); const presentButton = document.getElementById('presentButton'); const absentButton = document.getElementById('absentButton'); let currentStudent = null; // 随机点名按钮点击事件 startAttendanceButton.addEventListener('click', async () => { try { // 向后端请求随机学生 const response = await fetch('http://localhost:3000/api/random-call'); const data = await response.json(); if (data.student_id && data.student_name) { currentStudent = data; studentNameDisplay.textContent = `当前学生: ${currentStudent.student_name}`; presentButton.style.display = 'inline-block'; absentButton.style.display = 'inline-block'; startAttendanceButton.disabled = true; } else { alert('无法获取学生数据'); } } catch (error) { console.error('获取学生失败', error); alert('获取学生失败,请重试'); } }); // 到场按钮点击事件 presentButton.addEventListener('click', async () => { if (currentStudent) { await updatePoints(currentStudent.student_id, 0.5); // 到场加0.5分 alert(`${currentStudent.student_name} 已到,加0.5分`); resetAttendance(); } }); // 没到按钮点击事件 absentButton.addEventListener('click', async () => { if (currentStudent) { await updatePoints(currentStudent.student_id, -1); // 未到减1分 alert(`${currentStudent.student_name} 未到,减1分`); resetAttendance(); } }); // 更新分数的函数 async function updatePoints(studentId, points) { try { // 发送请求更新分数 const response = await fetch('http://localhost:3000/api/update-score', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ student_id: studentId, points }), }); if (!response.ok) { throw new Error('更新分数失败'); } } catch (error) { console.error('更新分数失败', error); alert('更新分数失败,请重试'); } } // 重置点名的函数 function resetAttendance() { studentNameDisplay.textContent = '请点击“随机点名”按钮'; presentButton.style.display = 'none'; absentButton.style.display = 'none'; startAttendanceButton.disabled = false; } </script> </body> </html>