mirror of
https://github.com/ExamAware/ExamSchedule.git
synced 2025-04-29 11:06:32 +00:00
119 lines
3.8 KiB
HTML
119 lines
3.8 KiB
HTML
<!--
|
||
_ooOoo_
|
||
o8888888o
|
||
88" . "88
|
||
(| -_- |)
|
||
O\ = /O
|
||
____/---\____
|
||
.' \\| |// '.
|
||
/ \\||| : |||// \
|
||
/ _||||| -:- |||||- \
|
||
| | \\\ - /// | |
|
||
| _| ''---/'' | |
|
||
\ .-\__ `-` ___/-. /
|
||
___`. .' /--.--\ `. . __
|
||
."" '< `.___\_<|>_/___.' >'"".
|
||
| | : `- \.;`\ _ /';.\ - ` : | |
|
||
\ \ `-. \_ __\ /__ _/ .-\ / /
|
||
======`-.____`-.___\_____/___.-`____.-'======
|
||
`=---='
|
||
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
|
||
佛祖保佑 永无BUG
|
||
-->
|
||
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>当前时间</title>
|
||
<link rel="shortcut icon" href="../favicon.ico">
|
||
<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 rel="stylesheet" href="styles.css"> <!-- 引入单独的 CSS 文件 -->
|
||
</head>
|
||
|
||
<body>
|
||
<button id="return-btn" onclick="goBack()">返回</button> <!-- 新增返回按钮 -->
|
||
<div class="container">
|
||
<div class="text">当前时间：</div>
|
||
<div class="time" id="time"></div>
|
||
<div class="controls">
|
||
<select id="fontSelector" class="btn" onchange="changeFontFamily()">
|
||
<option value="Roboto">Roboto（在线）</option>
|
||
<option value="DM Sans">DM Sans（在线）</option>
|
||
<option value="Inter">Inter（在线）</option>
|
||
<option value="Space Mono">Space Mono（在线）</option>
|
||
<option value="Work Sans">Work Sans（在线）</option>
|
||
<option value="Libre Franklin">Libre Franklin（在线）</option>
|
||
<option value="微软雅黑">微软雅黑</option>
|
||
<option value="黑体">黑体</option>
|
||
<option value="宋体">宋体</option>
|
||
</select>
|
||
<div class="font-size-control">
|
||
<input type="number" id="fontSizeInput" class="btn" value="160" min="10" max="500" step="5">
|
||
<span class="unit">px</span>
|
||
</div>
|
||
<button class="btn" onclick="changeFontSize(-5)">减小字号</button>
|
||
<button class="btn" onclick="changeFontSize(5)">增大字号</button>
|
||
<button class="btn fullscreen" onclick="toggleFullScreen()">全屏/还原</button>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
// 返回上级目录的函数
|
||
function goBack() {
|
||
window.history.back();
|
||
}
|
||
|
||
setInterval(() => {
|
||
const date = new Date();
|
||
const time = date.toLocaleTimeString('zh-CN', {
|
||
hour12: false
|
||
});
|
||
document.getElementById('time').textContent = time;
|
||
}, 1000);
|
||
|
||
function changeFontSize(change) {
|
||
const elements = document.querySelectorAll('.time');
|
||
const input = document.getElementById('fontSizeInput');
|
||
elements.forEach(element => {
|
||
let newSize;
|
||
if (typeof change === 'number') {
|
||
const currentSize = parseFloat(window.getComputedStyle(element).fontSize);
|
||
newSize = currentSize + change;
|
||
input.value = newSize;
|
||
} else {
|
||
newSize = parseInt(input.value);
|
||
}
|
||
element.style.fontSize = `${newSize}px`;
|
||
});
|
||
}
|
||
|
||
function changeFontFamily() {
|
||
const selectedFont = document.getElementById('fontSelector').value;
|
||
const elements = document.querySelectorAll('.time, .text');
|
||
elements.forEach(element => {
|
||
element.style.fontFamily = selectedFont;
|
||
});
|
||
}
|
||
|
||
function toggleFullScreen() {
|
||
if (!document.fullscreenElement) {
|
||
document.documentElement.requestFullscreen();
|
||
} else {
|
||
if (document.exitFullscreen) {
|
||
document.exitFullscreen();
|
||
}
|
||
}
|
||
}
|
||
|
||
// 监听字号输入框变化
|
||
document.getElementById('fontSizeInput').addEventListener('input', () => changeFontSize());
|
||
|
||
// 初始化默认字号
|
||
window.addEventListener('load', () => changeFontSize());
|
||
</script>
|
||
</body>
|
||
|
||
</html> |