Files
testing-tool/sidepanel/index.html
T
雨霖铃 43ee47751b feat(sidepanel): 添加时间戳转换功能并优化默认状态
新增时间戳与日期时间相互转换的功能,包括输入框、选择器和转换按钮。
同时将侧边栏默认状态设为关闭,并完善相关样式和逻辑。
此外,增强复制功能的上下文检查以提升稳定性。
2025-11-12 22:31:00 +08:00

78 lines
2.6 KiB
HTML

<!-- sidepanel/index.html -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>测试工具</title>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<div id="app">
<!-- 导航栏 -->
<nav class="navbar">
<button id="nav-timestamp" class="nav-button active">时间戳转换</button>
<button id="nav-other" class="nav-button">其他工具</button>
<button id="close" class="close-button">X</button>
</nav>
<!-- 页面内容容器 -->
<div class="content">
<!-- 时间戳工具页面 -->
<div id="page-timestamp" class="page active">
<h2>时间戳工具</h2>
<div>
<h2>当前时间戳</h2>
<p>
<a href="javascript:;" id="current-timestamp">1762873747965</a>
<span id="timestamp-unit">毫秒</span>
<button id="toggle-timestamp-btn">切换单位</button>
<button id="copy-timestamp-btn">复制</button>
<button id="stop-timestamp-btn">停止</button>
<button id="start-timestamp-btn" style="display: none">开始</button>
</p>
</div>
<!-- 时间戳转日期时间 -->
<div>
<h2>时间戳转日期时间</h2>
<div>
<input type="text" id="input-timestamp" placeholder="请输入时间戳" class="input-text" />
<select class="select-box">
<option value="milliseconds">毫秒(ms)</option>
<option value="seconds">秒(s)</option>
</select>
</div>
<div>
<button id="convert-timestamp-btn" class="convert-button">转换</button>
</div>
<div>
<input type="text" id="timestamp-input-result" placeholder="转换结果" class="input-text"></input>
<select class="select-box">
<option>Asia/Shanghai</option>
</select>
</div>
</div>
<!-- 日期时间转时间戳 -->
<div>
<h2>日期时间转时间戳</h2>
<button id="convert-datetime-btn">转换</button>
<p id="converted-timestamp"></p>
</div>
</div>
<!-- 其他工具页面 -->
<div id="page-other" class="page">
<h2>其他工具页面</h2>
<p>这里可以放置其他工具的内容。</p>
</div>
</div>
</div>
<script src="index.js"></script>
</body>
</html>