mirror of
https://github.com/ExamAware/ExamSchedule.git
synced 2025-04-29 19:16:33 +00:00
style: 优化设置模态框样式，调整按钮布局和背景效果，更新字体和颜色
This commit is contained in:
MKStoler1024
parent
caf43c2deb
commit
d3122a47ff
@ -46,15 +46,18 @@
|
|||||||
</div>
|
</div>
|
||||||
<!-- Settings Modal -->
|
<!-- Settings Modal -->
|
||||||
<div id="settings-modal">
|
<div id="settings-modal">
|
||||||
<div id="settings-modal-content">
|
<div id="settings-modal-content" class="settings-panel dark-theme">
|
||||||
|
<h3>系统设置</h3>
|
||||||
<label for="offset-time">偏移时间（秒）:</label>
|
<label for="offset-time">偏移时间（秒）:</label>
|
||||||
<input type="number" id="offset-time" name="offset-time" value="0">
|
<input type="number" id="offset-time" name="offset-time" value="0">
|
||||||
<label for="room-input">考场号:</label>
|
<label for="room-input">考场号:</label>
|
||||||
<input type="text" id="room-input" name="room-input" value="">
|
<input type="text" id="room-input" name="room-input" value="">
|
||||||
<label for="zoom-input">页面缩放倍数:</label>
|
<label for="zoom-input">页面缩放倍数:</label>
|
||||||
<input type="number" id="zoom-input" step="0.1" min="0.5" max="2">
|
<input type="number" id="zoom-input" step="0.1" min="0.5" max="2">
|
||||||
<button id="save-settings-btn">确定</button>
|
<div class="button-group">
|
||||||
<button id="close-settings-btn">关闭</button>
|
<button id="save-settings-btn" class="control-btn">确定</button>
|
||||||
|
<button id="close-settings-btn" class="control-btn">关闭</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<script src="script.js"></script>
|
<script src="script.js"></script>
|
||||||
|
|||||||
@ -192,31 +192,47 @@ td:last-child {
|
|||||||
}
|
}
|
||||||
|
|
||||||
#settings-modal-content {
|
#settings-modal-content {
|
||||||
background-color: #1f1f1f;
|
background: rgba(31, 31, 31, 0.95);
|
||||||
margin: 5% auto;
|
padding: 25px;
|
||||||
padding: 20px;
|
margin: 25px auto;
|
||||||
border: 1px solid #888;
|
border-radius: 12px;
|
||||||
width: 80%;
|
border: 1px solid #444;
|
||||||
|
backdrop-filter: blur(8px);
|
||||||
max-width: 600px;
|
max-width: 600px;
|
||||||
border-radius: 10px;
|
animation: fadeIn 0.5s ease;
|
||||||
backdrop-filter: blur(10px);
|
}
|
||||||
|
|
||||||
|
@keyframes fadeIn {
|
||||||
|
from { opacity: 0; transform: translateY(-20px); }
|
||||||
|
to { opacity: 1; transform: translateY(0); }
|
||||||
|
}
|
||||||
|
|
||||||
|
#settings-modal-content h3 {
|
||||||
|
margin: 0 0 20px;
|
||||||
|
color: #e0e0e0;
|
||||||
|
font-size: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#settings-modal-content label {
|
#settings-modal-content label {
|
||||||
font-size: 2rem;
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
margin: 12px 0;
|
||||||
|
font-size: 16px;
|
||||||
|
color: #b0b0b0;
|
||||||
}
|
}
|
||||||
|
|
||||||
#settings-modal-content input[type="number"],
|
#settings-modal-content input[type="number"],
|
||||||
#settings-modal-content input[type="text"] {
|
#settings-modal-content input[type="text"] {
|
||||||
font-size: 2rem;
|
font-size: 1.5rem;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
border: 1px solid #ccc;
|
border: 1px solid #555;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
background-color: #121212;
|
background-color: #222;
|
||||||
color: #e0e0e0;
|
color: #e0e0e0;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -226,20 +242,28 @@ td:last-child {
|
|||||||
box-shadow: 0 0 0 1px #007acc;
|
box-shadow: 0 0 0 1px #007acc;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.button-group {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
#settings-modal-content button {
|
#settings-modal-content button {
|
||||||
padding: 10px 20px;
|
background: linear-gradient(135deg, #3498db, #2980b9);
|
||||||
font-size: 2rem;
|
|
||||||
cursor: pointer;
|
|
||||||
background-color: #93b4f7;
|
|
||||||
color: white;
|
color: white;
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: 5px;
|
padding: 12px 24px;
|
||||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
|
border-radius: 8px;
|
||||||
transition: background-color 0.3s ease;
|
cursor: pointer;
|
||||||
|
font-size: 15px;
|
||||||
|
font-weight: 500;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
box-shadow: 0 4px 12px rgba(52,152,219,0.25);
|
||||||
}
|
}
|
||||||
|
|
||||||
#settings-modal-content button:hover {
|
#settings-modal-content button:hover {
|
||||||
background-color: #45a049;
|
transform: translateY(-1px);
|
||||||
|
box-shadow: 0 6px 16px rgba(52,152,219,0.35);
|
||||||
}
|
}
|
||||||
|
|
||||||
#close-settings-btn {
|
#close-settings-btn {
|
||||||
|
|||||||
596
exam/x.html
Normal file
596
exam/x.html
Normal file
@ -0,0 +1,596 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>课程状态系统完整版</title>
|
||||||
|
<style>
|
||||||
|
/* 基础样式 */
|
||||||
|
body {
|
||||||
|
font-family: 'Segoe UI', Arial, sans-serif;
|
||||||
|
margin: 0;
|
||||||
|
padding: 20px;
|
||||||
|
background: #f5f7fa;
|
||||||
|
color: #2d3436;
|
||||||
|
}
|
||||||
|
.container {
|
||||||
|
max-width: 800px;
|
||||||
|
margin: 0 auto;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 状态显示框 */
|
||||||
|
.status-box {
|
||||||
|
background: linear-gradient(145deg, #ffffff, #f8f9fa);
|
||||||
|
border: 1px solid #e0e6ed;
|
||||||
|
padding: 30px;
|
||||||
|
margin: 20px 0;
|
||||||
|
border-radius: 16px;
|
||||||
|
box-shadow: 0 8px 24px rgba(0,0,0,0.06);
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
.time-display {
|
||||||
|
font-size: 48px;
|
||||||
|
color: #2c3e50;
|
||||||
|
font-weight: 700;
|
||||||
|
margin: 15px 0;
|
||||||
|
text-align: center;
|
||||||
|
letter-spacing: 2px;
|
||||||
|
text-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||||
|
}
|
||||||
|
.status-label {
|
||||||
|
font-size: 28px;
|
||||||
|
text-align: center;
|
||||||
|
margin: 15px 0;
|
||||||
|
color: #57606f;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 课程表格 */
|
||||||
|
.schedule-table {
|
||||||
|
width: 100%;
|
||||||
|
border-collapse: collapse;
|
||||||
|
margin: 25px 0;
|
||||||
|
background: white;
|
||||||
|
border-radius: 12px;
|
||||||
|
overflow: hidden;
|
||||||
|
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
|
||||||
|
}
|
||||||
|
.schedule-table th {
|
||||||
|
background: #f8f9fa;
|
||||||
|
padding: 16px;
|
||||||
|
color: #57606f;
|
||||||
|
font-weight: 600;
|
||||||
|
border-bottom: 2px solid #e0e6ed;
|
||||||
|
}
|
||||||
|
.schedule-table td {
|
||||||
|
padding: 14px;
|
||||||
|
border-bottom: 1px solid #f1f3f6;
|
||||||
|
}
|
||||||
|
.current-class {
|
||||||
|
background: #e8f5e9 !important;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.current-class:after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
height: 100%;
|
||||||
|
width: 4px;
|
||||||
|
background: #2ecc71;
|
||||||
|
}
|
||||||
|
.future-class {
|
||||||
|
background: #f8f9fa !important;
|
||||||
|
}
|
||||||
|
.past-class {
|
||||||
|
background: #fafafa !important;
|
||||||
|
color: #a4b0be;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 全屏模式 */
|
||||||
|
.fullscreen-mode {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: #ffffff;
|
||||||
|
z-index: 9999;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.fullscreen-mode .status-box {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
border: none;
|
||||||
|
box-shadow: none;
|
||||||
|
border-radius: 0;
|
||||||
|
padding: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
background: none;
|
||||||
|
}
|
||||||
|
.fullscreen-mode .time-display {
|
||||||
|
font-size: 25vw;
|
||||||
|
line-height: 0.9;
|
||||||
|
color: #2c3e50;
|
||||||
|
}
|
||||||
|
.fullscreen-mode .status-label {
|
||||||
|
font-size: 6vw;
|
||||||
|
margin-top: 4vw;
|
||||||
|
color: #57606f;
|
||||||
|
}
|
||||||
|
.fullscreen-mode .control-bar,
|
||||||
|
.fullscreen-mode .settings-panel,
|
||||||
|
.fullscreen-mode .schedule-table {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 控制按钮 */
|
||||||
|
.control-bar {
|
||||||
|
position: fixed;
|
||||||
|
top: 20px;
|
||||||
|
right: 20px;
|
||||||
|
z-index: 10000;
|
||||||
|
display: flex;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
.control-btn {
|
||||||
|
background: linear-gradient(135deg, #3498db, #2980b9);
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
padding: 12px 24px;
|
||||||
|
border-radius: 8px;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 15px;
|
||||||
|
font-weight: 500;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
box-shadow: 0 4px 12px rgba(52,152,219,0.25);
|
||||||
|
}
|
||||||
|
.control-btn:hover {
|
||||||
|
transform: translateY(-1px);
|
||||||
|
box-shadow: 0 6px 16px rgba(52,152,219,0.35);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 设置面板 */
|
||||||
|
.settings-panel {
|
||||||
|
background: rgba(255,255,255,0.95);
|
||||||
|
padding: 25px;
|
||||||
|
margin: 25px 0;
|
||||||
|
border-radius: 12px;
|
||||||
|
border: 1px solid #e0e6ed;
|
||||||
|
backdrop-filter: blur(8px);
|
||||||
|
}
|
||||||
|
.settings-panel h3 {
|
||||||
|
margin: 0 0 20px;
|
||||||
|
color: #2c3e50;
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
.settings-panel label {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
margin: 12px 0;
|
||||||
|
font-size: 16px;
|
||||||
|
color: #57606f;
|
||||||
|
}
|
||||||
|
.settings-panel input[type="checkbox"] {
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
accent-color: #3498db;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 错误提示 */
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="error-container">
|
||||||
|
<div class="error-content" id="errorMessage"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
<div class="control-bar">
|
||||||
|
<button class="control-btn" onclick="toggleFullscreen()">全屏</button>
|
||||||
|
<button class="control-btn" onclick="testSound('classStart')">测试上课铃</button>
|
||||||
|
<button class="control-btn" onclick="testSound('classEnd')">测试下课铃</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="status-box">
|
||||||
|
<div class="status-label" id="statusLabel">正在初始化...</div>
|
||||||
|
<div class="time-display" id="timeDisplay">--:--</div>
|
||||||
|
<div id="timeDescription" style="text-align:center;color:#a4b0be;"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="settings-panel">
|
||||||
|
<h3>系统设置</h3>
|
||||||
|
<label>
|
||||||
|
<input type="checkbox" id="classBell"> 启用上课铃声
|
||||||
|
</label>
|
||||||
|
<br>
|
||||||
|
<label>
|
||||||
|
<input type="checkbox" id="breakBell"> 启用下课铃声
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<table class="schedule-table" id="scheduleTable">
|
||||||
|
<tr>
|
||||||
|
<th>课程名称</th>
|
||||||
|
<th>时间段</th>
|
||||||
|
<th>状态</th>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// 错误处理系统
|
||||||
|
var errorSystem = {
|
||||||
|
show: function(message) {
|
||||||
|
try {
|
||||||
|
var container = document.querySelector('.error-container');
|
||||||
|
var content = document.getElementById('errorMessage');
|
||||||
|
content.textContent = message;
|
||||||
|
container.style.display = 'flex';
|
||||||
|
setTimeout(this.hide, 5000);
|
||||||
|
} catch(e) {
|
||||||
|
console.error('错误提示系统异常:', e);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
hide: function() {
|
||||||
|
var container = document.querySelector('.error-container');
|
||||||
|
if (container) container.style.display = 'none';
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 新增：课程配置数组
|
||||||
|
var courseSchedule = [
|
||||||
|
{ name: "第一节课", start: "08:00", end: "08:50" },
|
||||||
|
{ name: "第二节课", start: "09:00", end: "09:50" },
|
||||||
|
{ name: "第三节课", start: "10:10", end: "11:00" },
|
||||||
|
{ name: "第四节课", start: "11:10", end: "12:00" },
|
||||||
|
{ name: "第一节课", start: "13:30", end: "14:20" },
|
||||||
|
{ name: "第二节课", start: "14:30", end: "15:20" },
|
||||||
|
{ name: "第三节课", start: "15:40", end: "16:30" },
|
||||||
|
{ name: "第四节课", start: "16:40", end: "17:30" },
|
||||||
|
{ name: "第一节课", start: "18:00", end: "18:50" },
|
||||||
|
{ name: "第二节课", start: "19:00", end: "19:50" },
|
||||||
|
{ name: "第三节课", start: "20:10", end: "21:00" },
|
||||||
|
{ name: "第四节课", start: "21:10", end: "22:00" }
|
||||||
|
];
|
||||||
|
|
||||||
|
// 恢复使用原来的音频系统
|
||||||
|
var audioController = (function() {
|
||||||
|
var audioPool = [];
|
||||||
|
var maxPoolSize = 3;
|
||||||
|
var soundFiles = {
|
||||||
|
classStart: 'class_start.mp3',
|
||||||
|
classEnd: 'class_end.mp3'
|
||||||
|
};
|
||||||
|
|
||||||
|
function init() {
|
||||||
|
try {
|
||||||
|
Object.keys(soundFiles).forEach(function(type) {
|
||||||
|
for (var i = 0; i < 2; i++) {
|
||||||
|
createAudio(type);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
} catch(e) {
|
||||||
|
errorSystem.show('音频初始化失败: ' + e.message);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function createAudio(type) {
|
||||||
|
var audio = document.createElement('audio');
|
||||||
|
audio.style.display = 'none';
|
||||||
|
audio.preload = 'auto';
|
||||||
|
audio.src = soundFiles[type];
|
||||||
|
var retryCount = 0;
|
||||||
|
function loadAudio() {
|
||||||
|
try {
|
||||||
|
audio.load();
|
||||||
|
} catch(e) {
|
||||||
|
if (retryCount++ < 3) {
|
||||||
|
setTimeout(loadAudio, 1000);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
audio.addEventListener('error', function() {
|
||||||
|
if (retryCount++ < 3) {
|
||||||
|
setTimeout(loadAudio, 1000);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
document.body.appendChild(audio);
|
||||||
|
loadAudio();
|
||||||
|
audioPool.push(audio);
|
||||||
|
return audio;
|
||||||
|
}
|
||||||
|
|
||||||
|
function play(type) {
|
||||||
|
try {
|
||||||
|
var audio = audioPool.find(function(a) { return a.paused; });
|
||||||
|
if (!audio) {
|
||||||
|
if (audioPool.length < maxPoolSize) {
|
||||||
|
audio = createAudio(type);
|
||||||
|
} else {
|
||||||
|
return errorSystem.show('系统繁忙，请稍后再试');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
audio.src = soundFiles[type];
|
||||||
|
try {
|
||||||
|
audio.play();
|
||||||
|
} catch(e) {
|
||||||
|
errorSystem.show('播放失败: ' + e.message);
|
||||||
|
}
|
||||||
|
} catch(e) {
|
||||||
|
errorSystem.show('音频系统错误: ' + e.message);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
init: init,
|
||||||
|
play: play
|
||||||
|
};
|
||||||
|
})();
|
||||||
|
|
||||||
|
audioController.init();
|
||||||
|
|
||||||
|
// 全局状态变量
|
||||||
|
var isFullscreen = false, currentCourse = null, lastCourse = null, timer = null, lastUpdate = Date.now();
|
||||||
|
|
||||||
|
// 新增：安全更新循环函数
|
||||||
|
function safeUpdate() {
|
||||||
|
try {
|
||||||
|
var now = Date.now();
|
||||||
|
updateCourseStatus();
|
||||||
|
updateDisplay();
|
||||||
|
var nextTick = Math.max(1000 - (Date.now() - now), 50);
|
||||||
|
timer = setTimeout(safeUpdate, nextTick);
|
||||||
|
lastUpdate = now;
|
||||||
|
} catch (e) {
|
||||||
|
errorSystem.show('更新循环错误: ' + e.message);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 新增：解析时间字符串
|
||||||
|
function parseTime(timeStr) {
|
||||||
|
try {
|
||||||
|
var now = new Date();
|
||||||
|
var parts = timeStr.split(':');
|
||||||
|
return new Date(
|
||||||
|
now.getFullYear(),
|
||||||
|
now.getMonth(),
|
||||||
|
now.getDate(),
|
||||||
|
parseInt(parts[0]),
|
||||||
|
parseInt(parts[1]),
|
||||||
|
0
|
||||||
|
);
|
||||||
|
} catch (e) {
|
||||||
|
errorSystem.show('时间解析错误: ' + e.message);
|
||||||
|
return new Date();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 新增：更新当前课程状态函数
|
||||||
|
function updateCourseStatus() {
|
||||||
|
try {
|
||||||
|
var now = new Date();
|
||||||
|
currentCourse = null;
|
||||||
|
for (var i = 0; i < courseSchedule.length; i++) {
|
||||||
|
var course = courseSchedule[i],
|
||||||
|
start = parseTime(course.start),
|
||||||
|
end = parseTime(course.end);
|
||||||
|
if (end < start) end.setDate(end.getDate() + 1);
|
||||||
|
if (now >= start && now <= end) {
|
||||||
|
currentCourse = course;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (currentCourse !== lastCourse) {
|
||||||
|
handleStatusChange();
|
||||||
|
lastCourse = currentCourse;
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
errorSystem.show('课程状态更新失败: ' + e.message);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 在状态变化处理函数中使用 audioController 而非 audioContext
|
||||||
|
function handleStatusChange() {
|
||||||
|
try {
|
||||||
|
if (!currentCourse && localStorage.breakBell === 'true') {
|
||||||
|
audioController.play('classEnd');
|
||||||
|
} else if (currentCourse && localStorage.classBell === 'true') {
|
||||||
|
audioController.play('classStart');
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
errorSystem.show('状态变化处理错误: ' + e.message);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 新增：界面更新函数
|
||||||
|
function updateDisplay() {
|
||||||
|
try {
|
||||||
|
var now = new Date(),
|
||||||
|
timeDisplay = document.getElementById('timeDisplay'),
|
||||||
|
statusLabel = document.getElementById('statusLabel'),
|
||||||
|
timeDesc = document.getElementById('timeDescription');
|
||||||
|
if (currentCourse) {
|
||||||
|
var endTime = parseTime(currentCourse.end),
|
||||||
|
remain = endTime - now;
|
||||||
|
statusLabel.textContent = currentCourse.name + ' 进行中';
|
||||||
|
timeDisplay.textContent = formatTime(remain);
|
||||||
|
timeDesc.textContent = '剩余时间';
|
||||||
|
} else {
|
||||||
|
statusLabel.textContent = '课间休息中';
|
||||||
|
var nextCourse = getNextCourse();
|
||||||
|
if (nextCourse) {
|
||||||
|
var startTime = parseTime(nextCourse.start),
|
||||||
|
remain = startTime - now;
|
||||||
|
timeDisplay.textContent = formatTime(remain);
|
||||||
|
timeDesc.textContent = '距离 ' + nextCourse.name;
|
||||||
|
} else {
|
||||||
|
timeDisplay.textContent = '00:00';
|
||||||
|
timeDesc.textContent = '今日课程已结束';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
updateScheduleTable();
|
||||||
|
} catch (e) {
|
||||||
|
errorSystem.show('界面更新失败: ' + e.message);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 新增：格式化时间显示函数
|
||||||
|
function formatTime(ms) {
|
||||||
|
try {
|
||||||
|
if (ms < 0) return '00:00';
|
||||||
|
var totalSeconds = Math.floor(ms / 1000),
|
||||||
|
minutes = Math.floor(totalSeconds / 60),
|
||||||
|
seconds = totalSeconds % 60;
|
||||||
|
return (minutes < 10 ? '0' : '') + minutes + ':' + (seconds < 10 ? '0' : '') + seconds;
|
||||||
|
} catch (e) {
|
||||||
|
return '--:--';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 新增：更新课程表显示
|
||||||
|
function updateScheduleTable() {
|
||||||
|
try {
|
||||||
|
var now = new Date(),
|
||||||
|
rows = document.querySelectorAll('#scheduleTable tr:not(:first-child)');
|
||||||
|
for (var i = 0; i < rows.length; i++) {
|
||||||
|
var course = courseSchedule[i],
|
||||||
|
start = parseTime(course.start),
|
||||||
|
end = parseTime(course.end),
|
||||||
|
row = rows[i];
|
||||||
|
row.className = '';
|
||||||
|
if (now >= start && now <= end) {
|
||||||
|
row.className = 'current-class';
|
||||||
|
} else if (now < start) {
|
||||||
|
row.className = 'future-class';
|
||||||
|
} else {
|
||||||
|
row.className = 'past-class';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
errorSystem.show('课程表更新失败: ' + e.message);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 新增：获取下一节课
|
||||||
|
function getNextCourse() {
|
||||||
|
try {
|
||||||
|
var now = new Date();
|
||||||
|
for (var i = 0; i < courseSchedule.length; i++) {
|
||||||
|
var start = parseTime(courseSchedule[i].start);
|
||||||
|
if (start > now) return courseSchedule[i];
|
||||||
|
}
|
||||||
|
return null;
|
||||||
|
} catch (e) {
|
||||||
|
errorSystem.show('获取下一节课失败: ' + e.message);
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 修改：全屏切换函数
|
||||||
|
function toggleFullscreen() {
|
||||||
|
try {
|
||||||
|
isFullscreen = !isFullscreen;
|
||||||
|
document.body.classList.toggle('fullscreen-mode', isFullscreen);
|
||||||
|
if (isFullscreen) {
|
||||||
|
document.querySelector('.settings-panel').style.display = 'none';
|
||||||
|
document.querySelector('.schedule-table').style.display = 'none';
|
||||||
|
document.querySelector('.container').style.width = '100%';
|
||||||
|
document.querySelector('.container').style.height = '100%';
|
||||||
|
} else {
|
||||||
|
document.querySelector('.settings-panel').style.display = '';
|
||||||
|
document.querySelector('.schedule-table').style.display = '';
|
||||||
|
document.querySelector('.container').style.width = '';
|
||||||
|
document.querySelector('.container').style.height = '';
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
errorSystem.show('全屏切换失败: ' + e.message);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 测试铃声函数中调用音频播放改用 audioController
|
||||||
|
function testSound(type) {
|
||||||
|
try {
|
||||||
|
if (confirm('确定要测试' + (type === 'classStart' ? '上课' : '下课') + '铃声吗？')) {
|
||||||
|
audioController.play(type);
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
errorSystem.show('测试铃声失败: ' + e.message);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 修改：系统初始化函数
|
||||||
|
function init() {
|
||||||
|
try {
|
||||||
|
var table = document.getElementById('scheduleTable');
|
||||||
|
courseSchedule.forEach(function(course) {
|
||||||
|
var row = table.insertRow(-1);
|
||||||
|
row.innerHTML = '<td>' + course.name + '</td>' +
|
||||||
|
'<td>' + course.start + ' - ' + course.end + '</td>' +
|
||||||
|
'<td></td>';
|
||||||
|
});
|
||||||
|
// 初始化设置复选框
|
||||||
|
document.getElementById('classBell').checked = localStorage.classBell === 'true';
|
||||||
|
document.getElementById('breakBell').checked = localStorage.breakBell === 'true';
|
||||||
|
document.getElementById('classBell').onchange = function () {
|
||||||
|
localStorage.classBell = this.checked;
|
||||||
|
};
|
||||||
|
document.getElementById('breakBell').onchange = function () {
|
||||||
|
localStorage.breakBell = this.checked;
|
||||||
|
};
|
||||||
|
// 启动安全更新循环
|
||||||
|
safeUpdate();
|
||||||
|
// 移除或修改音频权限激活代码（用原音频系统无需特殊激活）
|
||||||
|
document.body.onclick = null;
|
||||||
|
} catch (e) {
|
||||||
|
errorSystem.show('系统初始化失败: ' + e.message);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
window.onbeforeunload = function () {
|
||||||
|
if (timer) clearTimeout(timer);
|
||||||
|
};
|
||||||
|
init();
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -31,48 +31,61 @@
|
|||||||
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">
|
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">
|
||||||
<link href="https://fonts.googleapis.com/css?family=DM+Sans|Inter|Space+Mono|Work+Sans|Libre+Franklin&display=swap" rel="stylesheet">
|
<link href="https://fonts.googleapis.com/css?family=DM+Sans|Inter|Space+Mono|Work+Sans|Libre+Franklin&display=swap" rel="stylesheet">
|
||||||
<style>
|
<style>
|
||||||
|
/* 基础样式 */
|
||||||
body {
|
body {
|
||||||
|
font-family: 'Segoe UI', Arial, sans-serif;
|
||||||
|
margin: 0;
|
||||||
|
padding: 20px;
|
||||||
background: url('../background.jpg') no-repeat center center fixed;
|
background: url('../background.jpg') no-repeat center center fixed;
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
margin: 0;
|
color: #2d3436;
|
||||||
padding: 0;
|
|
||||||
font-family: 'Roboto', sans-serif;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
color: #fff;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
background: rgba(255, 255, 255, 0.8);
|
||||||
|
border: 1px solid #e0e6ed;
|
||||||
|
padding: 30px;
|
||||||
|
border-radius: 16px;
|
||||||
|
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
|
||||||
animation: fadeIn 2s ease-in-out;
|
animation: fadeIn 2s ease-in-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
.time {
|
.time {
|
||||||
font-size: 10rem;
|
font-size: 10rem;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
color: #2c3e50;
|
||||||
|
font-weight: 700;
|
||||||
|
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||||
animation: glow 1s ease-in-out infinite alternate;
|
animation: glow 1s ease-in-out infinite alternate;
|
||||||
}
|
}
|
||||||
|
|
||||||
.text {
|
.text {
|
||||||
font-size: 1.5rem;
|
font-size: 1.5rem;
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
|
color: #57606f;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn {
|
.btn {
|
||||||
padding: 10px 25px;
|
padding: 10px 25px;
|
||||||
margin: 10px;
|
margin: 10px;
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: 5px;
|
border-radius: 8px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: all 0.3s ease;
|
transition: all 0.3s ease;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
|
background: linear-gradient(135deg, #3498db, #2980b9);
|
||||||
|
color: white;
|
||||||
|
box-shadow: 0 4px 12px rgba(52, 152, 219, 0.25);
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn:hover {
|
.btn:hover {
|
||||||
transform: translateY(-3px);
|
transform: translateY(-1px);
|
||||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
box-shadow: 0 6px 16px rgba(52, 152, 219, 0.35);
|
||||||
}
|
}
|
||||||
|
|
||||||
.controls {
|
.controls {
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user