刚好最近做个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) }
这只是简单的例子而已,实际上还有很多可以拓展的。可以根据具体业务进行拓展。