diff --git a/time/index.html b/time/index.html index cd035c5..6ab0874 100644 --- a/time/index.html +++ b/time/index.html @@ -39,7 +39,7 @@
当前时间:
- @@ -50,7 +50,10 @@ - +
+ + px +
@@ -73,9 +76,17 @@ function changeFontSize(change) { const elements = document.querySelectorAll('.time'); + const input = document.getElementById('fontSizeInput'); elements.forEach(element => { - const currentSize = parseFloat(window.getComputedStyle(element).fontSize); - element.style.fontSize = `${currentSize + change}px`; + 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`; }); } @@ -96,6 +107,12 @@ } } } + + // 监听字号输入框变化 + document.getElementById('fontSizeInput').addEventListener('input', () => changeFontSize()); + + // 初始化默认字号 + window.addEventListener('load', () => changeFontSize()); diff --git a/time/styles.css b/time/styles.css index d41f976..3137b70 100644 --- a/time/styles.css +++ b/time/styles.css @@ -21,7 +21,7 @@ body { } .time { - font-size: 10rem; + font-size: 160px; /* 更新默认字号 */ margin: 0; color: #D0BCFF; font-weight: 400; @@ -109,4 +109,21 @@ body { opacity: 1; 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; } \ No newline at end of file