关于前端:jsVue实现数字金额滚动动画

实现成果

数字金额定时滚动减少，最初展现成字符串格局

代码如下：

<span class="data-add-rate" :dataValue="num">{{num}}</span>

<script>
    ...
    methods:{
        autoAdd(sel){
            let times = 0;
            let total = 30;
            let $sel = $(sel);
            let intHand = window.setInterval(function(){
                $sel.each(function(){
                    let $this = $(this);
                    let data = parseFloat($this.attr("dataValue"));
                    let number = parseFloat(data*times/total);
                    $this.text(app.getString(number));
                    //app.getString()是将number转换位字符串的函数
                })
                if(times === total){
                    window.clearInterval(intHand);
                }else{
                    times++;
                }
            },20);
        }
       //调用时
       this.autoAdd('.data-add-rate');
    }
    ...
</script>