react实现实时计时的最简方式

js中时间的处理,不借助于moment/dayjs这样的工具库,原生获取格式化的时间,最简单的实现方式可以参考下面这样。

实现效果请添加图片描述

代码实现

  • 封装hooks
import { useState, useEffect } from "react";export function useCountTime() {const [time, setTime] = useState(new Date());useEffect(() => {const timer = setInterval(() => {setTime(new Date());}, 1000);return () => {clearInterval(timer);};}, []);return formatDate(time);
}function formatDate(date) {return date.toLocaleString("zh-cn", {weekday: "long",year: "numeric",month: "long",day: "numeric",hour: "numeric",minute: "numeric",second: "numeric",});
}
  • 使用
import { useCountTime } from "../../components/TimeCount";...
const time = useCountTime()
return (<><h3>今天是星期 {time}</h3></>
)

鲜为人知的内置时间格式化

function formatDate(date) {return new Intl.DateTimeFormat("zh-CN", {hour: "numeric",minute: "numeric",second: "numeric",hour12: false,weekday: "long",year: "numeric",month: "long",day: "numeric",}).format(date);
}

福利推送

文档参考链接:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat
有兴趣的可以去了解下
在这里插入图片描述

鼠标移动坐标

  • 封装鼠标移动坐标的hooks请添加图片描述
import { useState, useEffect } from "react";export function useMouse() {const [mouse, setMouse] = useState({ x: 0, y: 0 });function handleMouseMove(event) {setMouse({ x: event.clientX, y: event.clientY });}useEffect(() => {window.addEventListener("mousemove", handleMouseMove);return () => {window.removeEventListener("mousemove", handleMouseMove);};}, []);return mouse;
}
import { useMouse } from "../../hooks/userMouse";
const { x, y } = useMouse();
return (<><div>x:{x} y:{y}</div></>
)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/446958.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

手动nginx平滑升级

一、下载nginx安装包 wget http://nginx.org/download/nginx-1.24.0.tar.gz 二、解压缩 tar -zxf nginx-1.24.0.tar.gz 三、进入解压缩后文件 3.1 cd /usr/local/nginx/sbin 预编译 进入如下命令 ./configure -prefix/usr/local/nginx --with-http_ssl_module --with…

免费设计元素下载,设计师必备,建议收藏!

设计师找设计素材、免抠元素&#xff0c;背景图等等&#xff0c;就上这6个网站&#xff0c;免费下载&#xff01; 1、菜鸟图库 免抠图片素材-免抠图片模板免费下载 - 菜鸟图库 这是一个专门为新手设计师提供免费设计素材的网站&#xff0c;站内有非常多设计素材&#xff0c;其…

为什么说期限提醒系统是项目申报的必备工具?

在项目申报的征程中&#xff0c;时间就是生命&#xff0c;时机决定成败。然而&#xff0c;当前项目申报时间管理却面临着诸多棘手的问题&#xff0c;这也让期限提醒系统成为了必不可少的必备工具。那么&#xff0c;它究竟为何如此关键&#xff1f; 目前项目申报时间管理方面面临…

uniapp 锁屏显示插件 Ba-LockShow(可让vue直接具备锁屏显示能力)

简介 Ba-LockShow 是一款可以直接使uniapp的vue界面在锁屏页展示的插件。 支持使vue直接具备锁屏显示能力支持设置锁屏显示和不显示支持唤醒屏幕 截图展示&#xff08;仅参考&#xff09; 支持定制、本地包、源码等&#xff0c;有建议和需要&#xff0c;请点击文章结尾“Unia…

世界空间到观察空间的矩阵

1&#xff09;世界空间到观察空间的矩阵 2&#xff09;Addressable在不同工程中如何实现打包和加载 3&#xff09;如何设计角色在下蹲时允许跳跃 4&#xff09;如何实时编辑玩家的近裁剪面距离 这是第403篇UWA技术知识分享的推送&#xff0c;精选了UWA社区的热门话题&#xff0…

算法系列之十二:多边形区域填充算法--扫描线填充算法(有序边表法)

二、扫描线算法&#xff08;Scan-Line Filling&#xff09; 扫描线算法适合对矢量图形进行区域填充&#xff0c;只需要直到多边形区域的几何位置&#xff0c;不需要指定种子点&#xff0c;适合计算机自动进行图形处理的场合使用&#xff0c;比如电脑游戏和三维CAD软件的渲染等等…

智能优化算法-蛇优化算法(SO)(附源码)

目录 1.内容介绍 2.部分代码 3.实验结果 4.内容获取 1.内容介绍 蛇优化算法 (Snake Optimization Algorithm, SO) 是一种基于群体智能的元启发式优化算法&#xff0c;它模拟了蛇的捕食行为、运动模式和社会互动&#xff0c;用于解决复杂的优化问题。 SO的工作机制主要包括&a…

二分类-多机器学习模型算法实现对比

准备数据 import pandas as pd import numpy as np import matplotlib.pyplot as plt from sklearn.preprocessing import StandardScaler from sklearn.preprocessing import OneHotEncoder from sklearn.preprocessing import PolynomialFeatures from sklearn.compose impo…

每日一刷——10.14——括号匹配(手写栈来实现)

栈与队列题目 第一题 题目 问题描述】设计一个算法判别一个算术表达式的圆括号是否正确配对 【输入形式】一个以为结尾的算术表达式 【输出形式】若配对&#xff0c;则输出圆括号的对数&#xff1b;否则输出no 【样例输入】 (ab)/(cd) 【样例输出】 2 【样例说明】共有两对括…

学习Redisson实现分布式锁

官网&#xff1a;https://redisson.org/ 官方文档&#xff1a;https://redisson.org/docs/getting-started/ 官方中文文档&#xff1a;https://github.com/redisson/redisson/wiki/%E7%9B%AE%E5%BD%95 1、引入依赖 <!--redisson--> <dependency><groupId>or…

【软件工程】数据流图DFD

文章目录 数据流图DFD概述一、数据流图的基本元素二、数据流图的绘制步骤三、数据流图的分层设计四、数据流图的绘制原则五、数据流图的应用 一个完整的数据流包含哪些要素从图中找出所有数据流1. **理解数据流图的结构**2. **识别外部实体**3. **追踪数据流**4. **记录数据流*…

SAP S/4 HANA 销售返利

目录 1 简介 2 后台配置 3 主数据 4 业务操作 4.1 场景 1 - 返利应计 4.2 场景 2 - 最终结算 1 简介 在过去 SAP ECC 把“返利”功能集成在了 SD 模块当中&#xff0c;而 SAP S/4 HANA 把“返利”集成在了结算管理功能模块当中。究其原因&#xff0c;主要是 ECC “返利”…

笔记-stm32移植ucos

文章目录 一、UCOS的基础知识1.1 前后台系统:1.2 RTOS系统可剥夺型内核:前后台系统和RTOS系统 1.3 UCOS系统简介学习方法 二、ucossii移植Step1&#xff1a;在工程中建立存放UCOSS代码的文件夹UCOSIIStep2:向CORE文件夹添加文件Step3:向Config文件夹添加文件Step4:向port文件夹…

本地拉取Docker镜像打包导入远程服务器

起因是因为使用远程服务器拉取镜像时&#xff0c;由于网络问题一直拉不成功&#xff0c;使用国内镜像由于更新不及时&#xff0c;国内镜像没有最新的 docker 镜像。最后使用本地的计算机&#xff0c;通过代理下载最新的镜像后打包成 tar&#xff0c; 然后上传到远程服务器进行导…

electron-vite打包踩坑记录

electron-vite打包踩坑记录 大前端已成趋势&#xff0c;用electron开发桌面端应用越来越普遍 近期尝试用electronvite开发了个桌面应用&#xff0c;electron-vite地址&#xff0c;可用使用vue开发&#xff0c;vite打包&#xff0c;这样就很方便了 但是&#xff0c;我尝试了一…

【机器学习】并行计算(parallel computation)Part1

为什么我们在机器学习中需要用到并行计算呢&#xff0c;因为现在最流行的机器学习算法都是神经网络&#xff0c;神经网络模型的计算量、参数量都很大&#xff0c;比如ResNet-50参数量为25M。而我们在训练的时候使用的数据集也很大&#xff0c;比如ImageNet数据集含有14M张图片。…

FileInputStream类

目录 1.案例代码&#xff1a; 2.注意细节 3.FileInputStream循环读取 1.案例代码&#xff1a; 准备的txt文件 结果&#xff1a; 如果需要输出原本的字母&#xff0c;强制转换为char即可&#xff1a; 结果&#xff1a; 2.注意细节 &#xff08;1&#xff09;如果文件不存在…

Qt和c++面试集合

目录 Qt面试 什么是信号&#xff08;Signal&#xff09;和槽&#xff08;Slot&#xff09;&#xff1f; 什么是Meta-Object系统&#xff1f; 什么是Qt的MVC模式&#xff1f; 1. QT中connect函数的第五个参数是什么&#xff1f;有什么作用&#xff1f; 3. 在QT中&#xff…

【NestJS入门到精通】装饰器

目录 方法装饰器通过prototype添加属性、方法 属性装饰器拓展 方法装饰器参数装饰器 方法装饰器 ClassDecorator 定义了一个类装饰器 a&#xff0c;并将其应用于类 A。装饰器 a 会在类 A 被定义时执行。 const a:ClassDecorator (target:any)>{console.log(target,targe…

概率 多维随机变量与分布

一、二维 1、二维随机变量及其分布 假设E是随机试验&#xff0c;Ω是样本空间&#xff0c;X、Y是Ω的两个变量&#xff1b;(X,Y)就叫做二维随机变量或二维随机向量。X、Y来自同一个样本空间。 联合分布函数 F(x,y)P(X≤x,Y≤y)&#xff0c;即F(x,y)表示求(x,y)左下方的面积。 …