.number {
  font-size: 30px;
  text-align: center;
  padding: 20px;
}

.start {
  display: block;
  margin: 0 auto;
}

function animNumber(from, to) {
    const start = new Date().getTime()
    const loop = () => {
        setTimeout(() => {
            const now = (new Date().getTime()) - start
            const progress = now / 700
            const result = to > from ? Math.floor((to - from) * progress + from) : Math.floor(from - (from - to) * progress)
            const res = progress < 1 ? result : to
            if (res) {
                // update number
                elNum.innerText = res
                console.log(res)
            }
            if (progress < 1) loop()
        }, 90)
    }
    loop()
}


const elNum = document.querySelector('.number');

document.querySelector('.start').addEventListener('click', function () {
  animNumber(100, 4567);
})