当前位置: 首页 > news >正文

系统日期如何在页面展示,框架是react或者vue3

  1. 安装插件dayjs或者moment.js

2.使用setInterval(useInterval)或者requestAnimationFrame

react项目中useInterval的代码示例:

import React, {useState } from 'react';
import { useInterval } from "ahooks";
import moment from "moment";
const Datetimes = ({currenttime})=>{const [newtime,cnt]=useState(currenttime);useInterval(() => {cnt(moment().add(1, "seconds").format("YYYY-MM-DD HH:mm:ss"))}, 1000);return <span>{newtime}</span>
}export default Datetimes;

vue3中setInterval示例:

import { dayjs } from 'element-plus';
// 创建定时器
let intervalId;
const time = ref(dayjs().format('YYYY-MM-DD HH:mm:ss'));
onMounted(() => {intervalId = setInterval(() => {time.value = dayjs(time.value).add(1, "seconds").format("YYYY-MM-DD HH:mm:ss");}, 1000)
});
onUnmounted(() => {clearInterval(intervalId);
})

react项目中requestAnimationFrame示例:

const [currentTime, setCurrentTime] = useState(dayjs());const updateClock = () => {setCurrentTime(dayjs()); // 更新时间requestAnimationFrame(updateClock); // 请求下一帧动画};useEffect(() => {requestAnimationFrame(updateClock); // 请求第一帧动画// 卸载组件时停止更新return () => cancelAnimationFrame(updateClock);}, []);
http://www.lryc.cn/news/163359.html

相关文章:

  • (二十二)大数据实战——Flume数据采集之故障转移案例实战
  • 前端小案例3:Flex弹性布局行内元素宽度自适应
  • 纳尼?小说还要用看的?这可以听!无广!
  • 【微服务部署】四、Jenkins一键打包部署NodeJS(Vue)前端项目步骤详解
  • 【前端】禁止别人调试自己的前端页面代码
  • UDP的可靠性传输
  • 科研笔记:TPAMI submission guideline
  • Python文件操作(02):打开文件、读文件、关闭文件
  • C语言访问Mysql
  • 软件设计师(十)网络与信息安全基础知识
  • 蓝桥杯官网填空题(换零钞)
  • JavaFX之Stage
  • 深度翻页导出导致慢SQL,mysqlCPU飙升优化方案
  • 小谈设计模式(1)—总序
  • 【c++】stringstream基础:实现数据类型转换和字符串分割
  • Java基础学习笔记-5
  • 合同交付类项目如何高效管理?
  • 两性养生网站源码 生活类减肥网站源码 健康网模板源码 支持QQ登录和百度主动推送
  • CentOS7安装Jenkins(更改默认运行的端口号8080->16060)
  • Java开发之Mysql【面试篇 完结版】
  • 【实战】十二、自动化测试 —— React17+React Hook+TS4 最佳实践,仿 Jira 企业级项目(二十九)
  • 【人月神话】重新探索人月神话:软件工程的现实与挑战
  • 电阻和电容
  • 01-Java-日志框架
  • 【js】map、filter、reduce、fill(待补充...)
  • 【JPC出版】第二届能源与电力系统国际学术会议 (ICEEPS 2023)
  • 51单片机的简易篮球计分器倒计时仿真设计( proteus仿真+程序+原理图+报告+讲解视频)
  • 医院安全不良事件报告系统源码 PHP+ vue2+element+ laravel8+ mysql5.7+ vscode开发
  • Mybatis -- 读取 DATE 类型字段时可能遇到的问题(夏令时问题)
  • 第10节-PhotoShop基础课程-选区工具