jq实现数字增加或者减少的动画

在前端开发中，经常需要实现数字的动画效果，例如，实现购物车中商品数量的增加或减少动画效果，本文将介绍如何使用jQuery实现这种数字动画效果。

小数点增加动画效果实现

首先，我们来实现小数点增加的动画效果。下面是一个DIV元素，其中显示一个初始值为12.34的数字:

<div id="num">12.34</div>

因为数字增加是在小数点位上实现的，我们先将整数部分和小数部分分开处理，使用split方法，将整数部分和小数部分分别存入begain_int、begain_dec两个变量中:

var num = $('#num').text();
var begain_int = parseInt(num).toFixed(0);
var begain_dec = parseInt(num.split(".")[1]).toFixed(2);

接着，定义一个变量end，存入我们期待的数字结果:

var end = 15.67;

通过比较end和begain_dec，我们就可以判断数字是增加还是减少：

var add = true; //增加
if (end < num) {
    add = false; //减少
}

因为动画实现会多次执行，所以我们定义一个执行动画的函数，名称为drawNumber，并且实现非常简单，只是将元素的text属性动态赋值，同时使用toFixed方法保留小数点后两位：

function drawNumber(num_val) {
    $('#num').text(num_val);
}

紧接着，我们定义一个动画执行函数increase，它可以根据我们的需求实现增加或减少的动画效果:

function increase(begin, end, add) {
    if (begin > end) {
        begain_dec = begain_dec - 1;
        if (begain_dec < 0) {
            begain_int = begain_int - 1;
            if (begain_int < 0) {
                begain_int = 0;
                begain_dec = 0;
            } else {
                begain_dec = 99;
            }
        }
    } else {
        begain_dec = begain_dec + 1;
        if (begain_dec > 99) {
            begain_int = begain_int + 1;
            if (begain_int > end) {
                begain_int = end;
                begain_dec = 0;
            } else {
                begain_dec = 0;
            }
        }
    }
    var current = begain_int + "." + begain_dec;
    drawNumber(current);
    if ((add && current >= end) || (!add && current <= end)) {
        drawNumber(end.toFixed(2));
        return;
    }
    setTimeout(increase.bind(this, begin, end, add), 20);
 }

接下来，我们只需要在实际代码中调用increase函数，即可实现数字增加或者减少的动画效果:

increase(parseInt(num), end, add);

整数值增加动画效果实现

在实际开发中，我们通常需要实现整数值的增加和减少的动画效果，这时我们需要一点改变。

首先，我们定义一个整数的开始值和结束值：

var num = $('#num').text(),
    begin = parseInt(num),
    end = 50,
    add = true;
if (begin > end) {
    add = false;
}

然后，定义动画执行函数increase:

function increase(begin, end, add) {
    if (add) {
        begin = begin + 1;
        if (begin > end) {
            begin = end;
        }
    } else {
        begin = begin - 1;
        if (begin < end) {
            begin = end;
        }
    }
    drawNumber(begin);
    if ((add && begin >= end) || (!add && begin <= end)) {
        drawNumber(end);
        return;
    }
    setTimeout(increase.bind(this, begin, end, add), 20);
}

最后，我们只需要在实际代码中调用increase函数即可实现整数值的增加和减少的动画效果:

increase(begin, end, add);

到此为止，我们已经实现了数字的增加和减少动画效果。以上代码使用了jQuery,如果没有引入jQuery库需要先引入。

代码还可以进一步优化，例如，将相同的代码提取出来封装成函数等等。

总结

本文介绍了如何使用jQuery实现数字增加或减少的动画效果，分别针对整数和小数点实现进行了介绍。

这种动画效果在页面设计中应用广泛，如购物车物品数量变更、评分星星的增加等等。使用本文所述实现方法，可以优化前端用户体验，让网站更加生动活泼。