钱数递增效果
网站实现余额从初始值在一定时间内递增到要显示的目标值的效果
html 代码:
<h1><span>$</span><span id="money"></span></h1>
js 代码
const moneyDom = document.getElementById('money');
moneyIncrease(moneyDom, 23456, 0, 2000, 0);
function moneyIncrease (elem, endMoney, startMoney, duration, decimal) {
//DOM元素,要显示的金额,初始金额,时间,小数位数
let startTime = 0;
let timeDiff = 0;
let money = 0;
let dec = Math.pow(10, decimal);
function changeAni (timestamp) {
timeDiff = timestamp - startTime;
money = startMoney+ (endMoney - startMoneyl) * (timeDiff / duration);
money = (money > endMoney) ? endMoney : money;
money = Math.floor(money * dec) / dec;
elem.innerHTML = money.toFixed(decimal);
timeDiff < duration && requestAnimationFrame(changeAni)
}
requestAnimationFrame(changeAni)
}