【相关推荐：javascript视频教程、web前端】
效果如下：
话不多说，直接上代码：
html文件：
ee9ceb6a8992b0406a673fa9705c68bb 2139746a6600ee382437a8177dce25c3 365e18d603683c372b3167e022dbb38e72ac96585ae54b6ae11f849d2649d9e6 7079632b5086dc5f5419c081385502fe16b28748ea4df4d9c2150843fecfba68 45a2772a6b6107b401db3c9b82c049c2常规赛总得分54bdf357c58b8a65c66d7c19c8e4d114 16b28748ea4df4d9c2150843fecfba68 2139746a6600ee382437a8177dce25c3 e5b0a9fc261e3d906094d748d16fa5db72ac96585ae54b6ae11f849d2649d9e6 98eda80b1b9ac62a2d785ab8c554ed9016b28748ea4df4d9c2150843fecfba68 45a2772a6b6107b401db3c9b82c049c2常规赛总篮板54bdf357c58b8a65c66d7c19c8e4d114 16b28748ea4df4d9c2150843fecfba68 2139746a6600ee382437a8177dce25c3 395ecd361dfcc77c8c063938d656cd2a72ac96585ae54b6ae11f849d2649d9e6 377b9ab4e0a747c567b791a4251285f416b28748ea4df4d9c2150843fecfba68 45a2772a6b6107b401db3c9b82c049c2常规赛总助攻54bdf357c58b8a65c66d7c19c8e4d114 16b28748ea4df4d9c2150843fecfba68 16b28748ea4df4d9c2150843fecfba68
代码解析：
在这里写了一个大容器包含了三个小容器，每个小容器中的数据展示使用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的开发能力！
【相关推荐：javascript视频教程、web前端】
以上就是实例javascript之实现数值的动态变化的详细内容。