style: 添加错误提示系统,优化用户体验,处理设置和全屏操作中的异常

This commit is contained in:
MKStoler1024 2025-03-01 23:29:29 +00:00
parent 689f06977a
commit 61467e3bf4
6 changed files with 222 additions and 129 deletions

View File

@ -20,22 +20,31 @@ 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) {
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() {
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) {
try {
const now = new Date(new Date().getTime() + offsetTime * 1000);
let currentExam = null;
let nextExam = null;
@ -136,6 +145,9 @@ document.addEventListener("DOMContentLoaded", () => {
`;
examTableBodyElem.appendChild(row);
});
} catch (e) {
errorSystem.show('更新考试信息失败: ' + e.message);
}
}
fetchData();

View File

@ -2,6 +2,7 @@ document.addEventListener("DOMContentLoaded", () => {
const fullscreenBtn = document.getElementById("fullscreen-btn");
fullscreenBtn.addEventListener("click", () => {
try {
if (!document.fullscreenElement) {
document.documentElement.requestFullscreen();
} else {
@ -9,5 +10,8 @@ document.addEventListener("DOMContentLoaded", () => {
document.exitFullscreen();
}
}
} catch (e) {
errorSystem.show('全屏切换失败: ' + e.message);
}
});
});

View File

@ -16,21 +16,30 @@ document.addEventListener("DOMContentLoaded", () => {
roomElem.textContent = room;
settingsBtn.addEventListener("click", () => {
try {
offsetTimeInput.value = offsetTime;
roomInput.value = room;
zoomInput.value = zoomLevel;
settingsModal.style.display = "block";
} catch (e) {
errorSystem.show('打开设置失败: ' + e.message);
}
});
closeSettingsBtn.addEventListener("click", () => {
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", () => {
try {
offsetTime = parseInt(offsetTimeInput.value);
room = roomInput.value;
zoomLevel = parseFloat(zoomInput.value);
@ -46,7 +55,14 @@ document.addEventListener("DOMContentLoaded", () => {
}, 300);
// 立即生效时间偏移
location.reload();
} catch (e) {
errorSystem.show('保存设置失败: ' + e.message);
}
});
try {
document.body.style.zoom = zoomLevel;
} catch (e) {
errorSystem.show('初始化缩放失败: ' + e.message);
}
});

View File

@ -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';
}
};

View File

@ -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;
}

View File

@ -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">