• js-数字渐增到指定的数字,在指定的时间内完成(有动画效果哦)插件jquery.animateNumber.js


    本来在项目中我自己实现的效果是数字由0渐增到指定的数字就好。

    但是,最终效果不理想!

    Why?

    最终指定的数字太大了,TMMD,滚动好久就不到,那用户想看自己有多少钱了,那不是就一直等着!!!所以这个效果OUT!

    改变思路

    需求:在规定的时间内,实现数字由:初始值滚动到指定的数字

    找到一个动画插件:jquery.animateNumber.js

    html:

    <span id="bmikece" style="font-size: 35px;"><%=user.available_predeposit %></span>     //后台绑定的最终需显示的数据

    js:

    <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="js/jquery.animateNumber.js"></script>        //需引用的插件基于js

    //调用numCount()
         numCount();

    //数字递增效果
        function numCount() {
                //小数点位允许多少
                   var decimal_places = 2;
                   var decimal_factor = decimal_places === 0 ? 1 : Math.pow(10, decimal_places);
                   $('#bmikece')
                       .animateNumber(
                       {
                             number: (<%=user.available_predeposit %>) * decimal_factor,

                             numberStep: function(now, tween) {
                                      var floored_number = Math.floor(now) / decimal_factor,
                                            target = $(tween.elem);

                                       if (decimal_places > 0) {
                                            //强迫小数点,即使它们是0。
                                           floored_number = floored_number.toFixed(decimal_places);

                                          //用','替换'分隔符'
                                           floored_number = floored_number.toString().replace('.', '.');
                                    }
                                     target.text(floored_number);
                            }
                },2000);
    }

    最终的效果还是不错的(笑脸)

  • 相关阅读:
    图解zookeeper FastLeader选举算法【转】
    win10 tensorflow python3*,Multiprocessing using fit_generator(pickle_safe=True) fail问题解决
    xcode从8升级到9出现的问题
    c++保存数据到TXT
    基于机器学习人脸识别face recognition具体的算法和原理
    pycharm 操作的一些设置,记录下
    ML-DL-各种资源汇总
    MATLAB实现多元线性回归预测
    【机器学习】 Matlab 2015a 自带机器学习算法汇总
    C++中嵌入python程序——命令行模式
  • 原文地址:https://www.cnblogs.com/liuqingxia/p/8949605.html
Copyright © 2020-2023  润新知