关于前端web使用CSS和JavaScript实现数字自动增长和部分效果动画自动变化的效果

使用场景

　　在界面载入的时候，需要根据获取到的数据，实现数字自动变化到数据的数值或动画变化为数据相关的效果（比如数字从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访问绿色容器相关的元素并改变宽度（高度）为指定的百分比就可以（注意，这里绿色容器的父容器请务必设置固定的宽度，我怕容易出事儿）。

　　实现代码（包含了数字增长的代码）

第一次写这种东西，有看不懂的话。。。。只能说小生不才请见谅。如果可以的话请在评论区留下您的建议和问题。