js页面显示（超好玩的js页面效果—实现数值的动态变化）

✅ 作者简介：一名普通本科大三的学生             ，致力于提高前端开发能力

✨ 个人主页：前端小白在前进的主页

🔥 系列专栏 ： node.js学习专栏

⭐️ 个人社区 : 个人交流社区

🍀 学习格言: ☀️ 打不倒你的会使你更强！☀️

🔥前言

好兄弟们 
 
  
 
  
 
  
 
  
 
  
 
  
，今天给大家带来一个非常好玩的js小demo











，实现数值的动态变化！这个效果之前在清华大学的官网上见到过(现在他们把这个效果给取消了)
  
  
  
  
  
  
 ，之前觉得这个效果挺好玩的 
  
  
  
  
  
 ，这些天在复习js的时候 


 


 


 


 


 


 
，无意间见到了这效果
 
 
 
 
 
 
，于是写了一个  
   
   
   
   
   
  ，想分享给大家 

 

 

 

 

 

 
，嘻嘻嘻！😁😁😁

⭐️效果如下：

话不多说

 

 

 

 

 

 
，直接给好兄弟们上代码：

🔥HTML文件：

<div class="outer"> <div class="counter-container"> <i class="iconfont icon-Basket-Ball" style="font-size:50px"></i> <div class="counter" data-set="37062"></div> <span>常规赛总得分</span> </div> <div class="counter-container"> <i class="iconfont icon-BasketballHoop" style="font-size:50px"></i> <div class="counter" data-set="10210"></div> <span>常规赛总篮板</span> </div> <div class="counter-container"> <i class="iconfont icon-assistant" style="font-size:50px"></i> <div class="counter" data-set="10045"></div> <span>常规赛总助攻</span> </div> </div>

🔥代码解析：

在这里写了一个大容器包含了三个小容器             ，每个小容器中的数据展示使用data-*属性

(注:data-*用于存储页面或应用程序的私有自定义数据 
 

 
 

 
 

 
 

 
 

 
 

 
，赋予我们在所有 HTML 元素上嵌入自定义 data 属性的能力












，存储的（自定义）数据能够被页面的 JavaScript 中利用                   ，以创建更好的用户体验（不进行 Ajax 调用或服务器端数据库查询）)

我们这里就把我们自定义的数据(37062 
 
 
 
 
 
 
 
 
 
 
 
 
，10210


















，10045)传入             ，以便在js中使用.

🔥css文件：

* { box-sizing: border-box; } .outer { background-color: #8e44ad; color: #fff; font-family: Roboto Mono, sans-serif; display: flex; align-items: center; justify-content: center; height: 350px; overflow: hidden; margin: 0; } .counter-container { display: flex; flex-direction: column; justify-content: center; text-align: center; margin: 30px 50px; } .counter { font-size: 60px; margin-top: 10px; } @media (max-width: 580px) { .outer { flex-direction: column; } }

🔥代码解析:

css文件很简单啦 
 
  
 
  
 
  
 
  
 
  
 
  
，就使用了flex布局











，最后小加了一个媒体查询来适应屏幕尺寸变化
  
  
  
  
  
  
 ，大家自行看吧  
  
  
  
  
  
 。

✨js文件：

let counters = document.querySelectorAll(.counter) //获取到三个counter盒子 counters.forEach(item => { item.innerText = 0 //记录分数变化的变量 
  
  
  
  
  
 ，初始值为0 const updateData = () => { const data = +item.getAttribute(data-set) //获取到元素中绑定的数据 const tmp = +item.innerText //临时变量保存变化一次的数据量 const changeData = data / 200 //设置改变的速率 if(tmp < data) { //如果临时变量的值小于最终数据的值 


 


 


 


 


 


 
，那么就给元素进行数据相加 item.innerText = `${Math.ceil(tmp + changeData)}` //值数相加
 
 
 
 
 
 
，然后进行取整 setTimeout(updateData,1) //定时器传入回调函数目的在于动态变化 } else { item.innerText = data //不满足条件后  
   
   
   
   
   
  ，证明得到了最终数据 

 

 

 

 

 

 
，直接渲染 } } updateData() //调用函数

 

 

 

 

 

 
，启动函数 })

✨代码解析:

数据的动态改变逻辑在这里咯！

首先就要获取到储存数据的三个div             ，然后通过foreach方法遍历我们获取的三个盒子 
 

 
 

 
 

 
 

 
 

 
 

 
，初始的分数是为0的












，因此我们把盒子的innerText设置为了0(注意：这里的0是一个字符串) 随后定义一个更新数据的方法updateData,随后获取到我们之前自定义的数据                   ，在这里有部分朋友看到+item.getAttribute(data-set)估计都懵逼了 
 
 
 
 
 
 
 
 
 
 
 
 
，为啥+符号在前面呢？+代表后面的数字为正数,相当于告诉编译器


















，即将赋值的数值类型为数字类型             ，不要把数字当作字符串去拼接 然后定义一个临时变量tmp 
 
  
 
  
 
  
 
  
 
  
 
  
，目的在于保存item.innerText中变化后的数值











，接下来设置数据变化的速率在这里是除以了200
  
  
  
  
  
  
 ，除以的数据约大 
  
  
  
  
  
 ，那么变化的速率越慢 


 


 


 


 


 


 
，反之则快 随后去做一个判断(让临时量与总量做对比)
 
 
 
 
 
 
，如果临时量小于总量  
   
   
   
   
   
  ，就让临时量tmp与数据变化量changeData相加 

 

 

 

 

 

 
，做一个取整

 

 

 

 

 

 
，如果不满足判断条件             ，直接渲染数据即可(这时的数据已经是最终的数据了,也就是我们的自定义数据) 实现数据的动态变化 
 

 
 

 
 

 
 

 
 

 
 

 
，最核心的还是定时器












，在满足判断条件的作用域中启动定时器                   ，传入回调函数updateData 
 
 
 
 
 
 
 
 
 
 
 
 
，实现1ms调用一次


















，数据变化看着很丝滑.

✨写在最后: js的实现逻辑一步步的来             ，会发现逻辑很清晰 
 
  
 
  
 
  
 
  
 
  
 
  
，希望大家在写js代码的时候











，一步步下手
  
  
  
  
  
  
 ，要不然很容易逻辑混乱 
  
  
  
  
  
 ，以后的话没事会给大家分享一些js小demo 


 


 


 


 


 


 
，一起去搞一些好玩的东西！在娱乐的同时还能提高js的开发能力！！！☀️☀️

如果是詹姆斯的狂热粉
 
 
 
 
 
 
，当大家看到这三个数据的时候  
   
   
   
   
   
  ，就知道这三个数据是老詹的三个标志性数据 

 

 

 

 

 

 
，希望老詹这赛季尽快拿到常规赛得分第一名！！！😀😀

👑书写不易

 

 

 

 

 

 
，希望大家能够给予三连支持             ，期待我更好的文章哟👑