<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1 id="num" ></h1>
</body>
<script type="text/javascript">
var numBox = document.getElementById('num');
/**
* 数字滚动
* @param {Object} num 开始值
* @param {Object} maxNum 最大值,最终展示的值
*/
function numRunFun(num,maxNum){
var numText = num;
var golb; // 为了清除requestAnimationFrame
function numSlideFun(){
numText+=10000; // 速度的计算可以为小数
if(numText >= maxNum){
numText = maxNum;
cancelAnimationFrame(golb);
}else {
golb = requestAnimationFrame(numSlideFun);
}
numBox.innerHTML = ~~(numText)
}
numSlideFun();
}
// 运行
numRunFun(0,99000)
</script>
</html>
原生实现数字滚动效果，H5
猜你喜欢
转载自www.cnblogs.com/baixiaoxiao/p/11243083.html
今日推荐
周排行