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

react实现动态递增展示数字特效

在可视化展示界面时有一种场景,就是页面在初始化的时候,有些数字展示想要从某个值开始动态递增到实际值,形成一种动画效果。例如:

写一个数字递增的组件,有两种方式:1.固定步长,代码如下:

import {useEffect, useRef, useState} from 'react';const Counter = ({counts, time = 500}) => {  //counts:传入的数字,time: 默认500毫秒之内整个动画完成const [count, setCount] = useState(0);useEffect(() => {const step = counts <= time ? 1 : Math.ceil(counts / time);  // 两种情况:1.总数小于time时,就以每毫秒递增1的形式增加;2.总数大于500,计算出每毫秒至少要递增多少const timer = setInterval(() => { setCount((pre) => (pre + step > counts ? counts : pre + step));}, 1);return () => clearInterval(timer);}, [counts]);return count;}
export default Counter;

2.固定时间,代码如下:

import {useEffect, useRef, useState} from 'react';const Counter = ({counts, time = 500}) => {  //counts:传入的数字,time: 默认500毫秒之内整个动画完成const [count, setCount] = useState(0);useEffect(() => {let startTime = Date.now();let duration = 2000;const timer = setInterval(() => {setCount(() => {//数字增长逻辑:.定时操作let after = Math.ceil((Date.now()-startTime)/duration*counts*100)/100;if(after > counts) {clearInterval(timer);after = counts;}return after;});}, 16);return () => clearInterval(timer);}, [counts]);return count;}
export default Counter;

然后就可以在其他代码中引用该组件了:

Counter counts={500} />

相关文章:

react实现动态递增展示数字特效

在可视化展示界面时有一种场景&#xff0c;就是页面在初始化的时候&#xff0c;有些数字展示想要从某个值开始动态递增到实际值&#xff0c;形成一种动画效果。例如&#xff1a; 写一个数字递增的组件&#xff0c;有两种方式&#xff1a;1.固定步长&#xff0c;代码如下&#x…...

读取.nrrd和.dcm文件格式医学图片可视化与预处理

nrrd数据格式 MITK默认会将医学图像保存为格式为NRRD的图像&#xff0c;在这个数据格式中包含&#xff1a; 1、一个单个的数据头文件&#xff1a;为科学可视化和医学图像处理准确地表示N维度的栅格信息。 2、既能分开又能合并的图像文件。 nrrd_options输出 {u’dimension’:…...

VS CODE中的筛选器如何打开?

最近更新了vscode1.82版本&#xff0c;发现在git管理界面有一个“筛选器”功能&#xff0c;十分好用&#xff0c;后来关掉了&#xff0c;找了好久都没有找到办法打开这个筛选器功能&#xff0c;今天无意中不知道按到了哪个快捷键&#xff0c;打开了&#xff0c;就是下图这个&am…...

vue 多环境文件配置(开发,测试,生产)

1.经常我们在开发时候会有不同环境&#xff0c;要代理的路由等等都会出现不同 配置一下三个文件打包的时候&#xff0c;执行三个不同的指令就会打包不同的环境 npm run build:dev npm run build:test npm run build:prodpackage.json 中配置scripts 指令 以,env.development…...

在服务器上搭建pulseaudio的运行环境,指定其运行目录、状态目录和模块目录

如果想在搭建 PulseAudio 的服务器上指定其运行目录、状态目录和模块目录&#xff0c;可以通过修改 PulseAudio 的配置文件来实现。一般情况下所涉及的配置文件和相关选项如下所示&#xff1a; 1、配置文件路径&#xff1a;通常情况下&#xff0c;PulseAudio 的配置文件位于 /…...

[Qt]QListView 重绘实例之一:背景重绘

0 环境 Windows 11Qt 5.15.2 MinGW x64 1 系列文章 简介&#xff1a;本系列文章&#xff0c;是以纯代码方式实现 Qt 控件的重构&#xff0c;尽量不使用 Qss 方式。 《[Qt]QListView 重绘实例之一&#xff1a;背景重绘》 《[Qt]QListView 重绘实例之二&#xff1a;列表项覆…...

国庆周《Linux学习第二课》

Linux开篇指南针环境安装(第一课)-CSDN博客 Linux详细的环境安装介绍在上面 第一 环境准备过程 安装过程...

6年前的麒麟980依旧可以再战

麒麟980&#xff0c;使用6年后的今天&#xff0c;我对它进行跑分测试。 在bench旗下的VRMark跑分中&#xff0c;麒麟980荣获5023分&#xff0c;同款跑分APP&#xff0c;要知道同一时期的高通骁龙855只有4937分&#xff0c; 打游戏&#xff0c;以和平精英为例&#xff0c;帧率3…...

JS计算任意多边形的面积

计算任意多边形的面积需要使用一些几何数学公式。具体的计算方法取决于多边形的形状和提供的顶点坐标。下面是一个通用的 JavaScript 函数&#xff0c;用于计算任意多边形的面积&#xff0c;假设你提供多边形的顶点坐标数组&#xff1a; function calculatePolygonArea(vertic…...

ios xcode15 navigationController?.navigationBar.isHidden = false无效

xcode 15 用 navigationController?.setNavigationBarHidden(true, animated: false)隐藏navigationBar后&#xff0c;再调用 navigationController?.navigationBar.isHidden false无效 解决 用 navigationController?.navigationBar.isHidden true隐藏navigationBar...

Python二级 每周练习题20

练习一: 日期计算器 设计一款日期计算程序&#xff0c;能否实现下面的功能&#xff1a; (1)要求用户分别输入年、月、日&#xff08;分三次输入&#xff09;&#xff1b; (2)程序自动会根据输入的年月日计算出这一天是这一年的第几天&#xff1b; (3)输出格式为&#xff1a;这…...

深度学习-一个简单的深度学习推导

文章目录 前言1.sigmod函数2.sigmoid求导3.损失函数loss4.神经网络1.神经网络结构2.公式表示-正向传播3.梯度计算1.Loss 函数2.梯度1.反向传播第2-3层2.反向传播第1-2层 3.python代码4.MNIST 数据集 前言 本章主要推导一个简单的两层神经网络。 其中公式入口【入口】 1.sigmod…...

ES写入数据报错:retrying failed action with response code: 429

报错&#xff1a; 使用logstash导入分片数量为9的index发生错误,[logstash.outputs.elasticsearch] retrying failed action with response code: 429 ({"type">"es_rejected_execution_exception", "reason">"rejected execution …...

Redis给Lua脚本的调用

Redis给Lua脚本的调用 Redis为Lua提供了一组内置函数&#xff0c;这些函数可用于执行与Redis数据存储和操作相关的任务。这些内置函数可以在Lua脚本中使用&#xff0c;以便在Redis中执行各种操作。以下是一些常用的Redis Lua内置函数&#xff1a; 主要知道call就好了 redis.ca…...

Spring工具类--ReflectUtils的使用

原文网址&#xff1a;Spring工具类系列--ReflectUtils的使用_IT利刃出鞘的博客-CSDN博客 简介 本文介绍Spring的ReflectUtils的使用。 ReflectUtils工具类的作用&#xff1a;便利地进行反射操作。 Spring还有一个工具类&#xff1a;ReflectionUtils&#xff0c;它们在功能上…...

联盟 | 彩漩 X HelpLook,AI技术赋能企业效率提升

近日&#xff0c;AI 驱动的 PPT 协作分享平台「 彩漩 」与 AI 知识库搭建工具「 HelpLook」&#xff0c;携手为用户工作流注入更多智能和创造力&#xff0c;全面拥抱 AIGC 时代带来的机遇&#xff0c;致力于提供前沿的智能解决方案。 彩 漩 彩漩是一个以 AI 技术为基础、贯彻 …...

MATLAB m文件格式化

记录一个网上查到的目前感觉挺好用的格式化方法。 原链接&#xff1a; https://cloud.tencent.com/developer/article/2058259 压缩包&#xff1a; 链接&#xff1a;https://pan.baidu.com/s/1ZpQ9qGLY7sjcvxzjMPAitw?pwd6666 提取码&#xff1a;6666 下载压缩包&#xf…...

​分拆菜鸟将使阿里巴巴股票迎来新一轮上涨?

来源&#xff1a;猛兽财经 作者&#xff1a;猛兽财经 总结&#xff1a; &#xff08;1&#xff09;阿里巴巴(BABA)最近公布的季度财报显示&#xff0c;该公司有能力实现快速盈利。 &#xff08;2&#xff09;据报道&#xff0c;阿里巴巴正计划分拆菜鸟集团&#xff0c;并将在香…...

Excel 技巧记录-那些复杂的公式和函数

目标表格的关键字在行和列里&#xff0c;匹配源表格的行和列对应的关键字 **具体需求为&#xff1a;**表A叫Total_202308.xlsx&#xff0c;sheet叫摊销前分析&#xff0c;表B叫data.xlsx,sheet叫总部费用&#xff0c;表A的数据里&#xff0c;A列是科目名称&#xff0c;第9行是…...

vue里使用elementui的级联选择器el-cascader进行懒加载的怎么实现数据回显?

需要实现的懒加载回显效果 比如&#xff1a;后端返回数据 广东省/广州市/天河区 &#xff1a;440000000000/440100000000/440106000000&#xff0c;需要我们自动展开到天河区的下一级&#xff0c;效果如下 代码实现 我的实现思路就是拿到 440000000000/440100000000/44010600…...

接口测试中缓存处理策略

在接口测试中&#xff0c;缓存处理策略是一个关键环节&#xff0c;直接影响测试结果的准确性和可靠性。合理的缓存处理策略能够确保测试环境的一致性&#xff0c;避免因缓存数据导致的测试偏差。以下是接口测试中常见的缓存处理策略及其详细说明&#xff1a; 一、缓存处理的核…...

智能在线客服平台:数字化时代企业连接用户的 AI 中枢

随着互联网技术的飞速发展&#xff0c;消费者期望能够随时随地与企业进行交流。在线客服平台作为连接企业与客户的重要桥梁&#xff0c;不仅优化了客户体验&#xff0c;还提升了企业的服务效率和市场竞争力。本文将探讨在线客服平台的重要性、技术进展、实际应用&#xff0c;并…...

C# 类和继承(抽象类)

抽象类 抽象类是指设计为被继承的类。抽象类只能被用作其他类的基类。 不能创建抽象类的实例。抽象类使用abstract修饰符声明。 抽象类可以包含抽象成员或普通的非抽象成员。抽象类的成员可以是抽象成员和普通带 实现的成员的任意组合。抽象类自己可以派生自另一个抽象类。例…...

什么是EULA和DPA

文章目录 EULA&#xff08;End User License Agreement&#xff09;DPA&#xff08;Data Protection Agreement&#xff09;一、定义与背景二、核心内容三、法律效力与责任四、实际应用与意义 EULA&#xff08;End User License Agreement&#xff09; 定义&#xff1a; EULA即…...

Unit 1 深度强化学习简介

Deep RL Course ——Unit 1 Introduction 从理论和实践层面深入学习深度强化学习。学会使用知名的深度强化学习库&#xff0c;例如 Stable Baselines3、RL Baselines3 Zoo、Sample Factory 和 CleanRL。在独特的环境中训练智能体&#xff0c;比如 SnowballFight、Huggy the Do…...

ABAP设计模式之---“简单设计原则(Simple Design)”

“Simple Design”&#xff08;简单设计&#xff09;是软件开发中的一个重要理念&#xff0c;倡导以最简单的方式实现软件功能&#xff0c;以确保代码清晰易懂、易维护&#xff0c;并在项目需求变化时能够快速适应。 其核心目标是避免复杂和过度设计&#xff0c;遵循“让事情保…...

SAP学习笔记 - 开发26 - 前端Fiori开发 OData V2 和 V4 的差异 (Deepseek整理)

上一章用到了V2 的概念&#xff0c;其实 Fiori当中还有 V4&#xff0c;咱们这一章来总结一下 V2 和 V4。 SAP学习笔记 - 开发25 - 前端Fiori开发 Remote OData Service(使用远端Odata服务)&#xff0c;代理中间件&#xff08;ui5-middleware-simpleproxy&#xff09;-CSDN博客…...

return this;返回的是谁

一个审批系统的示例来演示责任链模式的实现。假设公司需要处理不同金额的采购申请&#xff0c;不同级别的经理有不同的审批权限&#xff1a; // 抽象处理者&#xff1a;审批者 abstract class Approver {protected Approver successor; // 下一个处理者// 设置下一个处理者pub…...

【学习笔记】erase 删除顺序迭代器后迭代器失效的解决方案

目录 使用 erase 返回值继续迭代使用索引进行遍历 我们知道类似 vector 的顺序迭代器被删除后&#xff0c;迭代器会失效&#xff0c;因为顺序迭代器在内存中是连续存储的&#xff0c;元素删除后&#xff0c;后续元素会前移。 但一些场景中&#xff0c;我们又需要在执行删除操作…...

Python网页自动化Selenium中文文档

1. 安装 1.1. 安装 Selenium Python bindings 提供了一个简单的API&#xff0c;让你使用Selenium WebDriver来编写功能/校验测试。 通过Selenium Python的API&#xff0c;你可以非常直观的使用Selenium WebDriver的所有功能。 Selenium Python bindings 使用非常简洁方便的A…...