vue 数字翻转（支持带小数点数字）

最新推荐文章于 2024-05-28 14:09:02 发布

start_f_scratch

最新推荐文章于 2024-05-28 14:09:02 发布

阅读量1.3k

点赞数

分类专栏： vue 文章标签： vue 数字翻转

本文链接：https://blog.youkuaiyun.com/start_f_scratch/article/details/103005570

版权

vue 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何在Vue项目中实现数字翻转效果，特别是对于包含小数点的数字。利用jQuery插件，将需要翻转的数字转换为Number类型，并在Vue模板中通过ref调用来实现动态更新。

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

文章根据此链接删除部分

原文章连接：http://www.jq22.com/jquery-info3484

// 需要翻转数字转为Number 直接调用只需要引用 Jquery

例：

<p class="color_org" ref="kfDate1">{{((customerNum?customerNum:0)-0).countTo(this.$refs.kfDate1)}}</p>

// html ==》转入的p标签



Number.prototype.countTo = function (html) {

  // this指新数字

    if (this) {

        var settings =

        {

            from: 0,// 从0开始（或者获取旧的数开始）

            to: this,// 新传入的数

            speed: 1500,//总秒数

            refreshInterval: 100,//每个数据

        };

        var loops = Math.ceil(settings.speed / settings.refreshInterval),

            increment = (settings.to - settings.from) / loops,

             valueS=settings.to.toString(),// 转为类型

            indexOfL=valueS.toString().indexOf('.')==-1?0:valueS.toString().length-(valueS.toString().indexOf('.')+1);// 适配小数点

;//每个数字变化的速度

        var $self = $(html),// 标签

            loopCount = 0,

            value = settings.from,

            data = $self.data("countTo") || {};

        $self.data("countTo", data);

        if (data.interval) {// 当前是否定时器

            clearInterval(data.interval);// 关闭定时器

        }

       // 添加定时器

        data.interval = setInterval(updateTimer, settings.refreshInterval);

        render(value);

        function updateTimer() {

            value += increment;

            loopCount++;

            render(value);

            if (loopCount >= loops) {

                $self.removeData("countTo");

                clearInterval(data.interval);

                value = settings.to;

            }

        }

        function render(value) {
            // 适配小数点

            var formattedValue = (value - 0).toFixed(indexOfL);

            $self.html(formattedValue);

        }

    }

}