JavaScript:实现数值的动态变化
效果如下:
话不多说,直接上代码:
HTML文件:
<div class="outer">
<div class="counter-container">
<i style="font-size:50px"></i>
<div data-set="37062"></div>
<span>常规赛总得分</span>
</div>
<div class="counter-container">
<i style="font-size:50px"></i>
<div data-set="10210"></div>
<span>常规赛总篮板</span>
</div>
<div class="counter-container">
<i style="font-size:50px"></i>
<div 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' //记录分数变化的变量,初始值为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的开发能力!
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanffikg
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01