JavaScript如何实现数值的动态变化
这篇“JavaScript如何实现数值的动态变化”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“JavaScript如何实现数值的动态变化”文章吧。
创新互联建站专注于营口网站建设服务及定制,我们拥有丰富的企业做网站经验。 热诚为您提供营口营销型网站建设,营口网站制作、营口网页设计、营口网站官网定制、小程序设计服务,打造营口网络公司原创品牌,更为您提供营口网站排名全网营销落地服务。
效果如下:
话不多说,直接上代码:
HTML文件:
常规赛总得分常规赛总篮板常规赛总助攻
代码解析:
在这里写了一个大容器包含了三个小容器,每个小容器中的数据展示使用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
调用一次,数据变化看着很丝滑.
以上就是关于“JavaScript如何实现数值的动态变化”这篇文章的内容,相信大家都有了一定的了解,希望小编分享的内容对大家有帮助,若想了解更多相关的知识内容,请关注创新互联行业资讯频道。
当前题目:JavaScript如何实现数值的动态变化
网页URL:http://azwzsj.com/article/gedsji.html