本来在项目中我自己实现的效果是数字由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. Robot Framework user guide

    http://robotframework.org/robotframework/latest/RobotFrameworkUserGuide.html

  2. python将excel数据写入数据库,或从库中读取出来

    首先介绍一下SQL数据库的一些基本操作: 1创建 2删除 3写入 4更新(修改) 5条件选择 有了以上基本操作,就可以建立并存储一个简单的数据库了. 放出python调用的代码: 此处是调用dos 操 ...

  3. Windows7_64位 NVIDIA 卡 OpenCl环境配置

    序 最近做一个项目需要用到OpenCL,由于之前没有接触过,所以在环境配置第一关就遇到了一些问题,查阅很多资料才配置完成,现在记录如下,希望给一些童鞋一些帮助. 整个步骤也很简单: 了解系统配置,选择 ...

  4. 关于stm32优先级大小的理解

    转载自:https://www.cnblogs.com/ZKeJun/p/6112591.html 一. 组别:0>1>2>3>4   组别优先顺序(第0组优先级最强,第4组优 ...

  5. STM32HAL学习博客

    https://www.cnblogs.com/wt88/category/1297945.html

  6. 《小团团团队》第八次团队作业:Alpha冲刺

    项目 内容 这个作业属于哪个课程 任课教师博客主页链接 这个作业的要求在哪里 实验十二 团队作业8:软件测试与Alpha冲刺 团队名称 小团团团队 作业学习目标 (1)掌握软件测试基础技术; (2)学 ...

  7. C#通过http post方式调用需要证书的webservice

    前一段时间做花旗银行的项目,用到花旗的接口是websevice,由于很多原因直接在项目中引用webservice不成功,于是就用了http post方式请求,把请求信息(xml格式)组装之后发送到服务 ...

  8. Leetcode37--->Sudoku Solver(填充数独)

    题目: 给定一个不完整的数独,要求填充好数独:最初给出的数独是有效的,且假设一定有答案: 举例: A sudoku puzzle... 解题思路: 该题与青蛙走迷宫问题很相似,都是用深度优先: 代码如 ...

  9. day01_14.遍历数组

    <?php $a = array('a','b','c'); print_r($a); ?> 输出结果:Array ( [0] => a [1] => b [2] => ...

  10. SDOJ 3696 Tree

    描述 给你一个无向带权连通图,每条边是黑色或白色.让你求一棵最小权的恰好有need条白色边的生成树. 题目保证有解. 输入 第一行V,E,need分别表示点数,边数和需要的白色边数. 接下来E行 每行 ...