Skip to content

Commit 30d628c

Browse files
committed
add timestamp tool;
1 parent f97cd03 commit 30d628c

File tree

2 files changed

+141
-0
lines changed

2 files changed

+141
-0
lines changed
Lines changed: 137 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,137 @@
1+
@inject IOptions<SiteOption> SiteOptions
2+
3+
<PageTitle>时间戳转换工具 - @SiteOptions.Value.AppTitle</PageTitle>
4+
5+
<div class="container">
6+
<div class="row mb-3">
7+
<div class="col d-flex align-items-center gap-2">
8+
<span>当前时间戳:</span>
9+
<span class="text-danger" id="currentTimestamp"></span>
10+
<button class="btn btn-primary btn-sm" onclick="startRefreshing()">开始刷新</button>
11+
<button class="btn btn-secondary btn-sm" onclick="stopRefreshing()">停止刷新</button>
12+
<button class="btn btn-info btn-sm" onclick="refreshTimestamp()">刷新</button>
13+
</div>
14+
</div>
15+
16+
<div class="row mb-3">
17+
<div class="col d-flex align-items-center gap-2">
18+
<span>时间戳:</span>
19+
<input type="text" class="form-control w-auto" id="inputTimestamp" />
20+
<select class="form-select w-auto" id="timestampUnit">
21+
<option value="s">秒</option>
22+
<option value="ms">毫秒</option>
23+
</select>
24+
<button class="btn btn-primary btn-sm" onclick="convertTimestampToDate()">转换为日期</button>
25+
<input type="text" class="form-control w-auto" id="outputDate" readonly />
26+
</div>
27+
</div>
28+
29+
<div class="row">
30+
<div class="col d-flex align-items-center gap-2">
31+
<span>日期时间:</span>
32+
<input type="datetime-local" class="form-control w-auto" id="inputDate" />
33+
<button class="btn btn-primary btn-sm" onclick="convertDateToTimestamp()">转换为时间戳</button>
34+
<input type="text" class="form-control w-auto" id="outputTimestamp" readonly />
35+
<select class="form-select w-auto" id="outputUnit">
36+
<option value="s">秒</option>
37+
<option value="ms">毫秒</option>
38+
</select>
39+
</div>
40+
</div>
41+
</div>
42+
43+
<style>
44+
.gap-2 {
45+
gap: 0.5rem;
46+
}
47+
</style>
48+
49+
<script>
50+
let timer = null;
51+
52+
function refreshTimestamp() {
53+
const now = Date.now();
54+
document.getElementById('currentTimestamp').textContent = Math.floor(now / 1000);
55+
}
56+
57+
function startRefreshing() {
58+
stopRefreshing();
59+
refreshTimestamp();
60+
timer = setInterval(refreshTimestamp, 1000);
61+
}
62+
63+
function stopRefreshing() {
64+
if (timer) {
65+
clearInterval(timer);
66+
timer = null;
67+
}
68+
}
69+
70+
function convertTimestampToDate() {
71+
const timestamp = document.getElementById('inputTimestamp').value;
72+
const unit = document.getElementById('timestampUnit').value;
73+
const outputElement = document.getElementById('outputDate');
74+
75+
if (!timestamp || isNaN(timestamp)) {
76+
outputElement.value = '无效的时间戳';
77+
return;
78+
}
79+
80+
try {
81+
const timestampNum = parseInt(timestamp);
82+
const date = new Date(unit === 'ms' ? timestampNum : timestampNum * 1000);
83+
84+
if (isNaN(date.getTime())) {
85+
outputElement.value = '无效的时间戳';
86+
return;
87+
}
88+
89+
outputElement.value = date.toLocaleString('zh-CN', {
90+
year: 'numeric',
91+
month: '2-digit',
92+
day: '2-digit',
93+
hour: '2-digit',
94+
minute: '2-digit',
95+
second: '2-digit',
96+
hour12: false
97+
});
98+
} catch {
99+
outputElement.value = '转换失败';
100+
}
101+
}
102+
103+
function convertDateToTimestamp() {
104+
const dateStr = document.getElementById('inputDate').value;
105+
const unit = document.getElementById('outputUnit').value;
106+
const outputElement = document.getElementById('outputTimestamp');
107+
108+
if (!dateStr) {
109+
outputElement.value = '';
110+
return;
111+
}
112+
113+
try {
114+
const timestamp = new Date(dateStr).getTime();
115+
outputElement.value = unit === 'ms' ? timestamp : Math.floor(timestamp / 1000);
116+
} catch {
117+
outputElement.value = '转换失败';
118+
}
119+
}
120+
121+
// 页面加载时初始化当前时间戳
122+
document.addEventListener('DOMContentLoaded', () => {
123+
refreshTimestamp();
124+
// 设置默认日期时间为当前时间
125+
const now = new Date();
126+
const year = now.getFullYear();
127+
const month = String(now.getMonth() + 1).padStart(2, '0');
128+
const day = String(now.getDate()).padStart(2, '0');
129+
const hours = String(now.getHours()).padStart(2, '0');
130+
const minutes = String(now.getMinutes()).padStart(2, '0');
131+
document.getElementById('inputDate').value = `${year}-${month}-${day}T${hours}:${minutes}`;
132+
});
133+
</script>
134+
135+
@code {
136+
public const string Slug = "timestamp";
137+
}

src/CodeWF/Pages/Tool/Index.razor

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,10 @@
3939
{
4040
<IconConverter/>
4141
}
42+
@if (string.Equals(Slug, Timestamp.Slug, StringComparison.OrdinalIgnoreCase))
43+
{
44+
<Timestamp />
45+
}
4246
}
4347
</ChildContent>
4448
</CmsCard>

0 commit comments

Comments
 (0)