js制作的倒计时特效

“倒计时”这一短语来源于1927年德国的幻想故事片《月球少女》，在这部影片中，导演弗里兹为了增加艺术效果，扣人心弦，在火箭发射的镜头里设计了“9、8、7、……3、2、1”点火的发射程序。这个程序得到火箭专家们的一致赞许，认为它十分准确清楚科学地突出火箭发射的时间越来越少，使人们产生火箭发射前的紧迫感。此后“倒计时”被普遍采用，而且超越了使用范围，成为一个适用性极强，适用范围极广的词语。

10，9，8，7，6，5，4，3，2，1发射，倒计时是常用需求，收集一些倒计时特效供大家参考。

1.第一种数字摇摆出现的效果：

在线预览地址：js数字倒计时特效

第二种：

倒计时数字像沙子一样散去的效果：

在线浏览地址 js制作的数字倒计时特效，数字像沙子一样散去

第三种，这一种我也没看懂，到底怎么回事，但是竟然是3D的，你们知道的研究下吧

在线预览地址：js生成的倒计时树模型

代码赏析：

const nums = document.querySelectorAll('.nums span')
const counter = document.querySelector('.counter')
const final = document.querySelector('.final')
const replay = document.querySelector('#replay')

runAnimation()
function runAnimation(){
    nums.forEach((num, i) =>{
        const nextToLast = nums.length - 1

        num.addEventListener('animationend', (e) =>{
            if(e.animationName === 'goIn' && i !== nextToLast){
                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')
                final.classList.add('show')
            }
        })
    })
}

function resetAnimation(){
    counter.classList.remove('hide')
    final.classList.remove('show')

    nums.forEach((num) =>{
        num.classList.value = ''
    })
    
    nums[0].classList.add('in')
}

replay.addEventListener('click', () =>{
    resetAnimation()
    runAnimation()
})