diff --git a/sidepanel/index.css b/sidepanel/index.css index 4b9b99a..82fe21b 100644 --- a/sidepanel/index.css +++ b/sidepanel/index.css @@ -30,7 +30,7 @@ background-color: #007bff; color: white; transform: translateY(-2px); - box-shadow: 0 2px 5px rgba(0,0,0,0.2); + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); } .close-button { @@ -49,6 +49,36 @@ transform: scale(1.05); } +#current-timestamp { + p a { + box-sizing: border-box; + color: #2b2b2b; + font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace; + } + + button { + padding: 0.5rem 1rem; + background-color: #28a745; + color: white; + border: none; + border-radius: 0.25rem; + cursor: pointer; + height: 2rem; + align-self: flex-start; + transition: all 0.3s ease; + } + + button:active { + transform: scale(0.95); + } + + button:hover { + background-color: #218838; + transform: translateY(-2px); + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); + } +} + .datetime-box { display: flex; align-items: center; @@ -110,7 +140,7 @@ .convert-button:hover { background-color: #218838; transform: translateY(-2px); - box-shadow: 0 4px 8px rgba(0,0,0,0.2); + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); } .content { @@ -142,26 +172,35 @@ } /* 按钮点击效果 */ -.button:active, .convert-button:active, .nav-button:active, .close-button:active { +.button:active, +.convert-button:active, +.nav-button:active, +.close-button:active { transform: scale(0.95); } /* 输入框动画 */ -.input-text, .select-box { +.input-text, +.select-box { transition: all 0.2s ease-in-out; } -.input-text:hover, .select-box:hover { +.input-text:hover, +.select-box:hover { transform: translateY(-1px); - box-shadow: 0 2px 4px rgba(0,0,0,0.1); + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } /* 结果显示动画 */ -#timestamp-conversion-result, #date-conversion-result, #current-timestamp-value { +#timestamp-conversion-result, +#date-conversion-result, +#current-timestamp-value { transition: all 0.3s ease; } -#timestamp-conversion-result:focus, #date-conversion-result:focus, #current-timestamp-value:focus { +#timestamp-conversion-result:focus, +#date-conversion-result:focus, +#current-timestamp-value:focus { transform: scale(1.02); } @@ -173,8 +212,8 @@ .input-text { width: 100%; } - + .page { padding: 0.5rem; } -} \ No newline at end of file +} diff --git a/sidepanel/index.html b/sidepanel/index.html index 27fe613..f980356 100644 --- a/sidepanel/index.html +++ b/sidepanel/index.html @@ -21,16 +21,18 @@

时间戳工具

-
+

当前时间戳

1762873747965 毫秒 +

+
- + -

+
@@ -61,8 +63,7 @@ placeholder="转换结果" class="input-text" /> - +
@@ -78,8 +79,7 @@ placeholder="输入日期时间" class="input-text" /> - +
diff --git a/sidepanel/modules/eventHandlers.js b/sidepanel/modules/eventHandlers.js index eed1038..a780ee2 100644 --- a/sidepanel/modules/eventHandlers.js +++ b/sidepanel/modules/eventHandlers.js @@ -10,7 +10,26 @@ let showMilliseconds = true; // 定义一个全局变量来保存计时器 let timestampInterval; // 定义时区列表 -const timeZoneList = Intl.supportedValuesOf('timeZone'); +const timeZoneList = [ + 'America/New_York', + 'America/Chicago', + 'America/Denver', + 'America/Los_Angeles', + 'America/Anchorage', + 'America/Honolulu', + 'Europe/London', + 'Europe/Paris', + 'Europe/Berlin', + 'Europe/Moscow', + 'Asia/Tokyo', + 'Asia/Shanghai', + 'Asia/Hong_Kong', + 'Asia/Singapore', + 'Asia/Dubai', + 'Asia/Kolkata', + 'Australia/Sydney', + 'Pacific/Auckland', +]; // 获取本地时区 const localTimeZone = new Intl.DateTimeFormat().resolvedOptions().timeZone; @@ -38,9 +57,10 @@ export function initTimeZoneList() { if (i === localTimeZoneIndex) { timezoneResultSelect.add(new Option(timeZoneList[i], i, true, true)); timezoneInputSelect.add(new Option(timeZoneList[i], i, true, true)); + } else { + timezoneResultSelect.add(new Option(timeZoneList[i], i)); + timezoneInputSelect.add(new Option(timeZoneList[i], i)); } - timezoneResultSelect.add(new Option(timeZoneList[i], i)); - timezoneInputSelect.add(new Option(timeZoneList[i], i)); } } @@ -56,8 +76,19 @@ export function initTimestampAndDate() { * 切换单位按钮事件处理器 */ export function handleToggleUnit() { + const currentTimestampUnit = getElementById('current-timestamp-unit'); + const toggleUnitBtn = getElementById('toggle-unit-btn'); + showMilliseconds = !showMilliseconds; + currentTimestampUnit.textContent = showMilliseconds ? '毫秒' : '秒'; updateTimestamp(showMilliseconds); + + // 添加闪烁动画效果 + toggleUnitBtn.style.transition = 'all 0.3s'; + toggleUnitBtn.style.transform = 'scale(1.02)'; + setTimeout(() => { + toggleUnitBtn.style.transform = 'scale(1)'; + }, 300); } /** @@ -191,18 +222,23 @@ export function handleConvertDateToTimestamp() { export function handleCopyTimestamp() { // 获取时间戳文本 const currentTimestamp = getElementById('current-timestamp-value'); + const copyTimestampBtn = getElementById('copy-timestamp-btn'); const timestampText = currentTimestamp.textContent; - // 添加复制反馈动画 - const originalText = currentTimestamp.textContent; - currentTimestamp.textContent = '已复制!'; - currentTimestamp.style.color = '#28a745'; - currentTimestamp.style.fontWeight = 'bold'; + copyTimestampBtn.textContent = '已复制'; + copyTimestampBtn.style.fontWeight = 'bold'; + + // 添加闪烁动画效果 + copyTimestampBtn.style.transition = 'all 0.3s'; + copyTimestampBtn.style.transform = 'scale(1.02)'; + setTimeout(() => { + copyTimestampBtn.style.transform = 'scale(1)'; + }, 300); setTimeout(() => { - currentTimestamp.textContent = originalText; - currentTimestamp.style.color = ''; - currentTimestamp.style.fontWeight = ''; + copyTimestampBtn.textContent = '复制'; + copyTimestampBtn.style.color = ''; + copyTimestampBtn.style.fontWeight = ''; }, 1000); // 检查扩展上下文是否仍然有效 diff --git a/sidepanel/utils/timestampUtils.js b/sidepanel/utils/timestampUtils.js index 1643f6d..ccb3052 100644 --- a/sidepanel/utils/timestampUtils.js +++ b/sidepanel/utils/timestampUtils.js @@ -3,16 +3,13 @@ */ /** - * 更新时间戳显示 + * 更新时间戳 * @param {boolean} showMilliseconds - 是否显示毫秒 */ export function updateTimestamp(showMilliseconds = true) { const currentTimestamp = document.getElementById('current-timestamp-value'); - const currentTimestampUnit = document.getElementById('current-timestamp-unit'); const timestamp = Date.now(); - const unit = showMilliseconds ? '毫秒' : '秒'; currentTimestamp.textContent = showMilliseconds ? timestamp : Math.floor(timestamp / 1000); - currentTimestampUnit.textContent = unit; } /**