ExamAware/ExamSchedule
3
0
Fork 0
mirror of https://github.com/ExamAware/ExamSchedule.git synced 2025-04-29 19:16:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: 添加字体大小控制功能，更新默认字号样式

Browse Source
This commit is contained in:
MKStoler1024 2025-04-12 14:57:53 +00:00
parent 2b7a35ab8e
commit 7e3927dc96
2 changed files with 39 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
time/index.html
View File

@ -39,7 +39,7 @@
<div class="text">当前时间：</div> <div class="text">当前时间：</div>
<div class="time" id="time"></div> <div class="time" id="time"></div>
<div class="controls"> <div class="controls">
<select id="fontSelector" class="btn"> <select id="fontSelector" class="btn" onchange="changeFontFamily()">
<option value="Roboto">Roboto（在线）</option> <option value="Roboto">Roboto（在线）</option>
<option value="DM Sans">DM Sans（在线）</option> <option value="DM Sans">DM Sans（在线）</option>
<option value="Inter">Inter（在线）</option> <option value="Inter">Inter（在线）</option>
@ -50,7 +50,10 @@
<option value="黑体">黑体</option> <option value="黑体">黑体</option>
<option value="宋体">宋体</option> <option value="宋体">宋体</option>
</select> </select>
<button class="btn" onclick="changeFontFamily()">更改字体</button> <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" onclick="changeFontSize(5)">增大字号</button> <button class="btn" onclick="changeFontSize(5)">增大字号</button>
<button class="btn fullscreen" onclick="toggleFullScreen()">全屏/还原</button> <button class="btn fullscreen" onclick="toggleFullScreen()">全屏/还原</button>
@ -73,9 +76,17 @@
function changeFontSize(change) { function changeFontSize(change) {
const elements = document.querySelectorAll('.time'); const elements = document.querySelectorAll('.time');
const input = document.getElementById('fontSizeInput');
elements.forEach(element => { elements.forEach(element => {
const currentSize = parseFloat(window.getComputedStyle(element).fontSize); let newSize;
element.style.fontSize = `${currentSize + change}px`; 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`;
}); });
} }
@ -96,6 +107,12 @@
} }
} }
} }
// 监听字号输入框变化
document.getElementById('fontSizeInput').addEventListener('input', () => changeFontSize());
// 初始化默认字号
window.addEventListener('load', () => changeFontSize());
</script> </script>
</body> </body>

19
time/styles.css
View File

@ -21,7 +21,7 @@ body {
} }
.time { .time {
font-size: 10rem; font-size: 160px; /* 更新默认字号 */
margin: 0; margin: 0;
color: #D0BCFF; color: #D0BCFF;
font-weight: 400; font-weight: 400;
@ -109,4 +109,21 @@ body {
opacity: 1; opacity: 1;
transform: translateY(0); transform: translateY(0);
} }
}
.font-size-control {
display: flex;
align-items: center;
gap: 4px;
}
#fontSizeInput {
width: 70px;
text-align: center;
padding: 12px 8px;
}
.unit {
color: #E6E1E5;
font-size: 0.9rem;
} }