本来在项目中我自己实现的效果是数字由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);
}

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

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

  1. 好用的jquery.animateNumber.js数字动画插件

    在做公司的运营报告页面时,有一个数字累计增加的动画效果,一开始,毫无头绪,不知如何下手,于是上网查资料,发现大多都是用的插件来实现的,那么今天,我也来用插件jquery.animateNumber.j ...

  2. jQuery插件 -- 表单验证插件jquery.validate.js, jquery.metadata.js

    原文地址:http://blog.csdn.net/zzq58157383/article/details/7718352   最常使用JavaScript的场合就是表单的验证,而jQuery作为一个 ...

  3. jQuery插件 -- 表单验证插件jquery.validate.js

    最常使用JavaScript的场合就是表单的验证,而jQuery作为一个优秀的JavaScript库,也提供了一个优秀的表单验证插件----Validation.Validation是历史最悠久的jQ ...

  4. 表单验证插件jquery.validate.js

    最常使用JavaScript的场合就是表单的验证,而jQuery作为一个优秀的JavaScript库,也提供了一个优秀的表单验证插件----Validation.Validation是历史最悠久的jQ ...

  5. 动态生成二维码插件 jquery.qrcode.js

    前段时间做项目,需要动态生成一个二维码,于是就在网上找了一下发现一个jquery插件jquery.qrcode.js,所以今天就简单说一下这个插件的使用: jquery.qrcode.js是依赖jqu ...

  6. jquery插件jquery.LightBox.js之点击放大图片并左右点击切换图片(仿相册插件)

    该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的点击放大图片并左右点击切换图片的效果,您可以根据自己的实 ...

  7. jQuery响应式幻灯片插件jquery.glide.js(支持触摸&轻量级)

    找到一款好的幻灯片插件不容易,找到一款功能全并且使用很简单的幻灯片更不容易,今天为大家分享一款全能的幻灯片插件glide.js,也是我现在在使用的一款插件. jquery.glide.js是响应和触摸 ...

  8. jQuery滚动条插件 – jquery.slimscroll.js

    jquery.slimscroll.js插件是一个支持把内容放在一个盒子里面,固定一个高度,超出的则使用滚动.jquery.slimscroll.js不仅可以定义高度.宽度,还可以定义位置.滚动条大小 ...

  9. 基于jQuery开发的手风琴插件 jquery.accordion.js

     1.插件代码 少说多做,基于jQuery的手风琴插件jquery.accordion.js的代码:  /* * 手风琴插件说明: * 1.treeTrunk对应树干 * 2.treeLeaf对应树叶 ...

随机推荐

  1. 用Python设置matplotlib.plot的坐标轴刻度间隔以及刻度范围

    一.用默认设置绘制折线图 import matplotlib.pyplot as plt x_values=list(range(11)) #x轴的数字是0到10这11个整数 y_values=[x* ...

  2. Python PycURL的安装使用

    PycURL中文简介:https://blog.csdn.net/qq_41185868/article/details/80487014 PycURL英文简介(如下):http://pycurl.i ...

  3. json.dumps ensure_ascii 方法

    在使用json.dumps时要注意一个问题   import json print (json.dumps('中国')) "\u4e2d\u56fd"   输出的会是 '中国' 中 ...

  4. ProC第一弹

    编译pro*c 的makefile例子 原来只需在makefile中追加include $(ORACLE_HOME)/precomp/lib/env_precomp.mk,其他一切按照makefile ...

  5. poj-1011 sticks(搜索题)

    George took sticks of the same length and cut them randomly until all parts became at most 50 units ...

  6. CodeForces - 899E Segments Removal (优先队列 + 链表)

    给定一个序列,每次从序列中找一个长度最大的元素相同的片段,删除它. 如果长度相同,删除最靠左边的那个片段. 问,需要删几次. 用链表处理删除片段.对于删除之后两边又能连成一个片段的那种情况,用set记 ...

  7. flask-mail(qq邮箱)

    from flask_mail import Mail,Message app.config['MAIL_SERVER']='smtp.qq.com' app.config['MAIL_PORT'] ...

  8. BZOJ 5390: [Lydsy1806月赛]糖果商店

    F[i][j]表示总重量为i,最上面那个盒子中糖果种类为j的方案数 每次新加一个盒子,或者在原来盒子中加入一个糖 F[i][0]为中间状态,优化转移(表示最上面那个盒子不能加糖果) #include& ...

  9. HDU 2852 KiKi's K-Number 主席树

    题意: 要求维护一个数据结构,支持下面三种操作: \(0 \, e\):插入一个值为\(e\)的元素 \(1 \, e\):删除一个值为\(e\)的元素 \(2 \, a \, k\):查询比\(a\ ...

  10. 关于ios 和 android 录音(语音)对聊文件格式问题

    关于ios 和 android 录音(语音)对聊文件格式问题 在做语音对讲的时候,将会碰到录制语音格式的问题,这些需要跨平台我们可能需要使用双方平台都支持的格式,或者执行编码转换 解决方式如下: wa ...