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倒计时动画特效的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。