<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);
});
正文完