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

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8" />

<title>Document</title>

<style>

*{margin:0;padding:0;}

.platform_data{color:#e24f48;font-size:26px;margin-left:50px;}

.f_size {color:#2d3e50;font-size:18px;}

</style>

</head>

<body>

<p><label class="platform_data" id="income_money"></label><span class="f_size">元</span></p>

<p><label class="platform_data" id="income_num"></label><span class="f_size">笔</span></p>

<p><label class="platform_data" id="income_day"></label><span class="f_size">天</span></p>

<script src="js/jquery.min.js"></script>

<script src="js/jquery.animateNumber.js"></script>

<script>

	/**

	 * 格式化金额-中文

	 * @param s

	 * @param n

	 */

	function fmoneyCN(s,n){

		n = n >= 0 && n <= 20 ? n : 2;

		s = parseFloat((s + "").replace(/[^\d\.-]/g, "")).toFixed(n) + "";   //精度

		var l = s.split(".")[0].split(""),

			r = s.split(".")[1],  //remind

		        t = "";

		var CN_TEN_THOUSAND = "<span class='f_size'>万</span>";

		var CN_HUNDRED_MILLION = "<span class='f_size'>亿</span>";

		if(l.length < 5){

			return s;

		}

		for(i = 0; i < l.length; i ++ )

		{

			if(i == (l.length - 9)){

				t += l[i] + CN_HUNDRED_MILLION + "";

			}else if( i == (l.length - 5)){

				t += l[i] + CN_TEN_THOUSAND + "";

			}else {

				t += l[i];

			}

		}

		return t.split("").join("");

	}

	$('#income_money').animateNumber({

		number: "901394152" ,

		numberStep: function(now, tween) {

	    	var target = $(tween.elem);

	    	target.prop('number', now).html(fmoneyCN(now,0));

	    }

	},3000);

	$('#income_num').animateNumber({

		number: "47007" ,

		numberStep: function(now, tween) {

	    	var target = $(tween.elem);

	    	target.prop('number', now).html(fmoneyCN(now,0));

	    }

	},3000);

	$('#income_day').animateNumber({

		number: "1200" ,

		numberStep: function(now, tween) {

	    	var target = $(tween.elem);

	    	target.prop('number', now).html(fmoneyCN(now,0));

	    }

	},3000);

</script>

</body>

</html>

最终效果如下图：

源代码下载案例:

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

好用的jquery.animateNumber.js数字动画插件的更多相关文章

  1. js-数字渐增到指定的数字，在指定的时间内完成（有动画效果哦）插件jquery.animateNumber.js

    本来在项目中我自己实现的效果是数字由0渐增到指定的数字就好. 但是,最终效果不理想! Why? 最终指定的数字太大了,TMMD,滚动好久就不到,那用户想看自己有多少钱了,那不是就一直等着!!!所以这个 ...

  2. jquery轻量级数字动画插件jquery.countup.js

    插件描述: jquery.countup.js 是一款轻量级jquery数字动画插件.该数字动画插件可以在页面滚动时,将指定的数字从0开始计数增加动画. 插件说明 jquery.countup.js  ...

  3. js数字动画

    项目中需要的数字动画效果,网上找不到需要的效果,所以自己写了一个. 不多说,直接上干货:

  4. jQuery页面滚动数字增长插件

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. jquery.form.js表单插件的使用

    jquery.form.js官网:http://malsup.com/jquery/form API文档:http://malsup.com/jquery/form/#api 下载地址:http:// ...

  6. jquery.jCal.js显示日历插件

    描述:日历插件jCal用于需要输入日期的表单文本框. 兼容浏览器:IE浏览器/Firefox/Google Chrome 官方链接: http://www.overset.com/2008/05/1 ...

  7. jquery.ajaxfileupload.js

    jquery.ajaxfileupload.js上传插件,利用iframe提交不刷新页面功能完成. /* // jQuery Ajax File Uploader // // @author: Jor ...

  8. jquery.imagezoom.js制作鼠标悬停图片放大镜特效、参数和最简教程

    一.插件介绍 今天在用到放大镜效果的时候,突然发现网站里没有放大镜的插件.于是总结了一下,放到这里.为自己,也为他人提供方便.jquery.imagezoom.js这款插件用途很简单,就是鼠标移过去, ...

  9. jQuery之jquery.lazyload.js插件用法

    研究背景:网站中如果图片过多,就会因为加载图片而等待很长时间,此时我们就用到图片延时加载插件jquery.lazyload.js,这个插件可以让我们在向下滚动的时候加载图片.让网页首屏尽可能快的加载进 ...

随机推荐

  1. JQ.ajax 各种参数及属性设置 ( 转载 )

    $.ajax({      type: "post",      url: url,      dataType:'html',      success: function(da ...

  2. PHP模式设计之单例模式、工厂模式、注册树模式、适配器模式、观察者模式

    php模式设计之单例模式 什么是单例模式? 单例模式是指在整个应用中只有一个实例对象的设计模式 为什么要用单例模式? php经常要链接数据库,如果在一个项目中频繁建立连接数据库,会造成服务器资源的很大 ...

  3. proxymysql的安装与应用

    具体的资料我们可以查看官方的文档:https://github.com/sysown/proxysql/wiki/ProxySQL-Configuration 推荐下载最新的Proxysql. 下面跟 ...

  4. vueJs 源码解析 （三） 具体代码

    vueJs 源码解析 (三) 具体代码 在之前的文章中提到了 vuejs 源码中的 架构部分,以及 谈论到了 vue 源码三要素 vm.compiler.watcher 这三要素,那么今天我们就从这三 ...

  5. ubuntu 虚拟机上的 django 服务，在外部Windows系统上无法访问

    背景介绍 今天尝试着写了一个最简单的django 服务程序,使用虚拟机(Ubuntu16.02 LTS)上的浏览器访问程序没有问题.但是在物理机器上(win10 Home) 就出现错误 解决方法 在 ...

  6. python isinstance 函数

    isinstance是Python中的一个内建函数 语法: isinstance(object, classinfo)   如果参数object是classinfo的实例,或者object是class ...

  7. python/Djangof分页与自定义分页

    python/Djangof分页与自定义分页 Django分页 ##============================================分页==================== ...

  8. Struts(十八)：通过CURD来学习PrepareInterceptor拦截器

    PrepareInterceptor拦截器的用法: 1.若Action实现了Preparable接口,则Action方法需实现prepare()方法: 2.PrepareInterceptor拦截器S ...

  9. JavaScript中内存使用规则--堆和栈

    堆和栈都是运行时内存中分配的一个数据区,因此也被称为堆区和栈区,但二者存储的数据类型和处理速度不同.堆(heap)用于复杂数据类型(引用类型)分配空间,例如数组对象.object对象:它是运行时动态分 ...

  10. AtomicInteger类的理解及使用

    AtomicInteger在多线程并发场景的使用 AtomicInteger提供原子操作来进行Integer的使用,因此十分适合高并发情况下的使用. AtomicInteger位于包package j ...