js字体叠加效果

刚好最近做个pc端官网项目,内容展示不是很丰富,于是就想着给加点效果,就在数字展示上面做了手脚

<label id="num1" data-to="3000" data-speed="1500">0</label><label>+</label>
numAdd("num1");
//数字叠加效果
function numAdd(dom) {
    const numD = document.getElementById(dom)
    var num = numD.getAttribute("data-to")
    var time = numD.getAttribute("data-speed")
    var numTime = num / time
    var i = 1
    var timer = setInterval(function () {
        if (i == num) {
            clearInterval(timer)
        }
        //如果大于500每次加10,否则每次加1
        if(num-numD.innerHTML>300){
            i+=10;
            numD.innerHTML = i++;
        }else{
            numD.innerHTML = i++;
        }
        
    }, numTime)
}

这只是简单的例子而已,实际上还有很多可以拓展的。可以根据具体业务进行拓展。

 

posted @ 2021-01-28 11:37  超哥20  阅读(246)  评论(0编辑  收藏  举报