-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
436 lines (398 loc) · 25.3 KB
/
Copy pathindex.html
File metadata and controls
436 lines (398 loc) · 25.3 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
<!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>
:root {
--bg: #0b0b14;
--time-color: #f0f0f5;
--date-color: #b8b8c8;
--label-color: #6b6b80;
--colon-color: #8888a0;
--btn-bg: rgba(255, 255, 255, 0.06);
--btn-hover-bg: rgba(255, 255, 255, 0.14);
--btn-text: #8888a0;
--btn-hover-text: #c0c0d0;
--divider: rgba(255, 255, 255, 0.08);
--reminder-color: #7a7a8c;
--card-bg: rgba(255, 255, 255, 0.04);
--card-border: rgba(255, 255, 255, 0.08);
--card-text: #c8c8d4;
}
* { margin:0; padding:0; box-sizing:border-box; }
html, body { width:100%; height:100%; overflow:hidden; background:var(--bg); font-family:'PingFang SC','Microsoft YaHei',sans-serif; -webkit-font-smoothing:antialiased; user-select:none; cursor:default; }
.top-reminder { position:fixed; top:clamp(12px,2.5vh,28px); left:50%; transform:translateX(-50%); font-size:clamp(0.9rem,2.2vw,1.4rem); color:var(--reminder-color); letter-spacing:0.06em; text-align:center; white-space:nowrap; opacity:0.75; transition:opacity 0.4s; z-index:5; pointer-events:none; }
body.fullscreen-mode .top-reminder { opacity:0.9; }
body.idle .top-reminder { opacity:0.65; transition:opacity 0.8s; }
.clock-container { display:flex; flex-direction:column; align-items:center; width:100%; height:100%; padding:2vh 4vw 0; }
.clock-display { position: relative; display:flex; flex-direction:column; align-items:center; margin-top:clamp(4vh,8vh,10vh); flex-shrink:0; }
.date-section { display:flex; align-items:center; gap:0.6em; margin-bottom:clamp(1.5vh,3vh,4vh); flex-wrap:wrap; }
.date-text { font-size:clamp(1.4rem,4vw,2.6rem); color:var(--date-color); letter-spacing:0.04em; white-space:nowrap; }
.weekday-text { font-size:clamp(1.4rem,4vw,2.6rem); color:#d0d0dc; letter-spacing:0.04em; white-space:nowrap; }
.date-divider { width:1px; height:clamp(1.2rem,3.5vw,2.2rem); background:var(--divider); border-radius:1px; margin:0 0.3em; }
.time-section { display:flex; align-items:center; gap:clamp(0.3em,1.5vw,0.8em); }
.time-digit { font-size:clamp(5rem,16vw,18rem); font-weight:700; color:var(--time-color); letter-spacing:-0.02em; line-height:1; font-variant-numeric:tabular-nums; text-shadow:0 0 80px rgba(255,255,255,0.06); }
.time-colon { font-size:clamp(4rem,14vw,16rem); font-weight:300; color:var(--colon-color); line-height:1; padding-bottom:clamp(0.3rem,1vh,1rem); animation:colonPulse 2s ease-in-out infinite; font-variant-numeric:tabular-nums; }
@keyframes colonPulse { 0%,100%{ opacity:0.55; } 50%{ opacity:0.9; } }
.info-section { margin-top:clamp(1vh,2vh,3vh); display:flex; align-items:center; gap:1em; }
.timezone-label, .period-label { font-size:clamp(0.9rem,2vw,1.4rem); color:var(--label-color); letter-spacing:0.08em; }
.info-dot { width:5px; height:5px; border-radius:50%; background:var(--label-color); opacity:0.5; }
.sync-row { display:flex; align-items:center; gap:0.6em; margin-top:0.5em; }
.sync-status { font-size:clamp(0.8rem,1.5vw,1rem); color:#8888a0; display:flex; align-items:center; gap:0.3em; opacity:0.8; }
.sync-btn { background:none; border:1px solid rgba(255,255,255,0.15); border-radius:16px; color:#aaa; padding:0.2em 0.8em; font-size:clamp(0.7rem,1.3vw,0.85rem); cursor:pointer; display:flex; align-items:center; gap:0.25em; transition:0.3s; background:rgba(255,255,255,0.04); }
.sync-btn:hover { color:#ddd; border-color:rgba(255,255,255,0.3); background:rgba(255,255,255,0.1); }
/* 随机抽取区域 */
.random-section { width:100%; max-width:1300px; margin-top:clamp(3vh,5vh,7vh); flex:1 1 auto; display:flex; flex-direction:column; }
.random-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(0.8em,1.5vw,1.5em); }
.random-card { background:var(--card-bg); border:1px solid var(--card-border); border-radius:1em; padding:clamp(0.8em,2vh,1.4em) clamp(0.6em,1.5vw,1em); text-align:center; display:flex; flex-direction:column; justify-content:center; transition:border-color 0.3s, background 0.3s; cursor:pointer; }
.random-card:hover { background:rgba(255,255,255,0.08); }
.random-name { font-size:clamp(1rem,2.2vw,1.8rem); font-weight:600; color:var(--card-text); letter-spacing:0.05em; margin-bottom:0.4em; white-space:nowrap; }
.random-result { font-size:clamp(0.9rem,1.8vw,1.4rem); color:#a8a8ba; letter-spacing:0.04em; transition: all 0.2s; }
.random-result.animating { color: #ffcc00; transform: scale(1.05); }
.random-result.final { color: #fff; font-weight: 600; animation: pop 0.4s ease-out; }
@keyframes pop { 0% { transform: scale(1.2); } 100% { transform: scale(1); } }
.fullscreen-btn {
position:fixed; bottom:clamp(16px,3vh,32px); right:clamp(16px,3vw,32px);
display:flex; align-items:center; gap:0.5em; padding:0.7em 1.3em;
background:var(--btn-bg); border:1px solid rgba(255,255,255,0.1); border-radius:2em;
color:var(--btn-text); font-size:clamp(0.8rem,1.5vw,1rem); cursor:pointer;
transition:0.3s; letter-spacing:0.05em; font-family:inherit; outline:none;
backdrop-filter:blur(10px); z-index:10;
}
.fullscreen-btn:hover { background:var(--btn-hover-bg); color:var(--btn-hover-text); border-color:rgba(255,255,255,0.25); transform:translateY(-1px); box-shadow:0 4px 20px rgba(0,0,0,0.3); }
.fullscreen-btn svg { width:clamp(14px,1.8vw,20px); height:clamp(14px,1.8vw,20px); flex-shrink:0; opacity:0.8; transition:opacity 0.3s; }
.fullscreen-btn:hover svg { opacity:1; }
body.fullscreen-mode .fullscreen-btn { opacity:0.4; background:rgba(255,255,255,0.03); border-color:rgba(255,255,255,0.06); }
body.fullscreen-mode .fullscreen-btn:hover { opacity:0.9; background:var(--btn-hover-bg); border-color:rgba(255,255,255,0.25); }
body.idle .fullscreen-btn { opacity:0.25; transition:opacity 0.8s; }
body.idle .fullscreen-btn:hover { opacity:0.9; }
/* 八连抽按钮 - 右上角 */
.eight-draw-btn {
position: absolute;
top: 15px;
right: 15px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border: none;
border-radius: 1.5em;
color: #fff;
padding: 0.5em 1em;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
letter-spacing: 0.05em;
box-shadow: 0 2px 10px rgba(102, 126, 234, 0.3);
outline: none;
z-index: 10;
}
.eight-draw-btn:hover:not(:disabled) {
transform: translateY(-1px);
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.5);
}
.eight-draw-btn:active:not(:disabled) {
transform: translateY(0);
}
.eight-draw-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
filter: grayscale(50%);
}
/* 视频覆盖层 */
.video-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.95);
display: none;
justify-content: center;
align-items: center;
z-index: 1000;
}
.video-overlay.active {
display: flex;
}
.video-overlay video {
max-width: 90%;
max-height: 90%;
border-radius: 8px;
box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6);
}
.close-video {
position: absolute;
top: 20px;
right: 30px;
background: rgba(255, 255, 255, 0.2);
border: none;
color: #fff;
font-size: 2.5rem;
width: 50px;
height: 50px;
border-radius: 50%;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
transition: all 0.3s;
line-height: 1;
padding: 0;
}
.close-video:hover {
background: rgba(255, 255, 255, 0.4);
transform: scale(1.1);
}
@media (max-width:900px) { .random-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px) {
.time-digit { font-size:clamp(3.5rem,22vw,7rem); }
.time-colon { font-size:clamp(2.8rem,18vw,6rem); }
.top-reminder { font-size:clamp(0.75rem,2.5vw,1rem); top:8px; white-space:normal; max-width:90vw; }
.fullscreen-btn { bottom:12px; right:12px; padding:0.55em 1em; }
.sync-row { flex-wrap:wrap; justify-content:center; }
}
</style>
</head>
<body>
<div class="top-reminder">当你看到这句话时说明你该低头看自己卷子</div>
<div class="clock-container">
<div class="clock-display">
<div class="date-section">
<span class="date-text" id="dateDisplay">----年--月--日</span>
<span class="date-divider"></span>
<span class="weekday-text" id="weekdayDisplay">---</span>
</div>
<div class="time-section">
<span class="time-digit" id="hours">--</span><span class="time-colon">:</span>
<span class="time-digit" id="minutes">--</span><span class="time-colon">:</span>
<span class="time-digit" id="seconds">--</span>
</div>
<button class="eight-draw-btn" id="eightDrawBtn">🎲 八连抽</button>
<div class="info-section">
<span class="timezone-label">北京时间</span><span class="info-dot"></span><span class="period-label" id="periodDisplay">--</span>
</div>
<div class="sync-row">
<div class="sync-status"><span class="sync-dot" style="width:6px;height:6px;border-radius:50%;background:#aaa;display:inline-block;"></span><span id="syncText">等待网络校准…</span></div>
<button class="sync-btn" id="manualSyncBtn">↻ 立即同步</button>
</div>
</div>
<!-- 随机抽取始终显示 -->
<div class="random-section">
<div class="random-grid" id="randomGrid"></div>
</div>
</div>
<!-- 内嵌视频播放器 -->
<div class="video-overlay" id="videoOverlay">
<video id="drawVideo" playsinline preload="auto" muted>
<source src="dh.mp4" type="video/mp4">
</video>
<button class="close-video" id="closeVideoBtn">×</button>
</div>
<button class="fullscreen-btn" id="fullscreenBtn" title="切换全屏 (F键)">
<svg id="fsIconEnter" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><polyline points="15 3 21 3 21 9"/><polyline points="9 21 3 21 3 15"/><line x1="21" y1="3" x2="14" y2="10"/><line x1="3" y1="21" x2="10" y2="14"/></svg>
<svg id="fsIconExit" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" style="display:none;"><polyline points="4 8 4 3 9 3"/><polyline points="20 16 20 21 15 21"/><line x1="4" y1="3" x2="11" y2="10"/><line x1="20" y1="21" x2="13" y2="14"/></svg>
<span id="fullscreenLabel">全屏</span>
</button>
<script>
(function() {
const hoursEl = document.getElementById('hours'), minutesEl = document.getElementById('minutes'), secondsEl = document.getElementById('seconds');
const dateDisplayEl = document.getElementById('dateDisplay'), weekdayDisplayEl = document.getElementById('weekdayDisplay'), periodDisplayEl = document.getElementById('periodDisplay');
const syncDot = document.querySelector('.sync-dot'), syncText = document.getElementById('syncText');
const manualSyncBtn = document.getElementById('manualSyncBtn'), fullscreenBtn = document.getElementById('fullscreenBtn');
const fsIconEnter = document.getElementById('fsIconEnter'), fsIconExit = document.getElementById('fsIconExit'), fullscreenLabel = document.getElementById('fullscreenLabel');
const randomGrid = document.getElementById('randomGrid');
const body = document.body;
const WEEKDAY_NAMES = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
const SYNC_INTERVAL = 120000;
const TIME_APIS = [
'https://worldtimeapi.org/api/timezone/Asia/Shanghai',
'https://timeapi.io/api/Time/current/zone?timeZone=Asia/Shanghai',
'https://api.allorigins.win/raw?url=http://worldtimeapi.org/api/timezone/Asia/Shanghai'
];
const GROUP_NAMES = [
['耿俪萌','王晨语','李鹤轩','李惜程','钟雨琦','王秋越'],
['徐浩轩','黄玥莹','邱紫桐','张瑜彤','方玺童','张睿哲'],
['赵轶涵','徐彦哲','赵一得','宋姝彤','李铭浩','崔梓轩'],
['付兆玉','左梓谦','陈浩铭','张晓玥','班瑞涵','张妙涵'],
['杨沛菡','张勤博','赵书钰','娄秉赫','苟喆祺','马靖轩'],
['王铭泽','商若熙','张智豪','武敬栩','王雯琦','李豪杰'],
['毕洛凡','张观程','马锦然','满家豪','田昊辰','程子濠'],
['孙振皓','蒋镇泽','叶皓轩','韩润杰','王煜瑄','李嘉轩']
];
let isFullscreen = false, idleTimer = null, lastSecond = -1, serverTimeOffset = 0, syncTimer = null, isTimeSynced = false;
function padTwo(n){ return String(n).padStart(2,'0'); }
function getPeriod(h){ if(h<6)return'凌晨';if(h<9)return'早晨';if(h<12)return'上午';if(h<14)return'中午';if(h<18)return'下午';if(h<20)return'傍晚';return'晚上'; }
function getBeijingTime(){ return new Date(Date.now()+serverTimeOffset); }
function updateSyncStatus(state,msg){
syncText.textContent=msg||'';
syncDot.style.background= state==='syncing'?'#ffaa00': state==='success'?'#4caf50': state==='failed'?'#ff5722':'#aaa';
}
async function tryFetchTime(url){
const ctrl=new AbortController(); const t=setTimeout(()=>ctrl.abort(),5000);
try{
const r=await fetch(url,{signal:ctrl.signal,cache:'no-store'}); if(!r.ok)throw new Error('HTTP '+r.status);
const d=await r.json(); clearTimeout(t);
const dt=d.datetime||d.dateTime||(d.date&&d.time?d.date+'T'+d.time:null);
if(!dt)throw new Error('无时间字段');
return new Date(dt).getTime();
}catch(e){ clearTimeout(t); throw e; }
}
async function syncNetworkTime(){
updateSyncStatus('syncing','正在校准…'); let ok=false;
for(const url of TIME_APIS){ try{ serverTimeOffset = await tryFetchTime(url) - Date.now(); isTimeSynced=true; updateSyncStatus('success','已网络校准 · 每2分钟同步'); ok=true; break; }catch(e){} }
if(!ok){ if(isTimeSynced) updateSyncStatus('failed','同步失败，沿用上次'); else updateSyncStatus('failed','网络不可用，本地时间'); }
}
function startPeriodicSync(){ if(syncTimer)clearInterval(syncTimer); syncTimer=setInterval(syncNetworkTime,SYNC_INTERVAL); if(!isTimeSynced)syncNetworkTime(); }
manualSyncBtn.addEventListener('click',(e)=>{ e.preventDefault(); syncNetworkTime(); });
function updateClock(){
const t=getBeijingTime(); const h=t.getHours(),m=t.getMinutes(),s=t.getSeconds();
if(s===lastSecond){ requestAnimationFrame(()=>scheduleNextUpdate()); return; } lastSecond=s;
hoursEl.textContent=padTwo(h); minutesEl.textContent=padTwo(m); secondsEl.textContent=padTwo(s);
const ds=`${t.getFullYear()}年${t.getMonth()+1}月${t.getDate()}日`;
if(dateDisplayEl.textContent!==ds){ dateDisplayEl.textContent=ds; weekdayDisplayEl.textContent=WEEKDAY_NAMES[t.getDay()]; periodDisplayEl.textContent=getPeriod(h); }
requestAnimationFrame(()=>scheduleNextUpdate());
}
let updateTimeout;
function scheduleNextUpdate(){ if(updateTimeout)clearTimeout(updateTimeout); const n=getBeijingTime(); updateTimeout=setTimeout(updateClock,1000-n.getMilliseconds()+1); }
// 随机抽取（带动画）
function renderRandomGrid(){
randomGrid.innerHTML='';
for(let i=0;i<8;i++){
const card=document.createElement('div'); card.className='random-card'; card.dataset.group=i;
const name=document.createElement('div'); name.className='random-name'; name.textContent=`${i+1}组`;
const result=document.createElement('div'); result.className='random-result'; result.textContent='点击抽取';
card.append(name,result);
card.addEventListener('click',()=>drawRandom(i,card));
randomGrid.appendChild(card);
}
}
function drawRandom(groupIndex,card){
const names=GROUP_NAMES[groupIndex];
const resultEl=card.querySelector('.random-result');
if(resultEl.classList.contains('animating')) return; // 防止连点
// 动画阶段
resultEl.classList.add('animating');
let count = 0;
const maxFlashes = 10;
const interval = setInterval(() => {
const randomIdx = Math.floor(Math.random() * names.length);
resultEl.textContent = names[randomIdx];
count++;
if(count >= maxFlashes){
clearInterval(interval);
// 最终抽取
const finalIdx = Math.floor(Math.random() * names.length);
resultEl.textContent = names[finalIdx];
resultEl.classList.remove('animating');
resultEl.classList.add('final');
setTimeout(() => resultEl.classList.remove('final'), 400);
}
}, 80);
}
// 八连抽功能
async function eightDraw(){
const btn = document.getElementById('eightDrawBtn');
const overlay = document.getElementById('videoOverlay');
const video = document.getElementById('drawVideo');
// 禁用按钮防止重复点击
btn.disabled = true;
// 显示视频覆盖层
overlay.classList.add('active');
// 等待视频加载并播放
try {
// 如果视频还没开始加载，先加载
if(video.networkState === 0) {
video.load();
}
// 等待视频有足够数据可以播放
if(video.readyState < 2) {
await new Promise((resolve, reject) => {
const timeout = setTimeout(() => reject(new Error('加载超时')), 10000);
video.addEventListener('canplay', () => {
clearTimeout(timeout);
resolve();
}, { once: true });
video.addEventListener('error', (e) => {
clearTimeout(timeout);
reject(video.error || new Error('视频加载错误'));
}, { once: true });
});
}
// 重置到开头并播放
video.currentTime = 0;
const playPromise = video.play();
if(playPromise !== undefined) {
await playPromise;
}
// 等待视频播放完成
await new Promise(resolve => {
video.addEventListener('ended', resolve, { once: true });
});
} catch(e) {
console.error('视频播放失败:', e);
// 如果视频播放失败，隐藏覆盖层并恢复按钮
overlay.classList.remove('active');
btn.disabled = false;
return;
}
// 视频播放完成后，隐藏视频并开始抽取
overlay.classList.remove('active');
video.pause();
video.currentTime = 0;
// 依次触发8个组的抽取（连续无间隔）
for(let i = 0; i < 8; i++){
const card = document.querySelector(`.random-card[data-group="${i}"]`);
drawRandom(i, card);
}
// 抽取完成后恢复按钮
btn.disabled = false;
}
// 关闭视频函数
function closeVideo(){
const overlay = document.getElementById('videoOverlay');
const video = document.getElementById('drawVideo');
const btn = document.getElementById('eightDrawBtn');
video.pause();
video.currentTime = 0;
overlay.classList.remove('active');
btn.disabled = false;
}
// 全屏
function enterFullscreen(){ const el=document.documentElement; if(el.requestFullscreen)el.requestFullscreen().catch(()=>{}); else if(el.webkitRequestFullscreen)el.webkitRequestFullscreen(); }
function exitFullscreen(){ if(document.exitFullscreen)document.exitFullscreen().catch(()=>{}); else if(document.webkitExitFullscreen)document.webkitExitFullscreen(); }
function toggleFullscreen(){ isFullscreen?exitFullscreen():enterFullscreen(); }
function updateFullscreenUI(fs){ isFullscreen=fs; if(fs){ fsIconEnter.style.display='none'; fsIconExit.style.display='block'; fullscreenLabel.textContent='退出全屏'; body.classList.add('fullscreen-mode'); } else { fsIconEnter.style.display='block'; fsIconExit.style.display='none'; fullscreenLabel.textContent='全屏'; body.classList.remove('fullscreen-mode'); } }
function onFullscreenChange(){ updateFullscreenUI(!!(document.fullscreenElement||document.webkitFullscreenElement)); }
document.addEventListener('fullscreenchange',onFullscreenChange); document.addEventListener('webkitfullscreenchange',onFullscreenChange);
fullscreenBtn.addEventListener('click',(e)=>{ e.preventDefault(); toggleFullscreen(); });
document.addEventListener('keydown',(e)=>{ if((e.key==='f'||e.key==='F')&&!e.ctrlKey&&!e.metaKey&&!e.altKey){ e.preventDefault(); toggleFullscreen(); } else if(e.key==='F11'){ e.preventDefault(); toggleFullscreen(); } });
function resetIdle(){ body.classList.remove('idle'); if(idleTimer)clearTimeout(idleTimer); idleTimer=setTimeout(()=>body.classList.add('idle'),15000); }
['mousemove','touchstart','touchmove','keydown'].forEach(ev=>document.addEventListener(ev,resetIdle,{passive:true}));
async function init(){
renderRandomGrid();
// 绑定八连抽按钮事件
const eightDrawBtn = document.getElementById('eightDrawBtn');
if(eightDrawBtn) eightDrawBtn.addEventListener('click', eightDraw);
// 绑定关闭视频按钮事件
const closeVideoBtn = document.getElementById('closeVideoBtn');
if(closeVideoBtn) closeVideoBtn.addEventListener('click', closeVideo);
// 点击视频覆盖层背景也可以关闭（点击视频本身不关闭）
const videoOverlay = document.getElementById('videoOverlay');
if(videoOverlay) {
videoOverlay.addEventListener('click', (e) => {
if(e.target === videoOverlay) closeVideo();
});
}
await syncNetworkTime(); startPeriodicSync();
const t=getBeijingTime(); lastSecond=t.getSeconds();
hoursEl.textContent=padTwo(t.getHours()); minutesEl.textContent=padTwo(t.getMinutes()); secondsEl.textContent=padTwo(lastSecond);
dateDisplayEl.textContent=`${t.getFullYear()}年${t.getMonth()+1}月${t.getDate()}日`; weekdayDisplayEl.textContent=WEEKDAY_NAMES[t.getDay()]; periodDisplayEl.textContent=getPeriod(t.getHours());
updateFullscreenUI(!!(document.fullscreenElement||document.webkitFullscreenElement)); resetIdle(); scheduleNextUpdate();
}
init();
document.addEventListener('visibilitychange',()=>{ if(!document.hidden){ if(updateTimeout)clearTimeout(updateTimeout); updateClock(); } });
})();
</script>
</body>
</html>