react 实现实时展示本地时间

最新推荐文章于 2026-07-18 09:41:40 发布

原创最新推荐文章于 2026-07-18 09:41:40 发布 · 1.7k 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

React

当前文章被收录于：

React

7 篇文章 1 人学习

订阅专栏查看详情

当前文章被以下社区和专栏收录：

该博客展示了一个使用React hooks和JavaScript Date对象实现的实时时间显示组件。通过useState Hook 和 setInterval 更新日期时间，并在页面上展示年月日时分秒。这个组件每秒更新一次，提供了一种简单的方法在应用中显示当前时间。

import { useState } from "react";

function Test() {
    const [date, setDate] = useState('');

    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;
        setDate(t);
    }
    setInterval(getNewDate, 1000);

    return <div>{date}</div>

}
export default Test;

标签

#react.js #javascript