数字效果动画【增加或减小】

最新推荐文章于 2023-10-07 17:46:06 发布

乐语_miss

最新推荐文章于 2023-10-07 17:46:06 发布

阅读量368

点赞数 1

分类专栏：页面特效文章标签： javascript vue

本文链接：https://blog.csdn.net/weixin_49521721/article/details/118727214

版权

页面特效专栏收录该内容

2 篇文章

订阅专栏

本文介绍了如何使用JavaScript实现HTML页面中的数字动画效果。通过`NumAutoPlusAnimation`函数，可以实现数字自增或自减的平滑动画，用于展示如天数、商家数量、流水等信息的动态变化。函数接受目标元素、配置项（包括时间、最终数值、调速器等）作为参数，通过定时器更新DOM元素内的数字，从而创建动画效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.html

<div class="info_num">
  <div class="info_num_box">
    /*减小*/
    <p class="info_number"><span id="count-number1">30</span>天</p>
    <p class="info_nav">快速无缝对接业务</p>
  </div>
  <div class="info_num_box">
    /*增大*/
    <p class="info_number"><span><span id="count-number2">0</span>+</span></p>
    <p class="info_nav">智能分佣模型</p>
  </div>
  <div class="info_num_box">
    /*增大*/
    <p class="info_number"><span><span id="count-number3">0</span>+</span></p>
    <p class="info_nav">优质合作商家</p>
  </div>
  <div class="info_num_box">
    /*增大*/
    <p class="info_number"><span id="count-number4">80</span>亿流水</p>
    <p class="info_nav">提供可靠佣金服务</p>
  </div>
</div>

2.方法

/* 数字效果 动画
 * 数字自增到某一值动画参数（目标元素,自定义配置）
 */
NumAutoPlusAnimation(targetEle, options, isJust = true) {
	 /*可以自己改造下传入的参数，按照自己的需求和喜好封装该函数*/
	 //不传配置就把它绑定在相应html元素的data-xxxx属性上吧
	 options = options || {};
	 var $this = document.getElementById(targetEle),
	 time = options.time || $this.data('time'), //总时间--毫秒为单位
	 finalNum = options.num || $this.data('value'), //要显示的真实数值
	 maxNum = options.max || 100,  // 如果是减小,此值为初始值
	 regulator = options.regulator || 100, //调速器，改变regulator的数值可以调节数字改变的速度
	 step = isJust ? finalNum / (time / regulator) : maxNum / (time / regulator),/*每30ms增加或减少的数值--*/
	 count = 0, //计数器
	 initial = 0;
	
	 if(isJust) {
	   let timer = setInterval(function() {
	     count = count + step;
	     if(count >= finalNum) {
	       clearInterval(timer);
	       count = finalNum;
	     }
	     //t未发生改变的话就直接返回
	     //避免调用text函数，提高DOM性能
	     var t = Math.floor(count);
	     if(t == initial) return;
	     initial = t;
	     $this.innerHTML = initial;
	   }, 50);
	 }else {
	   let timer = setInterval(function() {
	     maxNum = maxNum - step;
	     if(maxNum <= finalNum) {
	       clearInterval(timer);
	       maxNum = finalNum;
	     }
	     //t未发生改变的话就直接返回
	     //避免调用text函数，提高DOM性能
	     var t = Math.floor(maxNum);
	     $this.innerHTML = t;
	   }, 50);
	 }
},

3.调用

let count1 = 1, count2 = 1000, count3 = 5000, count4 = 80;
this.NumAutoPlusAnimation("count-number1", {
  time: 1500,
  num: count1,
  regulator: 50,
  max:30
},false)
this.NumAutoPlusAnimation("count-number2", {
  time: 1500,
  num: count2,
  regulator: 50
})
this.NumAutoPlusAnimation("count-number3", {
  time: 1500,
  num: count3,
  regulator: 50
})
this.NumAutoPlusAnimation("count-number4", {
  time: 1500,
  num: count4,
  regulator: 50
})