雨霖铃
8cb9580860
- 设置默认重定向路由为 '/' - 修复路由实例化后未正确调用 init 方法的问题 - 移除不必要的控制台日志输出 - 调整路由守卫中 next 回调的参数传递方式 - 导出 Router 类时增加空格以符合代码风格 - 更新时间戳组件导入方式并移除冗余初始化调用 - 为定时器管理器添加清理功能的日志提示 - 从 BaseComponent 中移除调试日志并修复定时器返回值处理
93 lines
3.2 KiB
JavaScript
93 lines
3.2 KiB
JavaScript
import {
|
|
handleClosePanel,
|
|
handleConvertDateToTimestamp,
|
|
handleConvertTimestamp,
|
|
handleCopyTimestamp,
|
|
handleStartTimer,
|
|
handleStopTimer,
|
|
handleTimezoneInput,
|
|
handleTimezoneResult,
|
|
handleToggleUnit,
|
|
} from '../modules/eventHandlers.js';
|
|
import {updateTimestamp} from './utils/timestampUtils.js';
|
|
import {timeZoneList} from './const/timezone.js';
|
|
import {BaseComponent} from './components/BaseComponet.js';
|
|
|
|
// 获取本地时区
|
|
const localTimeZone = new Intl.DateTimeFormat().resolvedOptions().timeZone;
|
|
|
|
class Timestamp extends BaseComponent {
|
|
constructor() {
|
|
super();
|
|
// 定义一个全局变量来保存是否显示毫秒
|
|
this.showMilliseconds = true;
|
|
// 定义一个全局变量来保存计时器
|
|
this.timestampInterval = null;
|
|
}
|
|
|
|
async init() {
|
|
const currentTimestampValue = document.getElementById('current-timestamp-value');
|
|
|
|
// 初始化时更新一次时间戳
|
|
updateTimestamp(currentTimestampValue, this.showMilliseconds);
|
|
|
|
this.timestampInterval = this.setInterval(() =>
|
|
updateTimestamp(currentTimestampValue, this.showMilliseconds),
|
|
100);
|
|
|
|
const timezoneResultSelect = document.getElementById('timezone-result');
|
|
const timezoneInputSelect = document.getElementById('timezone-input');
|
|
const localTimeZoneIndex = timeZoneList.indexOf(localTimeZone);
|
|
for (let i = 0; i < timeZoneList.length; i++) {
|
|
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));
|
|
}
|
|
}
|
|
|
|
const timestampInput = document.getElementById('timestamp-input');
|
|
const dateInput = document.getElementById('datetime-input');
|
|
|
|
timestampInput.value = Date.now();
|
|
dateInput.value = new Date().toLocaleString('sv-SE');
|
|
|
|
this.bindBtnEvent();
|
|
}
|
|
|
|
bindBtnEvent() {
|
|
// 绑定时间戳相关按钮事件
|
|
this.bindEvent(
|
|
'toggle-unit-btn',
|
|
'click',
|
|
() => (this.showMilliseconds = handleToggleUnit(this.showMilliseconds))
|
|
);
|
|
// 绑定计时器相关按钮事件
|
|
this.bindEvent('stop-timer-btn', 'click', () => handleStopTimer(this.timestampInterval));
|
|
// 绑定开始计时器事件
|
|
this.bindEvent(
|
|
'start-timer-btn',
|
|
'click',
|
|
() =>
|
|
(this.timestampInterval = handleStartTimer(this.timestampInterval, this.showMilliseconds))
|
|
);
|
|
// 绑定时间戳转换按钮事件
|
|
this.bindEvent('convert-timestamp-to-date-btn', 'click', handleConvertTimestamp);
|
|
// 绑定日期转换按钮事件
|
|
this.bindEvent('convert-date-to-timestamp-btn', 'click', handleConvertDateToTimestamp);
|
|
// 绑定复制时间戳按钮事件
|
|
this.bindEvent('copy-timestamp-btn', 'click', handleCopyTimestamp);
|
|
// 绑定关闭面板按钮事件
|
|
this.bindEvent('close-panel-btn', 'click', handleClosePanel);
|
|
// 绑定切换时区事件
|
|
this.bindEvent('timezone-result', 'change', handleTimezoneResult);
|
|
// 绑定输入时区事件
|
|
this.bindEvent('timezone-input', 'change', handleTimezoneInput);
|
|
}
|
|
}
|
|
|
|
window.timestamp = Timestamp;
|