建设一个新的网站需要准备什么,app和网站开发区别,帮别人做设计图的网站,免费asp主机网站在可视化展示界面时有一种场景#xff0c;就是页面在初始化的时候#xff0c;有些数字展示想要从某个值开始动态递增到实际值#xff0c;形成一种动画效果。例如#xff1a; 写一个数字递增的组件#xff0c;有两种方式#xff1a;1.固定步长#xff0c;代码如下#x… 在可视化展示界面时有一种场景就是页面在初始化的时候有些数字展示想要从某个值开始动态递增到实际值形成一种动画效果。例如 写一个数字递增的组件有两种方式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} /
