使用场景
在界面载入的时候，需要根据获取到的数据，实现数字自动变化到数据的数值或动画变化为数据相关的效果（比如数字从0变化到100，电池电量从固定位置变化到一定的位置时的动画）的时候。
主要使用到的方法和属性
JS:setInterval(定时器)、clearInterval（在数据或动画到达指定位置时停止）、innerText(配合定时器输入文本)
CSS:transition(使用过渡效果实现动画，比较简单)、animate(使用动画效果实现动画，可以用，但没必要，对于复杂的动画时比较实用)
实现思路
1.数字自动增长
我目前想到的唯一方法就是在setInterva方法中使用innerText输入数值，然后当数值和数据一致的时候停止setInterval，以达到数值变化到指定数据的效果。
实现代码
var yuanshu = 0 //数据变化前的初始数值 const re = 50 //获取到的数据 var numAdd = setInterval(numAdd,10) function numAdd(){ yuanshu = yuanshu + 1 //数据变化的间隔 document.getElementById("num").innerText = yuanshu if(yuanshu == re){ //检验数值是否到达数据的数值 window.numStop()
}
} function numStop(){ //停止计时器 window.clearInterval(numAdd) }
2.动画根据数值自动变化
这个其实除了使用css的过渡和动画，我最初想到使用JS的定时器不断修改元素的样式来实现动画的效果，但经过实践，效果实在比不上css，或许经过调整还是可以实现看起来比较流畅的效果，但属实有点脱裤子放屁的意思了。因此这里就不做介绍了（其实就是把上面的innerText修改成修改样式）。
这里就主要以电池电量增加作为例子好了。（效果大概就像下面这张图）
电池电量变化的动画其实算比较单一的，只需要改变绿色容器的宽度（竖直摆放的话也可以时高度），只需要通过JS访问绿色容器相关的元素并改变宽度（高度）为指定的百分比就可以（注意，这里绿色容器的父容器请务必设置固定的宽度，我怕容易出事儿）。
实现代码（包含了数字增长的代码）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.content{
width: 200px;
height: 50px;
background-color: gray;
}
#num{
width: 0px;
height: inherit;
background-color: aquamarine;
color: white;
transition: width 2s;
}
</style>
</head>
<body>
<div id = "content" class="content">
<div id="num">
</div>
</div>
<script type="text/javascript">
var w = parseInt(window.getComputedStyle(content,null).width)
var yuanshu = 0
const re = 150//获取到的数据
window.onload = function(){ //将计算后的过渡时间和宽度计算完赋给绿色容器
document.getElementById("num").style.transition = "width " +re/w+"s"
document.getElementById("num").style.width = re/w*100 + "%"
}
var numAdd = setInterval(numAdd,re/w)//下面是数字增长的代码，可以不用看了
function numAdd(){
yuanshu = yuanshu + 1
document.getElementById("num").innerText = yuanshu
if(yuanshu == re){
window.numStop()
}
}
function numStop(){
window.clearInterval(numAdd)
}
</script>
</body>
</html>
第一次写这种东西，有看不懂的话。。。。只能说小生不才请见谅。如果可以的话请在评论区留下您的建议和问题。
内容来源于网络如有侵权请私信删除
文章来源: 博客园
- 还没有人评论，欢迎说说您的想法！
客服
