钱数递增效果

网站余额动态展示效果

weixin_34088598

于 2017-11-06 09:51:00 发布

阅读量103

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/xiaohanblog/p/7718689.html

本文介绍了一种使用HTML和JavaScript实现网站余额从初始值平滑增加到目标值的方法。通过控制时间间隔，可以让页面上的余额数值平滑变化，增强用户体验。

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

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)
    }

转载于:https://www.cnblogs.com/xiaohanblog/p/7718689.html