数字逐渐增加或减少(多次复用)

本文介绍了一个用于实现数字渐变动画效果的JavaScript函数。该函数能够使页面上的数字元素平滑地从一个值变化到另一个值,并支持自定义变化时间和单位后缀。

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

有的时候我们在进行增加或者减少时会需要进行数字的增加喝减少的效果:

 function countToNumber(number, duration, suffix) {

      console.log('数字进行增加')

      $({

        count: number - app.temp,

      }).animate(

        {

          count: number,

        },

        {

          duration: duration ? duration : 1000,

          easing: 'swing',

          step: function (now) {

            $('.moneytext').text('$' + Math.floor(now * 100) / 100)

          },

          complete: function () {

            countingFromZero = false

            $('.moneytext').text('$' + Math.floor(number * 100) / 100 + suffix)

            $('.card').each(function () {

              if (!$(this).hasClass('open')) {

                $(this).css({

                  pointerEvents: 'auto',

                })

              }

            })

            if (number === 850) {

              $('.light').show()

              setTimeout(() => {

                end()

              }, 1400)

            }

          },

        }

      )

    }

复用所以写成一个函数的形式,其中的moneytext就是我们的数字,对它进行不断的更改

number:就是我们最终变化变化到的数字。

duration:这是我们进行数字增加的一个时间,和定时器一样 1000=1s。

suffix:这是我用来添加数字结尾的一个字符串(’.00‘)是计算到了小数点后两位,同时这个函数在进行+/-的时候是进行小数点后两位的变化的,最后为一个整数。

调用:

        app.temp = 25

        countToNumber(55, 1000, '.00')

其中的temp是你原始值到目标值的区间量。

app.temp需要自己声明,我本来创建了app,所以直接把temp放进app了

这样就可以进行一个数字的逐渐增加/减少的效果了

***小白勿喷***

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值