数字滚动原生js的三种方式 - JS笔记

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的缺点要从浏览器的的进程说起了
  • 对于setInterval和setTimeout对浏览器的影响

优化一

对于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>

js

JS判断PC端和移动端并执行 - JS笔记

2021-2-2 23:38:52

WP插件

Simple Local Avatars - 简单的本地头像wordpress插件

2020-3-31 1:14:24

⚠️
Npcink上的部份代码及教程来源于互联网,仅供网友学习交流,若您喜欢本文可附上原文链接随意转载。
无意侵害您的权益,请发送邮件至 link@baimu.org 或点击右侧 私信:Muze 反馈,我们将尽快处理。
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索