react 做一个实时的日期时间计时器

BSCIO_599

已于 2023-12-08 14:55:19 修改

阅读量252

点赞数

文章标签： react.js 前端 typescript

于 2023-12-08 14:44:18 首次发布

本文链接：https://blog.csdn.net/weixin_40581358/article/details/134878344

版权

import { useEffect, useState } from 'react'
import dayjs from 'dayjs'
import { px2vh } from '@/utils/styleUtils'
export function ElectronicClock() {
  const [currentDateTime, setCurrentDateTime] = useState(new Date())

  useEffect(() => {
    const intervalId = setInterval(() => {
      setCurrentDateTime(new Date())
    }, 1000)

    return () => {
      clearInterval(intervalId)
    }
  }, [])

  return (
    <span className="electronic-clock" style={{ fontSize: px2vh(16) }}>
      {dayjs(currentDateTime.toLocaleString()).format('YYYY-MM-DD HH:mm:ss')}
    </span>
  )
}