数字滚动原生js的三种方式

最新推荐文章于 2024-07-16 17:26:59 发布

shenzhipeng1023

最新推荐文章于 2024-07-16 17:26:59 发布

阅读量1.5w

点赞数 11

文章标签： js计时器优化 setInterval和setTimeout运行对比性能优化 js动画

本文链接：https://blog.csdn.net/jason_renyu/article/details/79283665

版权

数字滚动原生js的三种方式

让数字滚动的效果简单用计时器setInterval就能轻易的实现,例如

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<h1 id="numBox" ></h1>
	</body>
	<script type="text/javascript">
		function numRunFun(num, maxNum){
			var numBox = document.getElementById("numBox");
			var num = num;
			var maxNum = maxNum;
			var timer = setInterval(function(){
				num++; // 调节速度
				if(num >= maxNum){
					numBox.innerHTML = maxNum;
					clearInterval(timer);
				} else {
					numBox.innerHTML = ~~(num);
				}
			},100); // 也可以调节速度
		}
		
		// 运行 
		 numRunFun(0, 10);
	</script>
</html>

对于setInterval的缺点要从浏览器的的进程说起了, 可以查看: 从浏览器多进程到JS单线程，JS运行机制

对于setInterval和setTimeout对浏览器的影响, 还可以查看: js中setTimeout和setInterval性能详解

对于setInterval的缺点,所以要用setTimeout来模拟setInterval

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<h1 id="numId"></h1>
	</body>
	<script type="text/javascript">
		/**
		 * 数字滚动
		 * @param {Object} num
		 * @param {Object} maxNum
		 */
		function numRunFun(num, maxNum) {		
			var num = num;
			var maxNum = maxNum;
			var numId = document.getElementById("numId");
			// 利用setTimeout模拟Interval
			function numSlideFun(){
				num++; // 调节速度 可以小数
				if(num >= maxNum){
					numId.innerHTML = maxNum;
					return;
				}else{
					numId.innerHTML = ~~(num);
					setTimeout(function(){	// 利用setTimeout模拟setInterval				
						return numSlideFun();
					},100);// 也可以调节速度				
				}
			}
			numSlideFun();
		}
		// 运行
		numRunFun(0, 10);
	</script>
</html>

对于H5有了新的解决方案 window.requestAnimationFrame() 方法,为js动画的首选

<!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+=1; // 速度的计算可以为小数
				if(numText >= maxNum){
					numText = maxNum;	
					cancelAnimationFrame(golb);
				}else {
					golb = requestAnimationFrame(numSlideFun);
				}
				numBox.innerHTML = ~~(numText)
				
			}
			numSlideFun();
		}
		// 运行
		numRunFun(0,10)
	</script>
</html>

对于window.requestAnimationFrame的讲解可以查看 window.requestAnimationFrame讲解

shenzhipeng1023

关注

11
点赞
踩
14

收藏

觉得还不错? 一键收藏
0
评论
数字滚动原生js的三种方式

数字滚动原生js的三种方式让数字滚动的效果简单用计时器setInterval就能轻易的实现,例如<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <h1...
复制链接

扫一扫