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
+ }
0 commit comments