数字金额滚动动画

你离优秀差多少

已于 2023-05-30 08:43:53 修改

阅读量661

点赞数

分类专栏：原生js / jquery 文章标签： javascript 前端 vue.js

于 2022-11-14 09:43:23 首次发布

本文链接：https://blog.csdn.net/weixin_45891332/article/details/127841358

版权

原生js / jquery 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

方法一、js

<template>
  <div>
    <div @click="this.numFun(0,520)">滚动</div>
   <div>{{amount}}</div>
  </div>
</<template>


<script>
export default {
  data () {
  return {
    amount: 0
  }
}
methods: {
    //金额变动动画
    numFun(startNum,maxNum) {
      var that = this
      let numText = startNum;
      let golb; // 为了清除requestAnimationFrame
      function numSlideFun(){ // 数字动画
          numText+=5; // 速度的计算可以为小数 。数字越大，滚动越快
          if(numText >= maxNum){
              numText = maxNum;
              cancelAnimationFrame(golb);
          }else {
              golb = requestAnimationFrame(numSlideFun);
          }
        that.amount=numText
        // console.log(numText)
      }
       numSlideFun(); // 调用数字动画
    }
  }
}

方法二、vue2下载插件

npm官网：https://www.npmjs.com/package/vue-count-to

npm install vue-count-to

<template>
   <div class="count-to">
     <div>
       <CountTo :startVal='startVal' :endVal='endVal' :duration='duration' />
     </div>
   </div>
</template>
<script>
import CountTo from 'vue-count-to'//引入
export default {
  data() {
    return {
      startVal: 0,//开始
      endVal: 100,//结束
      duration: 3000,//持续时间
      timer: null
    }
  },
  components: {//注册
    CountTo
  },
  mounted(){
    this.timer = setInterval(() => {
      this.endVal = this.endVal * 2
    }, 4000)
  },
  destroyed() {
    clearInterval(this.timer)
  },
}
</script>
<style scoped>
.count-to span {
  font-size: 30px;
}
.count-to > div:nth-of-type(1) > span {
  color: red;
}
</style>

方法三、jQuery

<body>
	<div class="num">
       <p style="color: #FFAC36;"><i>1997</i><span>年</span></p>
	</div>
</body>
<script src="js/numscroll.js"></script>//引入numscroll.js
<script type="text/javascript">
$(document).ready(function () {
	$(".num p i").numScroll({
		time:20000
	});
})
</script>

numscroll.js

/*!
 * jquery.numscroll.js -- 数字滚动累加动画插件  (Digital rolling cumulative animation)
 * version 1.0.0
 * 2018-09-22
 * author: KevinTseng < 921435247@qq.com@qq.com >
 * 文档:  https://github.com/chaorenzeng/jquery.numscroll.js.git
 * QQ交流群: 739574382
 */

(function($) {
    
    function isInt(num) {
        //作用:是否为整数
        //返回:true是 false否
        var res = false;
        try {
            if(String(num).indexOf(".") == -1 && String(num).indexOf(",") == -1) {
                res = parseInt(num) % 1 === 0 ? true : false;
            }
        } catch(e) {
            res = false;
        }
        return res;
    }

    function isFloat(num) {
        //作用:是否为小数
        //返回:小数位数(-1不是小数)
        var res = -1;
        try {
            if(String(num).indexOf(".") != -1) {
                var index = String(num).indexOf(".") + 1; //获取小数点的位置
                var count = String(num).length - index; //获取小数点后的个数
                if(index > 0) {
                    res = count;
                }
            }
        } catch(e) {
            res = -1;
        }
        return res;
    }

    $.fn.numScroll = function(options) {
        
        var settings = $.extend({
            'time': 1500,
            'delay': 0
        }, options);
        
        return this.each(function() {
            var $this = $(this);
            var $settings = settings;
            
            var num = $this.attr("data-num") || $this.text(); //实际值
            var temp = 0; //初始值
            $this.text(temp);
            var numIsInt = isInt(num);
            var numIsFloat = isFloat(num);
            var step = (num / $settings.time) * 10; //步长
            
            setTimeout(function() {
                var numScroll = setInterval(function() {
                    if(numIsInt) {
                        $this.text(Math.floor(temp));
                    } else if(numIsFloat != -1) {
                        $this.text(temp.toFixed(numIsFloat));
                    } else {
                        $this.text(num);
                        clearInterval(numScroll);
                        return;
                    }
                    temp += step;
                    if(temp > num) {
                        $this.text(num);
                        clearInterval(numScroll);
                    }
                }, 1);
            }, $settings.delay);
            
        });
    };

})(jQuery);