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

转载

mb5fdcad8719a20 2021-07-19 19:37:00

文章标签 数据 css html 电池电量 javascript 文章分类 Html/CSS 前端开发

关于前端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修改成修改样式）。

　　这里就主要以电池电量增加作为例子好了。（效果大概就像下面这张图）

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

　　电池电量变化的动画其实算比较单一的，只需要改变绿色容器的宽度（竖直摆放的话也可以时高度），只需要通过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>