✅ 作者简介:一名普通本科大三的学生,致力于提高前端开发能力
✨ 个人主页:前端小白在前进的主页
系列专栏 : 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 调用或服务器端数据库查询))
我们这里就把我们自定义的数据(370621021010045)传入,以便在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的开发能力!!!☀️☀️

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


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