雨霖铃
884fc09750
feat(router): 引入路由系统并重构页面结构 - 为项目引入基于 hash 的前端路由系统，支持多页面切换与动态加载 - 将原有单一 bundle 拆分为多个入口打包（index.js 和 timestamp.js） - 修改 Rollup 配置以支持多输出文件及插件共享 - 更新 HTML 结构以适配路由容器和页面占位元素 - 调整 CSS 样式，移除旧的页面切换动画，交由路由控制 - 优化 domUtils 工具函数，并迁移部分样式处理逻辑 - 在 timestamp.js 中封装初始化函数以便路由调用 - todolist 页面模板新增，用于后续功能开发 ```
68 lines
2.2 KiB
HTML
68 lines
2.2 KiB
HTML
<div id="page-timestamp" class="page">
|
|
<h2>时间戳工具</h2>
|
|
<div id="current-timestamp">
|
|
<h2>当前时间戳</h2>
|
|
<p>
|
|
<a href="javascript:;" id="current-timestamp-value">1762873747965</a>
|
|
<span id="current-timestamp-unit">毫秒</span>
|
|
</p>
|
|
<div>
|
|
<button id="toggle-unit-btn">切换单位</button>
|
|
<button id="copy-timestamp-btn">复制</button>
|
|
<button id="stop-timer-btn" style="background-color: red">停止</button>
|
|
<button id="start-timer-btn" style="display: none">开始</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 时间戳转日期时间 -->
|
|
<div>
|
|
<h2>时间戳转日期时间</h2>
|
|
<div class="datetime-box">
|
|
<div class="input-group">
|
|
<input type="text" id="timestamp-input" placeholder="请输入时间戳" class="input-text" />
|
|
<select id="timestamp-input-unit-select" class="select-box">
|
|
<option value="milliseconds">毫秒(ms)</option>
|
|
<option value="seconds">秒(s)</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="input-group">
|
|
<button id="convert-timestamp-to-date-btn" class="convert-button">转换</button>
|
|
</div>
|
|
|
|
<div class="input-group">
|
|
<input
|
|
type="text"
|
|
id="timestamp-conversion-result"
|
|
placeholder="转换结果"
|
|
class="input-text"
|
|
/>
|
|
<select class="select-box" id="timezone-result"></select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 日期时间转时间戳 -->
|
|
<div>
|
|
<h2>日期时间转时间戳</h2>
|
|
<div class="datetime-box">
|
|
<div class="input-group">
|
|
<input type="text" id="datetime-input" placeholder="输入日期时间" class="input-text" />
|
|
<select class="select-box" id="timezone-input"></select>
|
|
</div>
|
|
|
|
<div class="input-group">
|
|
<button id="convert-date-to-timestamp-btn" class="convert-button">转换</button>
|
|
</div>
|
|
|
|
<div class="input-group">
|
|
<input type="text" id="date-conversion-result" placeholder="转换结果" class="input-text" />
|
|
<select id="date-result-unit-select" class="select-box">
|
|
<option value="milliseconds">毫秒(ms)</option>
|
|
<option value="seconds">秒(s)</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|