zoukankan      html  css  js  c++  java
  • 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);
    }

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

  • 相关阅读:
    HDFS数据流——读数据流程
    HDFS网络拓扑概念及机架感知(副本节点选择)
    HDFS数据流——写数据流程
    HDFS基本概念
    Hadoop运行模式:本地模式、伪分布模式、完全分布模式
    Java枚举enum关键字
    Java内部类
    Eclipse常用快捷键
    Linux中Mysql安装卸载
    服务器同时运行两个项目
  • 原文地址:https://www.cnblogs.com/liuqingxia/p/8949605.html
Copyright © 2011-2022 走看看