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></>
)
相关文章:
react实现实时计时的最简方式
js中时间的处理,不借助于moment/dayjs这样的工具库,原生获取格式化的时间,最简单的实现方式可以参考下面这样。 实现效果 代码实现 封装hooks import { useState, useEffect } from "react";export function useCountTime() {c…...
时尚的社会心理机制:求同和树异这对互为矛盾的心理动机,使得人们在社会生活中互相模仿、互相追逐、互相竞争,使得时尚的钟摆永不停息。
文章目录 引言I 时尚时尚的社会心理机制时尚的分类时尚的特点时尚的表现形式II 术语时装周服饰引言 时尚(fad)又称流行,它指在一定时期内社会上或一个群体中普遍流行的,并为大多数所仿效的生活方式或行为模式。 人的心理动机常常是互相矛盾的,既要求同于人,又要求异于人。…...
HarmonyOS NEXT应用开发实战(二、封装比UniApp和小程序更简单好用的网络库)
网络访问接口,使用频次最高。之前习惯了uniapp下的网络接口风格,使用起来贼简单方便。转战到鸿蒙上后,原始网络接口写着真累啊!目标让鸿蒙上网络接口使用,简单程度比肩uniapp,比Axios更轻量级。源码量也不多…...
[Hbase]一 HBase基础
1. HBase简介 1.1 HBase定义 HBase数据模型的关键在于 稀疏、分布式、多维、排序 的映射。其中映射 map指代非关系型数据库的 key-Value结构。 1.2 HBase数据模型 1)Name Space 命名空间,类似于关系型数据库的database 概念,每个命名空间下有多个表。HBase 两个自…...
React.createRef(),React.forwardRef(),forwardRef()结合next.js的link进行路由跳转
码云https://gitee.com/skyvilm/react-next.js 1.React.createRef() 作用:获取dom元素 使用 import React,{Component} from react export default class Index extends Componen{ constructor(props){ super(props) this.myrefReact.createRef(); //创建节点 } c…...
C++从入门到起飞之——AVL树 全方位剖析!
🌈个人主页:秋风起,再归来~🔥系列专栏:C从入门到起飞 🔖克心守己,律己则安 目录 1. AVL的概念 2. AVL树的实现 2.1 AVL树的结构 2.2 AVL树的插⼊ >AVL树插⼊⼀个值的⼤概过程 &…...
利用Fail2Ban增强Jupyter Notebook安全性以防范目录遍历攻击
利用Fail2Ban增强Jupyter Notebook安全性以防范目录遍历攻击 书接上回[^参见]一、目录遍历攻击(Directory Traversal Attack)二、日志记录的网络攻击示例分析三、配置 Fail2ban四、fail2ban-regex测试和验证正则表达式五、重启 Fail2Ban六、验证配置生效…...
智能贴身监测,健康生活建议,圆道妙医智能手表体验
如今热衷于运动和健康生活的爱好者越来越多,相关的赛事等活动也是逐年增多,很多朋友为了能够直观的了解自己的健康状况,都会配备一款智能手表,这样戴在身上就可以随时了解自己的心率、血氧等数据。最近我尝试了一款圆道妙医推出的…...
C++——AVL树
文章目录 一、AVL树的概念二、AVL树的实现1. AVL树的结构2. AVL树的插⼊2.1 AVL树插⼊⼀个值的⼤概过程2.2 平衡因⼦更新更新原则更新停止条件 2.3 插⼊结点及更新平衡因⼦的代码实现 3. 旋转旋转的原则右单旋左单旋左右双旋右左双旋 4.高度5.结点个数6.判断是否是AVL树7. 中序…...
极市平台 | 无人机相关开源数据集资源汇总
本文来源公众号“极市平台”,仅用于学术分享,侵权删,干货满满。 原文链接:无人机相关开源数据集资源汇总 本文介绍几个无人机有关的开源数据集,内附下载链接。 UAV Delievery 无人机轨迹数据集 下载链接ÿ…...
React和Vue区别,以及注意事项
目录 一、语法和框架特性的差异 二、开发习惯和注意事项 三、特别注意事项 一、语法和框架特性的差异 模板语法: Vue使用了类似于传统HTML的模板语法,通过双大括号{{ }}进行插值,而React则使用了JSX语法。在Vue中,你可以直接在…...
光伏项目难管理的问题如何解决?
1.数字化管理平台的应用 数字化是当前解决光伏项目管理难题的关键手段之一。通过建立统一的数字化管理平台,可以实现对光伏电站的远程监控、数据分析、故障预警及运维调度等功能。这类平台通常集成有智能算法,能够实时分析电站运行数据,及时…...
图片美化SDK解决方案,赋能H5与小程序极致体验
无论是社交媒体分享、电商产品展示,还是个人日常生活的记录,一张经过精心美化的图片总能瞬间吸引眼球,传递出更加丰富和动人的信息。如何在不增加应用体积、不牺牲用户体验的前提下,为H5页面和小程序提供媲美原生APP的图片美化功能…...
Kron Reduction消去法如何操作,矩阵推导过程
三阶矩阵消去单节点 在电力系统中,母线上的电流注入始终为0,这样的节点可以通过一定的方法消除。以三节点为例,假设注入节点3的电流为0,则: [ I 1 I 2 I 3 ] = [ I 1 I 2 0 ] = [ Y 11 Y 12 Y 13 Y 21 Y 22 Y 23 Y 31 Y 32 Y 33 ] [ V 1 V 2 V 3 ] \left[\begin{array}{…...
实时开放词汇目标检测(论文复现)
实时开放词汇目标检测(论文复现) 本文所涉及所有资源均在传知代码平台可获取 文章目录 实时开放词汇目标检测(论文复现)概述模型框架使用方式配置环境训练和评估训练评估 演示效果Gradio Demo 概述 YOLO-World是由腾讯人工智能实验…...
陪诊小程序搭建:打造便利的陪诊环境
陪诊行业作为一个新兴行业,随着老龄化的严重,在近几年中需求量日益旺盛。陪诊师为大众的就医提供了极大的便利性,在看病难、医疗资源紧张方面发挥了积极作用。 在陪诊行业的快速发展下,陪诊小程序为行业带来了便捷的模式…...
Qt5.15.2静态编译 MinGW with static OpenSSL
如果想用VS2017编译,可参考:Qt5.15.2静态编译 VS2017 with static OpenSSL 一.环境 系统:Windows 10 专业版 64位 编译器:MinGW 8.1.0 第三方工具:perl,ruby和python PS:经验证,用MinGW 12.1.0来编译Qt5.15.2会报错 我用Phthon 2.7.18虽然可以编过,但是强烈建议Pyth…...
Linux Ubuntu dbus CAPI ---- #include<dbus.h>出现“无法打开源文件dbus/xxx.h“的问题
一、确保已安装dbus库和CAPI sudo apt-get install libdbus-1-dev 二、在c_cpp_properties.json的includePath中是否配置了dbus库依赖文件所在的路径 三、编译一个简单的dbus代码,在编译过程中只要出现.h文件找不到的情况,就使用下列命令找到.h文件路径…...
React01 开发环境搭建
React 开发环境搭建 一、创建 React 项目二、项目精简 一、创建 React 项目 执行下述命令创建 react 项目 blu-react-basis npx create-react-app blu-react-basis项目目录结构如下: 执行下述命令启动项目 npm run start启动效果如下: 二、项目精简 …...
数据结构之旅(顺序表)
前言: Hello,各位小伙伴们我们在过去的60天里学完了C语言基本语法,由于小编在准备数学竞赛,最近没有给大家更新,并且没有及时回复大家的私信,小编在这里和大家说一声对不起!,小编这几天会及时给大家更新初阶数据结构的内容,然后我们来学习今天的内容吧! 一. 顺序表的概念和结…...
云计算——弹性云计算器(ECS)
弹性云服务器:ECS 概述 云计算重构了ICT系统,云计算平台厂商推出使得厂家能够主要关注应用管理而非平台管理的云平台,包含如下主要概念。 ECS(Elastic Cloud Server):即弹性云服务器,是云计算…...
centos 7 部署awstats 网站访问检测
一、基础环境准备(两种安装方式都要做) bash # 安装必要依赖 yum install -y httpd perl mod_perl perl-Time-HiRes perl-DateTime systemctl enable httpd # 设置 Apache 开机自启 systemctl start httpd # 启动 Apache二、安装 AWStats࿰…...
MVC 数据库
MVC 数据库 引言 在软件开发领域,Model-View-Controller(MVC)是一种流行的软件架构模式,它将应用程序分为三个核心组件:模型(Model)、视图(View)和控制器(Controller)。这种模式有助于提高代码的可维护性和可扩展性。本文将深入探讨MVC架构与数据库之间的关系,以…...
C++ 求圆面积的程序(Program to find area of a circle)
给定半径r,求圆的面积。圆的面积应精确到小数点后5位。 例子: 输入:r 5 输出:78.53982 解释:由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982,因为我们只保留小数点后 5 位数字。 输…...
无人机侦测与反制技术的进展与应用
国家电网无人机侦测与反制技术的进展与应用 引言 随着无人机(无人驾驶飞行器,UAV)技术的快速发展,其在商业、娱乐和军事领域的广泛应用带来了新的安全挑战。特别是对于关键基础设施如电力系统,无人机的“黑飞”&…...
MySQL JOIN 表过多的优化思路
当 MySQL 查询涉及大量表 JOIN 时,性能会显著下降。以下是优化思路和简易实现方法: 一、核心优化思路 减少 JOIN 数量 数据冗余:添加必要的冗余字段(如订单表直接存储用户名)合并表:将频繁关联的小表合并成…...
MySQL:分区的基本使用
目录 一、什么是分区二、有什么作用三、分类四、创建分区五、删除分区 一、什么是分区 MySQL 分区(Partitioning)是一种将单张表的数据逻辑上拆分成多个物理部分的技术。这些物理部分(分区)可以独立存储、管理和优化,…...
Kubernetes 网络模型深度解析:Pod IP 与 Service 的负载均衡机制,Service到底是什么?
Pod IP 的本质与特性 Pod IP 的定位 纯端点地址:Pod IP 是分配给 Pod 网络命名空间的真实 IP 地址(如 10.244.1.2)无特殊名称:在 Kubernetes 中,它通常被称为 “Pod IP” 或 “容器 IP”生命周期:与 Pod …...
Xela矩阵三轴触觉传感器的工作原理解析与应用场景
Xela矩阵三轴触觉传感器通过先进技术模拟人类触觉感知,帮助设备实现精确的力测量与位移监测。其核心功能基于磁性三维力测量与空间位移测量,能够捕捉多维触觉信息。该传感器的设计不仅提升了触觉感知的精度,还为机器人、医疗设备和制造业的智…...
ZYNQ学习记录FPGA(一)ZYNQ简介
一、知识准备 1.一些术语,缩写和概念: 1)ZYNQ全称:ZYNQ7000 All Pgrammable SoC 2)SoC:system on chips(片上系统),对比集成电路的SoB(system on board) 3)ARM:处理器…...
