数字滚动动画

flyKot2025/03/03
营业额: ¥0


核心代码

   // 旧数字,用于展示过程
    const odv = old_val.value
    // 总共动画时长
    const duration = 1000
    // 每一步的时间间隔 
    const stepTime = 50
    // 总步数
    const step_count = duration / stepTime
    // 新值和旧值的差
    const diff_count = newVal - odv
    // 每一步增加的值 
    const every_step_num = Math.ceil(diff_count / step_count)
    let count = odv
    const inverLoop = setInterval(() => {
        count += every_step_num; const finish = () => {
            count = newVal;
            old_val.value = count;
            clearInterval(inverLoop)
        }    // 新值更大时,当超过或等于新值时停止  
        if (every_step_num >= 0 && count >= newVal) { finish() }    // 当旧值更大时,小于等于新值时停止 
        if (every_step_num < 0 && count <= newVal) { finish() }
        jump_count.value = count
    }, stepTime)