React 获取动态的系统时间

获取时间

var currentTime = new Date();
var hours = currentTime.getHours();
var minutes = currentTime.getMinutes();
var seconds = currentTime.getSeconds();

格式化输出样式

       // 添加前导零，确保时间格式一致
        hours = (hours < 10 ? "0" : "") + hours;
        minutes = (minutes < 10 ? "0" : "") + minutes;
        seconds = (seconds < 10 ? "0" : "") + seconds;

拼接到一起，在页面显示

       // 构建时间字符串
        var timeString = hours + ":" + minutes + ":" + seconds;

        // 将时间显示在页面上
        timeRef.current.innerHTML = timeString

使用定时器调用函数，1秒一次更新

     useEffect(()=>{
        setInterval(displayTime, 1000)
      },[])

完整代码

import React,{useRef,useEffect} from 'react'

export default function Baidu() {
    const timeRef = useRef()
    function displayTime() {
        var currentTime = new Date();
        var hours = currentTime.getHours();
        var minutes = currentTime.getMinutes();
        var seconds = currentTime.getSeconds();
        // 添加前导零，确保时间格式一致
        hours = (hours < 10 ? "0" : "") + hours;
        minutes = (minutes < 10 ? "0" : "") + minutes;
        seconds = (seconds < 10 ? "0" : "") + seconds;

        // 构建时间字符串
        var timeString = hours + ":" + minutes + ":" + seconds;

        // 将时间显示在页面上
        timeRef.current.innerHTML = timeString
      }
      useEffect(()=>{
        setInterval(displayTime, 1000)
      },[])
  return (
    <div>
        <h1>动态系统时间</h1>
        <div className='time' ref={timeRef}>
        </div>
    </div>
  )
}