mirror of
https://github.com/ExamAware/ExamSchedule.git
synced 2025-04-29 11:06:32 +00:00
style: 添加错误提示系统，优化用户体验，处理设置和全屏操作中的异常
This commit is contained in:
MKStoler1024
parent
689f06977a
commit
61467e3bf4
@ -20,122 +20,134 @@ document.addEventListener("DOMContentLoaded", () => {
|
||||
setInterval(() => updateCurrentTime(), 1000);
|
||||
setInterval(() => updateExamInfo(data), 1000);
|
||||
})
|
||||
.catch(error => console.error('Error fetching exam data:', error));
|
||||
.catch(error => errorSystem.show('获取考试数据失败: ' + error.message));
|
||||
}
|
||||
|
||||
function displayExamInfo(data) {
|
||||
const examNameText = data.examName;
|
||||
const roomText = roomElem.textContent;
|
||||
examNameElem.innerHTML = `${examNameText} <span id="room">${roomText}</span>`;
|
||||
messageElem.textContent = data.message;
|
||||
try {
|
||||
const examNameText = data.examName;
|
||||
const roomText = roomElem.textContent;
|
||||
examNameElem.innerHTML = `${examNameText} <span id="room">${roomText}</span>`;
|
||||
messageElem.textContent = data.message;
|
||||
} catch (e) {
|
||||
errorSystem.show('显示考试信息失败: ' + e.message);
|
||||
}
|
||||
}
|
||||
|
||||
function updateCurrentTime() {
|
||||
const now = new Date(new Date().getTime() + offsetTime * 1000);
|
||||
currentTimeElem.textContent = now.toLocaleTimeString('zh-CN', { hour12: false });
|
||||
try {
|
||||
const now = new Date(new Date().getTime() + offsetTime * 1000);
|
||||
currentTimeElem.textContent = now.toLocaleTimeString('zh-CN', { hour12: false });
|
||||
} catch (e) {
|
||||
errorSystem.show('更新时间失败: ' + e.message);
|
||||
}
|
||||
}
|
||||
|
||||
function updateExamInfo(data) {
|
||||
const now = new Date(new Date().getTime() + offsetTime * 1000);
|
||||
let currentExam = null;
|
||||
let nextExam = null;
|
||||
let lastExam = null;
|
||||
try {
|
||||
const now = new Date(new Date().getTime() + offsetTime * 1000);
|
||||
let currentExam = null;
|
||||
let nextExam = null;
|
||||
let lastExam = null;
|
||||
|
||||
data.examInfos.forEach(exam => {
|
||||
const start = new Date(exam.start);
|
||||
const end = new Date(exam.end);
|
||||
if (now >= start && now <= end) {
|
||||
currentExam = exam;
|
||||
}
|
||||
if (!currentExam && !nextExam && now < start) {
|
||||
nextExam = exam;
|
||||
}
|
||||
if (now > end && (!lastExam || end > new Date(lastExam.end))) {
|
||||
lastExam = exam;
|
||||
}
|
||||
});
|
||||
data.examInfos.forEach(exam => {
|
||||
const start = new Date(exam.start);
|
||||
const end = new Date(exam.end);
|
||||
if (now >= start && now <= end) {
|
||||
currentExam = exam;
|
||||
}
|
||||
if (!currentExam && !nextExam && now < start) {
|
||||
nextExam = exam;
|
||||
}
|
||||
if (now > end && (!lastExam || end > new Date(lastExam.end))) {
|
||||
lastExam = exam;
|
||||
}
|
||||
});
|
||||
|
||||
if (currentExam) {
|
||||
currentSubjectElem.textContent = `当前科目: ${currentExam.name}`;
|
||||
examTimingElem.textContent = `起止时间: ${formatTimeWithoutSeconds(new Date(currentExam.start).toLocaleTimeString('zh-CN', { hour12: false }))} - ${formatTimeWithoutSeconds(new Date(currentExam.end).toLocaleTimeString('zh-CN', { hour12: false }))}`;
|
||||
const remainingTime = (new Date(currentExam.end).getTime() - now.getTime() + 1000) / 1000;
|
||||
const remainingHours = Math.floor(remainingTime / 3600);
|
||||
const remainingMinutes = Math.floor((remainingTime % 3600) / 60);
|
||||
const remainingSeconds = Math.floor(remainingTime % 60);
|
||||
const remainingTimeText = `${remainingHours}时 ${remainingMinutes}分 ${remainingSeconds}秒`;
|
||||
if (currentExam) {
|
||||
currentSubjectElem.textContent = `当前科目: ${currentExam.name}`;
|
||||
examTimingElem.textContent = `起止时间: ${formatTimeWithoutSeconds(new Date(currentExam.start).toLocaleTimeString('zh-CN', { hour12: false }))} - ${formatTimeWithoutSeconds(new Date(currentExam.end).toLocaleTimeString('zh-CN', { hour12: false }))}`;
|
||||
const remainingTime = (new Date(currentExam.end).getTime() - now.getTime() + 1000) / 1000;
|
||||
const remainingHours = Math.floor(remainingTime / 3600);
|
||||
const remainingMinutes = Math.floor((remainingTime % 3600) / 60);
|
||||
const remainingSeconds = Math.floor(remainingTime % 60);
|
||||
const remainingTimeText = `${remainingHours}时 ${remainingMinutes}分 ${remainingSeconds}秒`;
|
||||
|
||||
if (remainingHours === 0 && remainingMinutes <= 14) {
|
||||
remainingTimeElem.textContent = `倒计时: ${remainingTimeText}`;
|
||||
remainingTimeElem.style.color = "red";
|
||||
remainingTimeElem.style.fontWeight = "bold";
|
||||
if (remainingHours === 0 && remainingMinutes <= 14) {
|
||||
remainingTimeElem.textContent = `倒计时: ${remainingTimeText}`;
|
||||
remainingTimeElem.style.color = "red";
|
||||
remainingTimeElem.style.fontWeight = "bold";
|
||||
} else {
|
||||
remainingTimeElem.textContent = `剩余时间: ${remainingTimeText}`;
|
||||
remainingTimeElem.style.color = "#93b4f7";
|
||||
remainingTimeElem.style.fontWeight = "normal";
|
||||
}
|
||||
|
||||
statusElem.textContent = "状态: 进行中";
|
||||
statusElem.style.color = "#5ba838";
|
||||
} else if (lastExam && now < new Date(lastExam.end).getTime() + 60000) {
|
||||
const timeSinceEnd = (now.getTime() - new Date(lastExam.end).getTime()) / 1000;
|
||||
currentSubjectElem.textContent = `上场科目: ${lastExam.name}`;
|
||||
examTimingElem.textContent = "";
|
||||
remainingTimeElem.textContent = ``;
|
||||
statusElem.textContent = "状态: 已结束";
|
||||
statusElem.style.color = "red";
|
||||
} else if (nextExam) {
|
||||
const timeUntilStart = ((new Date(nextExam.start).getTime() - now.getTime()) / 1000) + 1;
|
||||
const remainingHours = Math.floor(timeUntilStart / 3600);
|
||||
const remainingMinutes = Math.floor((timeUntilStart % 3600) / 60);
|
||||
const remainingSeconds = Math.floor(timeUntilStart % 60);
|
||||
const remainingTimeText = `${remainingHours}时 ${remainingMinutes}分 ${remainingSeconds}秒`;
|
||||
|
||||
if (timeUntilStart <= 15 * 60) {
|
||||
currentSubjectElem.textContent = `即将开始: ${nextExam.name}`;
|
||||
remainingTimeElem.textContent = `倒计时: ${remainingTimeText}`;
|
||||
remainingTimeElem.style.color = "orange";
|
||||
remainingTimeElem.style.fontWeight = "bold";
|
||||
statusElem.textContent = "状态: 即将开始";
|
||||
statusElem.style.color = "#DBA014";
|
||||
} else {
|
||||
currentSubjectElem.textContent = `下一场科目: ${nextExam.name}`;
|
||||
remainingTimeElem.textContent = "";
|
||||
statusElem.textContent = "状态: 未开始";
|
||||
remainingTimeElem.style.fontWeight = "normal";
|
||||
statusElem.style.color = "#EAEE5B";
|
||||
}
|
||||
|
||||
examTimingElem.textContent = `起止时间: ${formatTimeWithoutSeconds(new Date(nextExam.start).toLocaleTimeString('zh-CN', { hour12: false }))} - ${formatTimeWithoutSeconds(new Date(nextExam.end).toLocaleTimeString('zh-CN', { hour12: false }))}`;
|
||||
} else {
|
||||
remainingTimeElem.textContent = `剩余时间: ${remainingTimeText}`;
|
||||
remainingTimeElem.style.color = "#93b4f7";
|
||||
remainingTimeElem.style.fontWeight = "normal";
|
||||
}
|
||||
|
||||
statusElem.textContent = "状态: 进行中";
|
||||
statusElem.style.color = "#5ba838";
|
||||
} else if (lastExam && now < new Date(lastExam.end).getTime() + 60000) {
|
||||
const timeSinceEnd = (now.getTime() - new Date(lastExam.end).getTime()) / 1000;
|
||||
currentSubjectElem.textContent = `上场科目: ${lastExam.name}`;
|
||||
examTimingElem.textContent = "";
|
||||
remainingTimeElem.textContent = ``;
|
||||
statusElem.textContent = "状态: 已结束";
|
||||
statusElem.style.color = "red";
|
||||
} else if (nextExam) {
|
||||
const timeUntilStart = ((new Date(nextExam.start).getTime() - now.getTime()) / 1000) + 1;
|
||||
const remainingHours = Math.floor(timeUntilStart / 3600);
|
||||
const remainingMinutes = Math.floor((timeUntilStart % 3600) / 60);
|
||||
const remainingSeconds = Math.floor(timeUntilStart % 60);
|
||||
const remainingTimeText = `${remainingHours}时 ${remainingMinutes}分 ${remainingSeconds}秒`;
|
||||
|
||||
if (timeUntilStart <= 15 * 60) {
|
||||
currentSubjectElem.textContent = `即将开始: ${nextExam.name}`;
|
||||
remainingTimeElem.textContent = `倒计时: ${remainingTimeText}`;
|
||||
remainingTimeElem.style.color = "orange";
|
||||
remainingTimeElem.style.fontWeight = "bold";
|
||||
statusElem.textContent = "状态: 即将开始";
|
||||
statusElem.style.color = "#DBA014";
|
||||
} else {
|
||||
currentSubjectElem.textContent = `下一场科目: ${nextExam.name}`;
|
||||
currentSubjectElem.textContent = "考试均已结束";
|
||||
examTimingElem.textContent = "";
|
||||
remainingTimeElem.textContent = "";
|
||||
statusElem.textContent = "状态: 未开始";
|
||||
remainingTimeElem.style.fontWeight = "normal";
|
||||
statusElem.style.color = "#EAEE5B";
|
||||
statusElem.textContent = "状态: 空闲";
|
||||
statusElem.style.color = "#3946AF";
|
||||
}
|
||||
|
||||
examTimingElem.textContent = `起止时间: ${formatTimeWithoutSeconds(new Date(nextExam.start).toLocaleTimeString('zh-CN', { hour12: false }))} - ${formatTimeWithoutSeconds(new Date(nextExam.end).toLocaleTimeString('zh-CN', { hour12: false }))}`;
|
||||
} else {
|
||||
currentSubjectElem.textContent = "考试均已结束";
|
||||
examTimingElem.textContent = "";
|
||||
remainingTimeElem.textContent = "";
|
||||
statusElem.textContent = "状态: 空闲";
|
||||
statusElem.style.color = "#3946AF";
|
||||
examTableBodyElem.innerHTML = "";
|
||||
data.examInfos.forEach(exam => {
|
||||
const start = new Date(exam.start);
|
||||
const end = new Date(exam.end);
|
||||
let status = "";
|
||||
if (now < start) {
|
||||
status = "即将开始";
|
||||
} else if (now > end) {
|
||||
status = "已结束";
|
||||
} else {
|
||||
status = "进行中";
|
||||
}
|
||||
|
||||
const row = document.createElement("tr");
|
||||
row.className = `exam-status-${status}`;
|
||||
row.innerHTML = `
|
||||
<td>${exam.name}</td>
|
||||
<td>${formatTimeWithoutSeconds(new Date(exam.start).toLocaleTimeString('zh-CN', { hour12: false }))}</td>
|
||||
<td>${formatTimeWithoutSeconds(new Date(exam.end).toLocaleTimeString('zh-CN', { hour12: false }))}</td>
|
||||
`;
|
||||
examTableBodyElem.appendChild(row);
|
||||
});
|
||||
} catch (e) {
|
||||
errorSystem.show('更新考试信息失败: ' + e.message);
|
||||
}
|
||||
|
||||
examTableBodyElem.innerHTML = "";
|
||||
data.examInfos.forEach(exam => {
|
||||
const start = new Date(exam.start);
|
||||
const end = new Date(exam.end);
|
||||
let status = "";
|
||||
if (now < start) {
|
||||
status = "即将开始";
|
||||
} else if (now > end) {
|
||||
status = "已结束";
|
||||
} else {
|
||||
status = "进行中";
|
||||
}
|
||||
|
||||
const row = document.createElement("tr");
|
||||
row.className = `exam-status-${status}`;
|
||||
row.innerHTML = `
|
||||
<td>${exam.name}</td>
|
||||
<td>${formatTimeWithoutSeconds(new Date(exam.start).toLocaleTimeString('zh-CN', { hour12: false }))}</td>
|
||||
<td>${formatTimeWithoutSeconds(new Date(exam.end).toLocaleTimeString('zh-CN', { hour12: false }))}</td>
|
||||
`;
|
||||
examTableBodyElem.appendChild(row);
|
||||
});
|
||||
}
|
||||
|
||||
fetchData();
|
||||
|
||||
@ -2,12 +2,16 @@ document.addEventListener("DOMContentLoaded", () => {
|
||||
const fullscreenBtn = document.getElementById("fullscreen-btn");
|
||||
|
||||
fullscreenBtn.addEventListener("click", () => {
|
||||
if (!document.fullscreenElement) {
|
||||
document.documentElement.requestFullscreen();
|
||||
} else {
|
||||
if (document.exitFullscreen) {
|
||||
document.exitFullscreen();
|
||||
try {
|
||||
if (!document.fullscreenElement) {
|
||||
document.documentElement.requestFullscreen();
|
||||
} else {
|
||||
if (document.exitFullscreen) {
|
||||
document.exitFullscreen();
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
errorSystem.show('全屏切换失败: ' + e.message);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
@ -16,37 +16,53 @@ document.addEventListener("DOMContentLoaded", () => {
|
||||
roomElem.textContent = room;
|
||||
|
||||
settingsBtn.addEventListener("click", () => {
|
||||
offsetTimeInput.value = offsetTime;
|
||||
roomInput.value = room;
|
||||
zoomInput.value = zoomLevel;
|
||||
settingsModal.style.display = "block";
|
||||
try {
|
||||
offsetTimeInput.value = offsetTime;
|
||||
roomInput.value = room;
|
||||
zoomInput.value = zoomLevel;
|
||||
settingsModal.style.display = "block";
|
||||
} catch (e) {
|
||||
errorSystem.show('打开设置失败: ' + e.message);
|
||||
}
|
||||
});
|
||||
|
||||
closeSettingsBtn.addEventListener("click", () => {
|
||||
settingsModal.classList.add("fade-out");
|
||||
setTimeout(() => {
|
||||
settingsModal.style.display = "none";
|
||||
settingsModal.classList.remove("fade-out");
|
||||
}, 300);
|
||||
try {
|
||||
settingsModal.classList.add("fade-out");
|
||||
setTimeout(() => {
|
||||
settingsModal.style.display = "none";
|
||||
settingsModal.classList.remove("fade-out");
|
||||
}, 300);
|
||||
} catch (e) {
|
||||
errorSystem.show('关闭设置失败: ' + e.message);
|
||||
}
|
||||
});
|
||||
|
||||
saveSettingsBtn.addEventListener("click", () => {
|
||||
offsetTime = parseInt(offsetTimeInput.value);
|
||||
room = roomInput.value;
|
||||
zoomLevel = parseFloat(zoomInput.value);
|
||||
setCookie("offsetTime", offsetTime, 365);
|
||||
setCookie("room", room, 365);
|
||||
setCookie("zoomLevel", zoomLevel, 365);
|
||||
roomElem.textContent = room;
|
||||
document.body.style.zoom = zoomLevel;
|
||||
settingsModal.classList.add("fade-out");
|
||||
setTimeout(() => {
|
||||
settingsModal.style.display = "none";
|
||||
settingsModal.classList.remove("fade-out");
|
||||
}, 300);
|
||||
// 立即生效时间偏移
|
||||
location.reload();
|
||||
try {
|
||||
offsetTime = parseInt(offsetTimeInput.value);
|
||||
room = roomInput.value;
|
||||
zoomLevel = parseFloat(zoomInput.value);
|
||||
setCookie("offsetTime", offsetTime, 365);
|
||||
setCookie("room", room, 365);
|
||||
setCookie("zoomLevel", zoomLevel, 365);
|
||||
roomElem.textContent = room;
|
||||
document.body.style.zoom = zoomLevel;
|
||||
settingsModal.classList.add("fade-out");
|
||||
setTimeout(() => {
|
||||
settingsModal.style.display = "none";
|
||||
settingsModal.classList.remove("fade-out");
|
||||
}, 300);
|
||||
// 立即生效时间偏移
|
||||
location.reload();
|
||||
} catch (e) {
|
||||
errorSystem.show('保存设置失败: ' + e.message);
|
||||
}
|
||||
});
|
||||
|
||||
document.body.style.zoom = zoomLevel;
|
||||
try {
|
||||
document.body.style.zoom = zoomLevel;
|
||||
} catch (e) {
|
||||
errorSystem.show('初始化缩放失败: ' + e.message);
|
||||
}
|
||||
});
|
||||
|
||||
@ -19,3 +19,21 @@ function getCookie(name) {
|
||||
function formatTimeWithoutSeconds(time) {
|
||||
return time.slice(0, -3);
|
||||
}
|
||||
|
||||
const errorSystem = {
|
||||
show: function(message) {
|
||||
try {
|
||||
const container = document.querySelector('.error-container');
|
||||
const content = document.getElementById('errorMessage');
|
||||
content.textContent = message;
|
||||
container.style.display = 'flex';
|
||||
setTimeout(this.hide, 5000);
|
||||
} catch(e) {
|
||||
console.error('错误提示系统异常:', e);
|
||||
}
|
||||
},
|
||||
hide: function() {
|
||||
const container = document.querySelector('.error-container');
|
||||
if (container) container.style.display = 'none';
|
||||
}
|
||||
};
|
||||
|
||||
@ -290,3 +290,43 @@ td:last-child {
|
||||
#close-settings-btn:hover {
|
||||
background-color: #c9302c;
|
||||
}
|
||||
|
||||
.error-container {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: #ff6b6b;
|
||||
color: white;
|
||||
padding: 16px;
|
||||
display: none;
|
||||
z-index: 10001;
|
||||
animation: slideUp 0.3s ease;
|
||||
}
|
||||
|
||||
@keyframes slideUp {
|
||||
from { transform: translateY(100%); }
|
||||
to { transform: translateY(0); }
|
||||
}
|
||||
|
||||
.error-content {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
font-size: 15px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.error-content:before {
|
||||
content: '!';
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background: white;
|
||||
color: #ff6b6b;
|
||||
border-radius: 50%;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
@ -8,6 +8,9 @@
|
||||
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<div class="error-container">
|
||||
<div class="error-content" id="errorMessage"></div>
|
||||
</div>
|
||||
<button id="settings-btn">设置</button>
|
||||
<button id="fullscreen-btn">全屏</button>
|
||||
<div class="container">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user