数字滚动动画
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)