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 @@
时间戳工具
-
+
@@ -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;
}
/**