钱数递增效果

网站实现余额从初始值在一定时间内递增到要显示的目标值的效果

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)
    }
posted @ 2017-11-06 09:51  日含  阅读(211)  评论(0编辑  收藏  举报