|
|
let students = JSON.parse(localStorage.getItem('students')) || [];
|
|
|
let selectedStudent = null;
|
|
|
let intervalId;
|
|
|
let lock = false;//自动加分锁
|
|
|
let lock1 = false;//手动加分锁
|
|
|
let onClassAdded = false;
|
|
|
let autoPointsAdded = false;
|
|
|
let manualPointsUsed = false;
|
|
|
let studentDrawn = false;
|
|
|
let starLock = false;
|
|
|
|
|
|
const stars = document.querySelectorAll('.rating label');
|
|
|
|
|
|
stars.forEach(star => {
|
|
|
star.addEventListener('mouseenter', () => {
|
|
|
const number = star.querySelector('.star-number');
|
|
|
number.classList.remove('hidden');
|
|
|
});
|
|
|
|
|
|
star.addEventListener('mouseleave', () => {
|
|
|
const number = star.querySelector('.star-number');
|
|
|
number.classList.add('hidden');
|
|
|
});
|
|
|
});
|
|
|
|
|
|
const particleCanvas = document.getElementById('particleCanvas');
|
|
|
const particleCtx = particleCanvas.getContext('2d');
|
|
|
particleCanvas.width = window.innerWidth;
|
|
|
particleCanvas.height = window.innerHeight;
|
|
|
|
|
|
let particles = [];
|
|
|
|
|
|
function createParticlesFromText(a, b) {
|
|
|
// 清空画布
|
|
|
particleCtx.clearRect(0, 0, particleCanvas.width, particleCanvas.height);
|
|
|
|
|
|
// 设置字体
|
|
|
particleCtx.font = '150px "Long Cang"';
|
|
|
particleCtx.fillStyle = '#003366';
|
|
|
|
|
|
// 绘制第一行文字
|
|
|
const x1 = particleCanvas.width / 2 - particleCtx.measureText(selectedStudent.name).width / 2;
|
|
|
const y1 = particleCanvas.height / 2 - 50; // 向上移动50像素
|
|
|
particleCtx.fillText(selectedStudent.name, x1, y1);
|
|
|
|
|
|
// 绘制第二行文字
|
|
|
const x2 = particleCanvas.width / 2 - particleCtx.measureText(selectedStudent.id).width / 2;
|
|
|
const y2 = particleCanvas.height / 2 + 70; // 向下移动70像素
|
|
|
particleCtx.fillText(selectedStudent.id, x2, y2);
|
|
|
|
|
|
// 获取整个画布的像素数据
|
|
|
const imageData = particleCtx.getImageData(0, 0, particleCanvas.width, particleCanvas.height);
|
|
|
|
|
|
// 清空粒子数组
|
|
|
particles = [];
|
|
|
|
|
|
// 创建粒子
|
|
|
for (let y = 0; y < imageData.height; y += 2) {
|
|
|
for (let x = 0; x < imageData.width; x += 2) {
|
|
|
const index = (y * imageData.width + x) * 4;
|
|
|
const alpha = imageData.data[index + 3];
|
|
|
if (alpha > 128) { // 只选择不透明的像素
|
|
|
let particle = new Particle(Math.random() * particleCanvas.width, Math.random() * particleCanvas.height);
|
|
|
particle.targetX = x;
|
|
|
particle.targetY = y;
|
|
|
particles.push(particle);
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 启动粒子动画
|
|
|
animateParticles();
|
|
|
}
|
|
|
|
|
|
function Particle(x, y) {
|
|
|
this.x = x;
|
|
|
this.y = y;
|
|
|
this.size = 1;
|
|
|
this.baseX = this.x;
|
|
|
this.baseY = this.y;
|
|
|
this.density = Math.random() * 30 + 1;
|
|
|
}
|
|
|
|
|
|
Particle.prototype.draw = function () {
|
|
|
particleCtx.fillStyle = 'black';
|
|
|
particleCtx.beginPath();
|
|
|
particleCtx.arc(this.x, this.y, this.size, 0, Math.PI * 2); // 绘制粒子
|
|
|
particleCtx.closePath();
|
|
|
particleCtx.fill();
|
|
|
};
|
|
|
|
|
|
Particle.prototype.update = function () {
|
|
|
let dx = this.targetX - this.x;
|
|
|
let dy = this.targetY - this.y;
|
|
|
let distance = Math.sqrt(dx * dx + dy * dy);
|
|
|
let speed = distance / 20; // 移动速度，离目标越远速度越快
|
|
|
this.x += dx / distance * speed;
|
|
|
this.y += dy / distance * speed;
|
|
|
|
|
|
// 减少抖动，当粒子非常接近目标位置时停止移动
|
|
|
if (distance < 1) {
|
|
|
this.x = this.targetX;
|
|
|
this.y = this.targetY;
|
|
|
}
|
|
|
};
|
|
|
|
|
|
function animateParticles() {
|
|
|
particleCtx.clearRect(0, 0, particleCanvas.width, particleCanvas.height); // 清除上一帧的粒子
|
|
|
|
|
|
particles.forEach(particle => {
|
|
|
particle.update(); // 更新每个粒子的状态
|
|
|
particle.draw(); // 绘制每个粒子
|
|
|
});
|
|
|
|
|
|
requestAnimationFrame(animateParticles); // 循环动画
|
|
|
}
|
|
|
|
|
|
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 showMessage(text) {
|
|
|
const messageDiv = document.getElementById("message");
|
|
|
messageDiv.textContent = text;
|
|
|
messageDiv.style.display = "block"; // 显示消息
|
|
|
|
|
|
setTimeout(() => {
|
|
|
messageDiv.style.display = "none"; // 1秒后隐藏消息
|
|
|
}, 1000);
|
|
|
}
|
|
|
|
|
|
window.onload = function() {
|
|
|
// 注册工具提示事件
|
|
|
registerTooltipEvents();
|
|
|
resetStars();
|
|
|
const storedStudent = localStorage.getItem('selectedStudent');//获取selectedStudent
|
|
|
if (storedStudent) {
|
|
|
selectedStudent = JSON.parse(storedStudent);
|
|
|
document.getElementById('selectedStudent').innerText = `${selectedStudent.name} (学号: ${selectedStudent.id})`;
|
|
|
autoPointsAdded = localStorage.getItem('autoPointsAdded') === 'true';
|
|
|
manualPointsUsed = localStorage.getItem('manualPointsUsed') === 'true';
|
|
|
starLock = localStorage.getItem('starLock') === 'true';
|
|
|
onClassAdded = localStorage.getItem('onClassAdded') === 'true';
|
|
|
}
|
|
|
};
|
|
|
|
|
|
function uploadFile() {
|
|
|
const input = document.getElementById('fileInput');
|
|
|
const file = input.files[0];
|
|
|
if (!file) {
|
|
|
showMessage("请选择一个文件！");
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
const reader = new FileReader();
|
|
|
reader.onload = function(e) {
|
|
|
const data = new Uint8Array(e.target.result);
|
|
|
const workbook = XLSX.read(data, { type: 'array' });
|
|
|
const firstSheet = workbook.Sheets[workbook.SheetNames[0]];
|
|
|
|
|
|
// 读取所有行（包括空行）
|
|
|
let allStudents = XLSX.utils.sheet_to_json(firstSheet, { header: 1 });
|
|
|
|
|
|
// 如果没有数据，则提示用户
|
|
|
if (allStudents.length < 2) {
|
|
|
showMessage("工作表中没有有效数据！");
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
// 去掉表头
|
|
|
allStudents = allStudents.slice(1);
|
|
|
|
|
|
// 过滤有效行，确保每行的有效性
|
|
|
students = allStudents
|
|
|
.filter(row => row[0] !== undefined && row[0] !== null && row[0] !== '') // 确保 ID 不为空
|
|
|
.map(row => ({
|
|
|
id: row[0],
|
|
|
name: row[1], // 假设第二列为名字
|
|
|
points: 0 // 默认分数为 0
|
|
|
}));
|
|
|
|
|
|
// 如果没有有效的学生数据，则提示
|
|
|
if (students.length === 0) {
|
|
|
showMessage("工作表中没有有效学生数据！");
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
localStorage.setItem('students', JSON.stringify(students));
|
|
|
showMessage("学生名单导入成功！");
|
|
|
toggleButtons();
|
|
|
};
|
|
|
reader.readAsArrayBuffer(file);
|
|
|
}
|
|
|
|
|
|
function updateFileName() {
|
|
|
const input = document.getElementById('fileInput');
|
|
|
const fileName = document.getElementById('fileName');
|
|
|
if (input.files.length > 0) {
|
|
|
fileName.innerText = input.files[0].name; // 显示选择的文件名
|
|
|
} else {
|
|
|
fileName.innerText = '未选择文件'; // 显示未选择文件的提示
|
|
|
}
|
|
|
}
|
|
|
|
|
|
function viewStudentList() {
|
|
|
window.location.href = 'studentList.html';
|
|
|
}
|
|
|
|
|
|
function startDraw() {
|
|
|
if (students.length === 0) {
|
|
|
showMessage("请先导入学生名单！");
|
|
|
uploadModal.style.display = 'block'; // 显示模态框
|
|
|
return;
|
|
|
}
|
|
|
// 隐藏页面元素
|
|
|
document.querySelector('.container').classList.add('hidden');
|
|
|
resetStars();
|
|
|
|
|
|
lock = false;
|
|
|
lock1 = false;
|
|
|
onClassAdded = false;
|
|
|
autoPointsAdded = false;
|
|
|
manualPointsUsed = false;
|
|
|
starLock = false;
|
|
|
|
|
|
|
|
|
const totalPoints = students.reduce((sum, student) => sum + (student.points > 10 ? 1 / student.points : 10 - student.points), 0);
|
|
|
const randomValue = Math.random() * totalPoints;
|
|
|
let cumulativePoints = 0;
|
|
|
|
|
|
for (const student of students) {
|
|
|
cumulativePoints += Math.max(1, 10 - student.points);
|
|
|
if (randomValue < cumulativePoints) {
|
|
|
selectedStudent = student;
|
|
|
break;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
setTimeout(scrollStudents, 350);
|
|
|
}
|
|
|
|
|
|
function onClass() {
|
|
|
if(!onClassAdded && selectedStudent) {
|
|
|
selectedStudent.points += 1;
|
|
|
synPoints();
|
|
|
onClassAdded = true;
|
|
|
updateLocalStorage();
|
|
|
showMessage(`${selectedStudent.name}到场，加分 1。`);
|
|
|
} else if (!selectedStudent) {
|
|
|
showMessage("请先抽取一位学生");
|
|
|
} else {
|
|
|
showMessage("到场已加分");
|
|
|
}
|
|
|
}
|
|
|
|
|
|
document.addEventListener('click', async function(event) {
|
|
|
const drawButton = document.getElementById('drawButton');
|
|
|
const scrollingNamesDiv = document.getElementById('scrollingNames');
|
|
|
const selectedStudentDiv = document.getElementById('selectedStudent');
|
|
|
|
|
|
if(!clickEnabled){
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
if (!drawButton.contains(event.target) &&
|
|
|
!scrollingNamesDiv.contains(event.target) &&
|
|
|
!selectedStudentDiv.contains(event.target)) {
|
|
|
|
|
|
// 清空显示的被点到学生信息
|
|
|
scrollingNamesDiv.innerHTML = '';
|
|
|
|
|
|
particles = [];
|
|
|
particleCtx.clearRect(0, 0, particleCanvas.width, particleCanvas.height);
|
|
|
|
|
|
// 恢复页面元素
|
|
|
document.querySelector('.container').classList.remove('hidden');
|
|
|
selectedStudentDiv.style.display = 'block'; // 显示
|
|
|
}
|
|
|
});
|
|
|
|
|
|
function synPoints() {
|
|
|
// 更新 students 数组中的相应学生积分
|
|
|
const studentIndex = students.findIndex(s => s.id === selectedStudent.id);
|
|
|
if (studentIndex !== -1) {
|
|
|
students[studentIndex].points = selectedStudent.points; // 确保 students 数组中的积分也更新
|
|
|
}
|
|
|
}
|
|
|
|
|
|
function repeatCorrectly() {
|
|
|
if (!lock && selectedStudent && !autoPointsAdded) {
|
|
|
selectedStudent.points += 0.5;
|
|
|
synPoints();
|
|
|
autoPointsAdded = true;
|
|
|
lock = true;
|
|
|
updateLocalStorage();
|
|
|
showMessage(`已为 ${selectedStudent.name}加分 0.5。`);
|
|
|
} else if (!selectedStudent) {
|
|
|
showMessage("请先抽取一位学生");
|
|
|
} else {
|
|
|
showMessage("已为该学生加过分");
|
|
|
}
|
|
|
}
|
|
|
|
|
|
|
|
|
function repeatIncorrectly() {
|
|
|
if (!lock && selectedStudent && !autoPointsAdded) {
|
|
|
selectedStudent.points -= 1;
|
|
|
synPoints();
|
|
|
autoPointsAdded = true;
|
|
|
lock = true;
|
|
|
updateLocalStorage();
|
|
|
showMessage(`已为 ${selectedStudent.name} 扣分 1。`);
|
|
|
} else if (!selectedStudent) {
|
|
|
showMessage("请先抽取一位学生");
|
|
|
} else {
|
|
|
showMessage("已为该学生加过分");
|
|
|
}
|
|
|
}
|
|
|
|
|
|
let clickEnabled = true; // 用于跟踪点击是否被允许
|
|
|
|
|
|
function scrollStudents() {
|
|
|
document.getElementById('selectedStudent').innerText = '';
|
|
|
const scrollingNamesDiv = document.getElementById('scrollingNames');
|
|
|
scrollingNamesDiv.innerHTML = '';
|
|
|
let index = 0;
|
|
|
|
|
|
clickEnabled = false; // 禁用点击
|
|
|
|
|
|
return new Promise((resolve) => {
|
|
|
intervalId = setInterval(() => {
|
|
|
scrollingNamesDiv.innerText = students[index].name;
|
|
|
index = (index + 1) % students.length;
|
|
|
}, 100);
|
|
|
|
|
|
setTimeout(() => {
|
|
|
clearInterval(intervalId);
|
|
|
scrollingNamesDiv.innerHTML = '';
|
|
|
if (selectedStudent) {
|
|
|
document.getElementById('selectedStudent').innerText = `${selectedStudent.name} (学号: ${selectedStudent.id})`;
|
|
|
document.getElementById('selectedStudent').style.display = 'none'; // 隐藏
|
|
|
createParticlesFromText(`${selectedStudent.name} (学号:${selectedStudent.id})`);
|
|
|
updateLocalStorage();
|
|
|
}
|
|
|
resolve(); // 完成滚动时解析Promise
|
|
|
clickEnabled = true; // 恢复点击
|
|
|
}, 3000);
|
|
|
});
|
|
|
}
|
|
|
|
|
|
function updateLocalStorage() {
|
|
|
localStorage.setItem('selectedStudent', JSON.stringify(selectedStudent));
|
|
|
localStorage.setItem('students', JSON.stringify(students));
|
|
|
localStorage.setItem('autoPointsAdded', autoPointsAdded);
|
|
|
localStorage.setItem('manualPointsUsed', manualPointsUsed);
|
|
|
localStorage.setItem('starLock',starLock);
|
|
|
localStorage.setItem('onClassAdded',onClassAdded);
|
|
|
}
|
|
|
|
|
|
// 初始化星级点击事件监听器
|
|
|
document.querySelectorAll('.rating input').forEach(star => {
|
|
|
star.addEventListener('change', function() {
|
|
|
if (!starLock) { // 检查星星是否已经被点击过
|
|
|
updatePoints(this.value);
|
|
|
} else {
|
|
|
showMessage("每次点名只能点击一次星星进行加分。");
|
|
|
}
|
|
|
});
|
|
|
});
|
|
|
|
|
|
// 根据选中的星级为学生加分
|
|
|
function updatePoints(points) {
|
|
|
points = parseFloat(points); // 将点击的星星值转换为整数
|
|
|
if (selectedStudent) {
|
|
|
if (!starLock) { // 检查星星是否已经被点击过
|
|
|
selectedStudent.points += points; // 根据星星值加分
|
|
|
synPoints();
|
|
|
showMessage(`已为 ${selectedStudent.name} 加分 ${points}。`);
|
|
|
starLock = true; // 点击后锁定星星不能再加分
|
|
|
updateLocalStorage();
|
|
|
} else {
|
|
|
showMessage("每次点名只能点击一次星星进行加分。");
|
|
|
}
|
|
|
} else {
|
|
|
showMessage("请先点名一个学生。");
|
|
|
}
|
|
|
}
|
|
|
|
|
|
//每次返回页面或者重新点名使星星恢复原始形态
|
|
|
function resetStars() {
|
|
|
document.querySelectorAll('.rating input').forEach(star => {
|
|
|
star.checked = false; // 取消选中状态
|
|
|
});
|
|
|
}
|
|
|
|
|
|
// 禁用所有星星选择
|
|
|
function disableStars() {
|
|
|
document.querySelectorAll('.rating input').forEach(star => {
|
|
|
star.disabled = true;
|
|
|
});
|
|
|
}
|
|
|
|
|
|
// 启用所有星星选择
|
|
|
function enableStars() {
|
|
|
document.querySelectorAll('.rating input').forEach(star => {
|
|
|
star.disabled = false;
|
|
|
});
|
|
|
}
|
|
|
|
|
|
function resetAllPoints() {
|
|
|
students.forEach(student => student.points = 0);
|
|
|
localStorage.setItem('students', JSON.stringify(students));
|
|
|
localStorage.removeItem('selectedStudent');
|
|
|
selectedStudent = null;
|
|
|
document.getElementById('selectedStudent').innerText = '';
|
|
|
showMessage("所有积分已重置！");
|
|
|
}
|
|
|
|
|
|
//弹窗
|
|
|
const fileButton = document.getElementById('fileButton');
|
|
|
const uploadModal = document.getElementById('uploadModal');
|
|
|
const closeButton = document.getElementById('closeButton');
|
|
|
|
|
|
fileButton.addEventListener('click',function() {
|
|
|
uploadModal.style.display = 'block'; // 显示模态框
|
|
|
});
|
|
|
|
|
|
closeButton.addEventListener('click', function() {
|
|
|
resetUpload();
|
|
|
uploadModal.style.display = 'none'; // 关闭模态框
|
|
|
});
|
|
|
|
|
|
window.addEventListener('click', function(event) {
|
|
|
if (event.target === uploadModal) {
|
|
|
uploadModal.style.display = 'none'; // 点击模态框外部关闭
|
|
|
}
|
|
|
});
|
|
|
|
|
|
const uploadBox = document.getElementById('uploadBox');
|
|
|
const fileInput = document.getElementById('fileInput');
|
|
|
|
|
|
uploadBox.addEventListener('click', function() {
|
|
|
fileInput.click();
|
|
|
});
|
|
|
|
|
|
uploadBox.addEventListener('dragover', function(event) {
|
|
|
event.preventDefault();
|
|
|
uploadBox.style.borderColor = '#4CAF50';
|
|
|
});
|
|
|
|
|
|
uploadBox.addEventListener('dragleave', function() {
|
|
|
uploadBox.style.borderColor = '#ccc';
|
|
|
});
|
|
|
|
|
|
uploadBox.addEventListener('drop', function(event) {
|
|
|
event.preventDefault();
|
|
|
uploadBox.style.borderColor = '#ccc';
|
|
|
const files = event.dataTransfer.files;
|
|
|
if (files.length > 0) {
|
|
|
const fileName = files[0].name; // 获取文件名
|
|
|
const uploadText = document.getElementById('uploadText');
|
|
|
const excelLogo = '📊'; // Excel 图标，可以使用 emoji，也可以使用图像 URL
|
|
|
|
|
|
// 替换内容
|
|
|
uploadText.innerHTML = `${excelLogo} ${fileName}`;
|
|
|
document.querySelector('.pic').style.display = 'none'; // 隐藏箭头
|
|
|
showMessage('已选择文件: ' + files[0].name);
|
|
|
|
|
|
// 将文件设置到 fileInput 中，以便 OK 按钮可以获取到
|
|
|
fileInput.files = files;
|
|
|
}
|
|
|
});
|
|
|
|
|
|
fileInput.addEventListener('change', function(event) {
|
|
|
const file = event.target.files[0];
|
|
|
if (file) {
|
|
|
const fileName = file.name; // 获取文件名
|
|
|
const uploadText = document.getElementById('uploadText');
|
|
|
const excelLogo = '📊'; // Excel 图标，可以使用 emoji，也可以使用图像 URL
|
|
|
|
|
|
// 替换内容
|
|
|
uploadText.innerHTML = `${excelLogo} ${fileName}`;
|
|
|
document.querySelector('.pic').style.display = 'none'; // 隐藏箭头
|
|
|
showMessage('已选择文件: ' + file.name);
|
|
|
}
|
|
|
});
|
|
|
|
|
|
document.getElementById('cancelButton').addEventListener('click', function() {
|
|
|
resetUpload();
|
|
|
fileInput.value = '';
|
|
|
uploadModal.style.display = 'none'; // 取消时关闭模态框
|
|
|
showMessage('已取消选择');
|
|
|
});
|
|
|
|
|
|
document.getElementById('okButton').addEventListener('click', function() {
|
|
|
const input = document.getElementById('fileInput');
|
|
|
const file = input.files[0]; // 获取选中的文件
|
|
|
|
|
|
if (!file) {
|
|
|
showMessage('请先选择文件');
|
|
|
} else {
|
|
|
showMessage('文件导入成功: ' + file.name);
|
|
|
uploadFile(); // 调用上传文件的函数
|
|
|
uploadModal.style.display = 'none'; // 关闭模态框
|
|
|
}
|
|
|
resetUpload();
|
|
|
});
|
|
|
|
|
|
// 重置上传状态的函数
|
|
|
function resetUpload() {
|
|
|
document.getElementById('fileInput').value = ''; // 清空文件输入
|
|
|
document.getElementById('uploadText').innerHTML = '点击或拖拽文件到此处上传'; // 恢复提示文本
|
|
|
document.querySelector('.pic').style.display = 'block'; // 显示箭头
|
|
|
} |
