feat(timestamp): 实现时间戳与日期时间转换功能
- 新增日期时间转时间戳组件 DatetimeToTimestamp - 新增时间戳转日期时间组件 TimestampToDatetime - 新增当前时间戳显示组件 TimestampExecution - 重构 TimestampPage 页面,拆分功能到独立组件 - 扩展 timeUtils 工具函数,支持时区处理和格式化 - 添加时区选择器和时间单位切换功能 - 优化时间戳转换逻辑,支持毫秒和秒单位切换 - 改进 App.css 样式宽度设置
This commit is contained in:
@@ -0,0 +1,45 @@
|
||||
import {useEffect, useState} from "react";
|
||||
import CopyButton from "./CopyButton";
|
||||
|
||||
export function TimestampExecution() {
|
||||
const [currentTimestamp, setCurrentTimestamp] = useState(Math.floor(Date.now()));
|
||||
const [showMilliseconds, setShowMilliseconds] = useState(true);
|
||||
const [isRunningTimestamp, setIsRunningTimestamp] = useState(true);
|
||||
// 定时更新时间戳
|
||||
useEffect(() => {
|
||||
const timerId = isRunningTimestamp ? setInterval(() => {
|
||||
setCurrentTimestamp(Math.floor(Date.now()));
|
||||
}, showMilliseconds ? 100 : 1000) : null;
|
||||
|
||||
return () => clearInterval(timerId);
|
||||
}, [isRunningTimestamp, showMilliseconds]);
|
||||
|
||||
const toggleUnit = () => setShowMilliseconds(prev => !prev);
|
||||
const toggleTimestamp = () => setIsRunningTimestamp(prev => !prev);
|
||||
|
||||
return (<div>
|
||||
<h2>当前时间戳</h2>
|
||||
<p>
|
||||
<span>{Math.floor(currentTimestamp / (showMilliseconds ? 1 : 1000))}</span>
|
||||
<span>{showMilliseconds ? '毫秒' : '秒'}</span>
|
||||
</p>
|
||||
<div>
|
||||
<button type="button"
|
||||
className="action-btn"
|
||||
onClick={toggleUnit}
|
||||
aria-label={showMilliseconds ? '切换为秒' : '切换为毫秒'}
|
||||
>
|
||||
切换单位
|
||||
</button>
|
||||
<CopyButton text={currentTimestamp.toString()} buttonText='复制'></CopyButton>
|
||||
<button
|
||||
type="button" // 明确指定类型,防止在 Form 中意外触发提交
|
||||
className={`btn ${isRunningTimestamp ? 'stop-btn' : 'action-btn'}`}
|
||||
onClick={toggleTimestamp}
|
||||
aria-label={isRunningTimestamp ? '停止时间戳更新' : '开始时间戳更新'}
|
||||
>
|
||||
{isRunningTimestamp ? '停止' : '开始'}
|
||||
</button>
|
||||
</div>
|
||||
</div>)
|
||||
}
|
||||
Reference in New Issue
Block a user