数字从0增加到指定数字的动画效果

这里使用的是next,js 框架

  import {React,{useEffect,useState,useRef}} from "react"
  
  function Default() {
     const [total,setTotal] = useState(155342) // 定义total 变量，数据类型为 number
     
     useEffect(()=>{
       numZeroIncrease()
     },[total]) // 监听 total变量的变化
     
     // 数字从0增加动画效果
    const numZeroIncrease = () => {
       const awardNode = document.querySelectorAll("#award_total_node"); // 获取到 奖池累计节点
       if (awardNode?.length) {
          awardNode.forEach((node) => {
            node.innerText = 0;
            const updateNumber = () => {
              // 获取最大值
              const maxNum = fishPool; // 奖池累计数量
              const currentVal = Number(node.innerText); // 获取当前值
              const increaseNum = maxNum / 200; // 每次设置的增加值

              // 当前值 小于 最大值时，执行操作
              if (currentVal < maxNum) {
                node.innerText = `${Math.ceil(currentVal + increaseNum)}`;
                setTimeout(updateNumber, 1); // 设置延迟，1ms 执行一次
              } else {
                node.innerText = maxNum;
              }
            };
            updateNumber();
          });
       }
    };
    
    return(
       <div className={root_node}>
         <section id="award_total_node">{total}</section>
       </div>
    )
  }
  export default Default