mt-fe-group/xuchang-screen
8
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

update datetime

Browse Source
This commit is contained in:
lb 2023-07-02 16:32:34 +08:00
parent 8f3a94f431
commit d18ba333a5
1 changed files with 44 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

106
src/components/Head/index.jsx
View File

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