超好玩的js页面效果---实现数值的动态变化

✅ 作者简介：一名普通本科大三的学生，致力于提高前端开发能力
✨ 个人主页：前端小白在前进的主页
🔥 系列专栏 ： node.js学习专栏
⭐️ 个人社区 : 个人交流社区
🍀 学习格言: ☀️ 打不倒你的会使你更强！☀️

🔥前言

好兄弟们，今天给大家带来一个非常好玩的js小demo，实现数值的动态变化！这个效果之前在清华大学的官网上见到过(现在他们把这个效果给取消了)，之前觉得这个效果挺好玩的，这些天在复习js的时候，无意间见到了这效果，于是写了一个，想分享给大家，嘻嘻嘻！😁😁😁

⭐️效果如下：

话不多说，直接给好兄弟们上代码：

🔥HTML文件：

<divclass="outer"><divclass="counter-container"><iclass="iconfont icon-Basket-Ball"style="font-size:50px"></i><divclass="counter"data-set="37062"></div><span>常规赛总得分</span></div><divclass="counter-container"><iclass="iconfont icon-BasketballHoop"style="font-size:50px"></i><divclass="counter"data-set="10210"></div><span>常规赛总篮板</span></div><divclass="counter-container"><iclass="iconfont icon-assistant"style="font-size:50px"></i><divclass="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'//记录分数变化的变量，初始值为0constupdateData=()=>{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()//调用函数，启动函数})

✨代码解析:

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

1. 首先就要获取到储存数据的三个div，然后通过foreach方法遍历我们获取的三个盒子，初始的分数是为0的，因此我们把盒子的innerText设置为了0(注意：这里的0是一个字符串)
2. 随后定义一个更新数据的方法updateData,随后获取到我们之前自定义的数据，在这里有部分朋友看到+item.getAttribute(data-set)估计都懵逼了，为啥+符号在前面呢？+代表后面的数字为正数,相当于告诉编译器，即将赋值的数值类型为数字类型，不要把数字当作字符串去拼接
3. 然后定义一个临时变量tmp，目的在于保存item.innerText中变化后的数值，接下来设置数据变化的速率在这里是除以了200，除以的数据约大，那么变化的速率越慢，反之则快
4. 随后去做一个判断(让临时量与总量做对比)，如果临时量小于总量，就让临时量tmp与数据变化量changeData相加，做一个取整，如果不满足判断条件，直接渲染数据即可(这时的数据已经是最终的数据了,也就是我们的自定义数据)
5. 实现数据的动态变化，最核心的还是定时器，在满足判断条件的作用域中启动定时器，传入回调函数updateData，实现1ms调用一次，数据变化看着很丝滑.

✨写在最后:
js的实现逻辑一步步的来，会发现逻辑很清晰，希望大家在写js代码的时候，一步步下手，要不然很容易逻辑混乱，以后的话没事会给大家分享一些

js

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

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

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