diff --git a/.gitignore b/.gitignore index 4d29575..7d4754a 100644 --- a/.gitignore +++ b/.gitignore @@ -21,3 +21,5 @@ npm-debug.log* yarn-debug.log* yarn-error.log* + +.idea \ No newline at end of file diff --git a/src/pages/TimestampPage.js b/src/pages/TimestampPage.js index a876c19..156b718 100644 --- a/src/pages/TimestampPage.js +++ b/src/pages/TimestampPage.js @@ -1,23 +1,36 @@ -import { useEffect } from 'react'; -import { Link } from 'react-router-dom'; +import {useState, useEffect, useRef} from 'react'; +import {Link} from 'react-router-dom'; const TimestampPage = () => { - let showMilliseconds = true; - + const [currentTimestamp, setCurrentTimestamp] = useState(Math.floor(Date.now())); + const [showMilliseconds, setShowMilliseconds] = useState(true); + const [isRunningTimestamp, setIsRunningTimestamp] = useState(true); + const intervalRef = useRef(null); useEffect(() => { - const intervalId = setInterval(() => { - const timestamp = Math.floor(Date.now() / 1000); - document.getElementById('current-timestamp-value').textContent = timestamp; - }, 100); + if (isRunningTimestamp) { + intervalRef.current = setInterval(() => { + setCurrentTimestamp(Math.floor(Date.now())); + }, 100); + } - return () => clearInterval(intervalId); - }, []); + return () => { + if (intervalRef.current) { + clearInterval(intervalRef.current); + } + } + }, [isRunningTimestamp]); function handleChangeUnit() { - showMilliseconds = !showMilliseconds; - document.querySelector('#current-timestamp-unit').textContent = showMilliseconds - ? '毫秒' - : '秒'; + setShowMilliseconds(!showMilliseconds); + } + + function handleChangeTimestampRunning(status) { + setIsRunningTimestamp(status); + if (!status) { + console.log('停止时间戳') + } else { + console.log('开始时间戳') + } } return ( @@ -29,22 +42,14 @@ const TimestampPage = () => {
- 1762873747965 - 毫秒 + {Math.floor(currentTimestamp / (showMilliseconds ? 1 : 1000))} + {showMilliseconds ? '毫秒' : '秒'}