<div class="counter" data-set="10045"></div>
<span>常规赛总助攻</span>
</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() //调用函数，启动函数
})
**✨代码解析:**
>
> 数据的动态改变逻辑在这里咯！
>
>
> 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的开发能力！！！☀️☀️
如果是詹姆斯的狂热粉，当大家看到这三个数据的时候，就知道这三个数据是老詹的三个标志性数据，希望老詹这赛季尽快拿到常规赛得分第一名！！！😀😀
---
>
> 👑书写不易，希望大家能够给予三连支持，期待我更好的文章哟👑
>
>
>
**既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上物联网嵌入式知识点，真正体系化！**
**由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、电子书籍、讲解视频，并且后续会持续更新**
**[如果你需要这些资料，可以戳这里获取](https://gitee.com/vip204888)**
