网页随机跳动数字

最新推荐文章于 2023-09-23 10:11:44 发布

小刘码农

最新推荐文章于 2023-09-23 10:11:44 发布

阅读量188

点赞数

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/m0_73188161/article/details/132899479

版权

html+js：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
	<div class="sju">
				<div class="goods">
				       <img src="img/xiaoniuydianniu/dit.png" width="140px"/>
					   <h2 class="counter" id="my-numbr">7000</h2><div class="wenzdaxiaoshangxia12">KM</div>
					   <div class="quaq">全球累计骑行路程</div>
					   	<script>
						   addNumber(7000, 456000, 'my-numbr');
							
						   function addNumber(start, end, id){
								   var o = document.getElementById(id);
								   var i = start;
								   var Interval;
								   if(i < end){
									   Interval = setInterval(function(){
										   i += 2,3,5,4; // 设置每次增加的动态数字，可调整
										   if(i > end) {
											   clearInterval(Interval); // 清除setInterval的time，这个方法w3c可具体查看文档
											   o.innerHTML = end.toLocaleString(); // 此赋值是为了避免最后一次增加过后的数据和真实数据不同
											   i = 0;
										   } else {
											   o.innerHTML = i.toLocaleString();
										   }
									   }, 300); // 数据跳转的速度控制
								   }
							   }
					   	</script>
				   </div>
				<div class="goods">
				       <img src="img/icon-co21.svg" width="200px" class="shangxia" id="shangx"/>
					   <div class="shangl">
						   <h2 class="counter" id="my-number">2000</h2><div class="wenzdaxiaoshangxia">KG</div>
						   <div class="quaq">共减少碳排放</div>
						   <script>
							   addNumber(2000, 4560000, 'my-number');
								
							   function addNumber(start, end, id){
									   var o = document.getElementById(id);
									   var i = start;
									   var Interval;
									   if(i < end){
										   Interval = setInterval(function(){
											   i += 2,3,5,4; // 设置每次增加的动态数字，可调整
											   if(i > end) {
												   clearInterval(Interval); // 清除setInterval的time，这个方法w3c可具体查看文档
												   o.innerHTML = end.toLocaleString(); // 此赋值是为了避免最后一次增加过后的数据和真实数据不同
												   i = 0;
											   } else {
												   o.innerHTML = i.toLocaleString();
											   }
										   }, 300); // 数据跳转的速度控制
									   }
								   }
						   </script>
					   </div>
				   </div>
			</div>
			<div class="sju2">
				<div class="goods">
				       <img src="img/xiaoniuydianniu/4.png" width="140px" class="zduiqi"/>
					   <h2 class="counter" id="number">1010</h2><div class="wenzdaxiaoshangxia">人</div>
					   <div class="quaq">今日骑行总人数</div>
					   <script>
						   addNumber(1010, 100000, 'number');
							
						   function addNumber(start, end, id){
								   var o = document.getElementById(id);
								   var i = start;
								   var Interval;
								   if(i < end){
									   Interval = setInterval(function(){
										   i += 2,3,5,4; // 设置每次增加的动态数字，可调整
										   if(i > end) {
											   clearInterval(Interval); // 清除setInterval的time，这个方法w3c可具体查看文档
											   o.innerHTML = end.toLocaleString(); // 此赋值是为了避免最后一次增加过后的数据和真实数据不同
											   i = 0;
										   } else {
											   o.innerHTML = i.toLocaleString();
										   }
									   }, 300); // 数据跳转的速度控制
								   }
							   }
					   </script>
				   </div>
				<div class="goods">
				       <img src="img/xiaoniuydianniu/5.png" width="140px" class="shangx"/>
					   <h2 class="counter" id="numbe">3000</h2><div class="wenzdaxiaoshangxia">棵</div>
					   <div class="quaq">相当于种植梭梭树</div>
					   <script>
						   addNumber(3000, 45600, 'numbe');
							
						   function addNumber(start, end, id){
								   var o = document.getElementById(id);
								   var i = start;
								   var Interval;
								   if(i < end){
									   Interval = setInterval(function(){
										   i += 2,3,5,4; // 设置每次增加的动态数字，可调整
										   if(i > end) {
											   clearInterval(Interval); // 清除setInterval的time，这个方法w3c可具体查看文档
											   o.innerHTML = end.toLocaleString(); // 此赋值是为了避免最后一次增加过后的数据和真实数据不同
											   i = 0;
										   } else {
											   o.innerHTML = i.toLocaleString();
										   }
									   }, 300); // 数据跳转的速度控制
								   }
							   }
					   </script>
				   </div>
			</div>
		</div>
<body>
</body>
</html>

js代码：

<script>
						       addNumber(7000, 456000, 'my-numbr');
							
						   function addNumber(start, end, id){
								   var o = document.getElementById(id);
								   var i = start;
								   var Interval;
								   if(i < end){
									   Interval = setInterval(function(){
										   i += 2,3,5,4; // 设置每次增加的动态数字，可调整
										   if(i > end) {
											   clearInterval(Interval); // 清除setInterval的time，这个方法w3c可具体查看文档
											   o.innerHTML = end.toLocaleString(); // 此赋值是为了避免最后一次增加过后的数据和真实数据不同
											   i = 0;
										   } else {
											   o.innerHTML = i.toLocaleString();
										   }
									   }, 300); // 数据跳转的速度控制
								   }
							   }
					   	</script>