html倒计时动画,js+css3倒计时动画特效

js代码

const nums = document.querySelectorAll('.nums span');

const counter = document.querySelector('.counter');

const finalMessage = document.querySelector('.final');

const replay = document.getElementById('replay');

runAnimation();

function resetDOM() {

counter.classList.remove('hide');

finalMessage.classList.remove('show');

nums.forEach(num => {

num.classList.value = '';

});

nums[0].classList.add('in');

}

function runAnimation() {

nums.forEach((num, idx) => {

const penultimate = nums.length - 1;

num.addEventListener('animationend', (e) => {

if(e.animationName === 'goIn' && idx !== penultimate){

num.classList.remove('in');

num.classList.add('out');

} else if (e.animationName === 'goOut' && num.nextElementSibling){

num.nextElementSibling.classList.add('in');

} else {

counter.classList.add('hide');

finalMessage.classList.add('show');

}

});

});

}

replay.addEventListener('click', () => {

resetDOM();

runAnimation();

});