本来在项目中我自己实现的效果是数字由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处理excel总结

    工作中,大家经常会使用excel去处理数据以及展示,但是对于部分工作我们可以借助程序帮忙实现,达到高效解决问题的效果,比如将接口返回的json解析并保存结果到excel中,按一定规律处理excel中的 ...

  2. Vue 父子组件间的通信

    前言 在 Vue 项目中父子组件的通信是非常常见的,最近做项目的时候发现对这方面的知识还不怎么熟练,在这边做一下笔记,系统学习一下吧. 1 父组件传值给子组件 1.1 传值写法 父组件传值给子组件,这 ...

  3. php 关于金额的几种计算方式

    php 关于金额的几种计算方式 平常开始开发过程中,多多少少都会遇到点关于金额的计算,比如设置返利.提现手续费.折扣啊等等诸如此类的比例,然后再计算出之后的实际的费用. 下面,以折扣为例,来实现这类计 ...

  4. jvm架构以及Tomcat优化

      JVM栈 JVM栈是线程私有的,每个线程创建的同时都会创建JVM栈,JVM栈中存放的为当前线程中局部基本类型的变量(java中定义的八种基本类型:boolean.char.byte.short.i ...

  5. 《linux设备驱动开发详解》笔记——14 linux网络设备驱动

    14.1 网络设备驱动结构 网络协议接口层:硬件无关,标准收发函数dev_queue_xmit()和netif_rx();  注意,netif_rx是将接收到的数据给上层,有时也在驱动收到数据以后调用 ...

  6. Python学习笔记:time模块和datetime模块(时间和日期)

    time模块 time模块通常用来操作时间戳信息(各种“秒”),常用的方法有: time.sleep(seconds):将当前程序阻塞指定秒数,然后继续运行程序. time.time():返回当前时间 ...

  7. python中文件操作的基本方法

    在python中对一个文件进行操作,分为三大步:打开,操作,关闭 首先创建一个文件hello,里面内容为hello world 一.打开一个文件 1.#open(‘文件名或文件路径’,‘操作模式’,文 ...

  8. 基于IAR6或者IAR7建立STM32开发工程(通过实际测试,使用IAR6.30.4)

    IAR和keil两个开发平台都是arm开发当中比较流行的平台,keil4的版本之间,可以兼容,但是版本4和版本5还是不兼容的,但是IAR的兼容性更加差,好像6.30.x之间是能够兼容的吧,没有实测过, ...

  9. HDU 5111 Alexandra and Two Trees 树链剖分 + 主席树

    题意: 给出两棵树,每棵树的节点都有一个权值. 同一棵树上的节点的权值互不相同,不同树上节点的权值可以相同. 要求回答如下询问: \(u_1 \, v_1 \, u_2 \, v_2\):询问第一棵树 ...

  10. executing an update/delete query问题

    是因为在做SpringDataJpa更新和删除操作的时候Repository层没有加事务的注解,加上就行了: @Transactional @Query(value = "update ms ...