React newDate实现实时时间显示

最新推荐文章于 2024-09-10 08:22:42 发布

YoloAva

最新推荐文章于 2024-09-10 08:22:42 发布

阅读量2.2k

点赞数

分类专栏： JavaScript React 文章标签： react.js javascript

本文链接：https://blog.csdn.net/weixin_60463255/article/details/121834648

版权

React 同时被 2 个专栏收录

26 篇文章

订阅专栏

JavaScript

20 篇文章

订阅专栏

src > components > header > index.js

import React, { useState, useEffect } from 'react'
import './index.less'
import { Row, Col } from 'antd';
import { Util } from '../../utils/utils';

export default function Header() {
  const [showTime, setShowTime] = useState("")

  useEffect(() => {
    setInterval(() => {
      const sysTime = Util.formateDate(new Date().getTime());
      setShowTime(sysTime)
    }, 1000)
  }, [])
  }

  return (
    <div className="header">
        <Col span="4" className="breadcrumb-title">
          首页
        </Col>
        <Col span="20" className="weather">
          <span className="date">{showTime}</span>
        </Col>
      </Row>
    </div>
  )
}

src > utils > utils.js

export const Util = {
  formateDate(time) {
    if (!time) return '';
    let date = new Date(time);
    return date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate() + " " + date.getHours() + ':' + date.getMinutes() + ':' + date.getSeconds()
  }
}