html js css倒计时,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();

});

总结

以上是生活随笔为你收集整理的html js css倒计时,js+css3倒计时动画特效的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。