update datetime

src/components/Head/index.jsx

@@ -1,68 +1,50 @@
-import React, { useEffect, useState, useRef } from 'react'
+import React, { useEffect, useState, useRef } from 'react';
 
-import TopSide from "../../assets/TopSide.png"
-import LeftLine from "../../assets/TopTitleLeftIcon.png"
-import RightLine from "../../assets/TopTitleRightIcon.png"
-import ButtonLine from "../../assets/TopButtonLine.png"
-import './index.less'
+import TopSide from '../../assets/TopSide.png';
+import LeftLine from '../../assets/TopTitleLeftIcon.png';
+import RightLine from '../../assets/TopTitleRightIcon.png';
+import ButtonLine from '../../assets/TopButtonLine.png';
+import './index.less';
 
 export default function index() {
-  const timmer = useRef()
-  const [Hour, setHour] = useState('');
-  const [Seconds, setSeconds] = useState('');
-  const [Minutes, setMinutes] = useState('');
-  const [Year, setYear] = useState('');
-  const [Month, setMonth] = useState('');
-  const [Day, setDay] = useState('');
+	const [now, setNow] = useState('2023.07.01 12:00:00');
 
-  const getNewDate = () => {
-    const time = new Date();
-    const year = time.getFullYear();
-    const month = time.getMonth() + 1;
-    const day = time.getDate();
-    const hour = time.getHours();
-    const minutes = time.getMinutes();
-    const s = time.getSeconds();
-    const seconds = s <= 9 ? "0" + s : s;
-    // const t = `${year}年${month}月${day}日 ${hour}:${minutes}:${seconds}`
-    setHour(hour)
-    setSeconds(seconds)
-    if (minutes < 10) {
-      setMinutes(`0${minutes}`)
-    } else {
-      setMinutes(minutes)
-    }
-    setYear(year)
-    setMonth(month)
-    setDay(day)
-   
-  }
+	useEffect(() => {
+		setInterval(() => {
+			const now = new Date();
+			setNow(
+				now
+					.toLocaleDateString('zh-hans', {
+						year: 'numeric',
+						month: '2-digit',
+						day: '2-digit',
+						hour: '2-digit',
+						minute: '2-digit',
+						second: '2-digit',
+					})
+					.replaceAll('/', '.'),
+			);
+		}, 1000);
+	}, []);
 
-  useEffect(() => {
-    timmer.current = setInterval(getNewDate, 1000);
-    return () => {
-      clearTimeout(timmer.current)
-    }
-    // eslint-disable-next-line
-  }, [])
-
-
-  return (
-    <div className='TopTitleBoder' >
-      <img src={TopSide} alt="图片丢失" className='TopSideLeft' />
-      <div className='TopSideLeftLine' >
-        <img src={LeftLine} alt="图片丢失" className='TopSideLeftLineicon' />
-        <h2 className='TopSideLeftTxt'>单位：中建材智能自动化研究院</h2>
-      </div>
-      <div >
-        <h2 className='TopTitleText'>许昌安彩新能科技&ensp;&ensp;4800万方光伏轻质基板生产线 </h2>
-        <img src={ButtonLine} alt="图片加载错误" className='TopButtonLine' />
-      </div>
-      <div className='TopSideRightLine' >
-        <h2 className='TopSideRightTxt'>{Year}.{Month}.{Day}  {Hour}.{Minutes}.{Seconds}</h2>
-        <img src={RightLine} alt="图片丢失" className='TopSideRightLineicon' />
-      </div>
-      <img src={TopSide} alt="图片丢失" className='TopSideRight' />
-    </div>
-  )
+	return (
+		<div className="TopTitleBoder">
+			<img src={TopSide} alt="图片丢失" className="TopSideLeft" />
+			<div className="TopSideLeftLine">
+				<img src={LeftLine} alt="图片丢失" className="TopSideLeftLineicon" />
+				<h2 className="TopSideLeftTxt">单位：中建材智能自动化研究院</h2>
+			</div>
+			<div>
+				<h2 className="TopTitleText">
+					许昌安彩新能科技&ensp;&ensp;4800万方光伏轻质基板生产线{' '}
+				</h2>
+				<img src={ButtonLine} alt="图片加载错误" className="TopButtonLine" />
+			</div>
+			<div className="TopSideRightLine">
+				<h2 className="TopSideRightTxt">{now}</h2>
+				<img src={RightLine} alt="图片丢失" className="TopSideRightLineicon" />
+			</div>
+			<img src={TopSide} alt="图片丢失" className="TopSideRight" />
+		</div>
+	);
 }