50projects50days知识点-15-incrementing-counter

示例网址：

https://50projects50days.com/projects/incrementing-counter/

http://50projects.tc.cluski.top/50projects50days/incrementing-counter/

效果：

思路：

布局没有什么难的，使用flex布局很容易就实现了。

主要是js对于数字的增加，既可以使用setTimeout也可以使用setInterval

setTimeout：

const counters = document.querySelectorAll('.counter')

counters.forEach(counter => {
    counter.innerText = '0'

    const updateCounter = () => {
        const target = +counter.getAttribute('data-target')
        const c = +counter.innerText

        const increment = target / 200

        if(c < target) {
            counter.innerText = `${Math.ceil(c + increment)}`
            setTimeout(updateCounter, 1)
        } else {
            counter.innerText = target
        }
    }

    updateCounter()
})

setInterval：

let counters = document.querySelectorAll('.counter');

counters.forEach(counter => {
    counter.innerHTML = '0'

    let data = counter.getAttribute('data-target');

    let increment = Math.ceil(data / 200);

    let interval
    let number = 0
    interval = setInterval(() => {
        number = number + increment
        if (number >= data) {
            clearInterval(interval)
            number = data
        }
        counter.innerHTML = number
    }, 1)
})