100+</div> <div class="number">200+</div> <div class="number">300+</div> //数字转动 const numberVFXElements = doc..."/>

css 写一个数字特效,该数字随机减掉一个值(最大为自身),然后3秒特效期间一直变动数值加上去,3秒过后就加值回到本身

72次阅读
没有评论
   <div class="number">100+</div>
<div class="number">200+</div>
<div class="number">300+</div>



 //数字转动
    const numberVFXElements = document.querySelectorAll('.numberVFX');
    function getRandomValue(max) {
      return Math.floor(Math.random() * (max + 1));
    }
    numberVFXElements.forEach((numberVFXElement) => {
      const originalValue = parseInt(numberVFXElement.textContent, 10);
      const hasPlusSign = numberVFXElement.textContent.includes("+");
      const decreasedValue = originalValue - getRandomValue(originalValue);
      const newValue = decreasedValue + (hasPlusSign ? "+" : "");
      numberVFXElement.textContent = newValue;
      numberVFXElement.classList.add('numberVFX');
      const interval = setInterval(() => {
        const currentValue = parseInt(numberVFXElement.textContent, 10);
        const newValue = currentValue + getRandomValue(originalValue - currentValue);
        numberVFXElement.textContent = newValue + (hasPlusSign ? "+" : "");
      }, 400);

      setTimeout(() => {
        numberVFXElement.textContent = originalValue + (hasPlusSign ? "+" : "");
        clearInterval(interval);
      }, 3000);
    });
正文完
 
评论(没有评论)