在做公司的运营报告页面时，有一个数字累计增加的动画效果，一开始，毫无头绪，不知如何下手，于是上网查资料，发现大多都是用的插件来实现的，那么今天，我也来用插件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. Linux实战案例（2）实例讲解使用软连接的场景和过程

    =================================== 使用场景:使用软连接简化版本切换动作 进入操作目录, cd /opt/modules/ ==================== ...

  2. 京东2019春招Java工程师编程题题解

    生成回文串 题目描述 对于一个字符串,从前开始读和从后开始读是一样的,我们就称这个字符串是回文串. 例如"ABCBA","AA","A"是回 ...

  3. Python基础数据类型之列表和元组

    一.列表   list 列表是python中的基础数据类型之一,其他语言中也有类似于列表的数据类型,比如js中叫数组,他是以[]括起来,每个元素以逗号隔开,而且他里面可以存放各种数据类型比如: li ...

  4. LayUI之table数据表格获取行、行高亮等相关操作

    前言 目前LayUI数据表格既美观有不乏一些实用功能.基本上表格应有的操作已经具备,LayUI作者[贤心]肯定是煞费苦心去优化,此处致敬.但是实话实话,如果单纯那数据表格功能来说,EasUI的数据表格 ...

  5. 32位centos6.5 mysql rpm包下载

    查看centos版本号和位数: http://www.cnblogs.com/grey-wolf/p/7472507.html mysql下载: 1.进入https://dev.mysql.com/d ...

  6. CMDB资产采集

    Agent(方式) 1:服务器每台都需要安装Agent 达到采集速度快,简单:造成性能损耗 获取每台服务器的资产并有返回值:v=subprocess.getoutput('dir')或者ipconfi ...

  7. 在删除一个指针之后，一定将该指针设置成空指针（即在delete *p之后一定要加上： p=NULL）

    在删除一个指针之后,一定将该指针设置成空指针(即在delete *p之后一定要加上: p=NULL)

  8. 三、如何使用QtDesigner

    三.如何使用QtDesigner 启动 QtDesigner,创建一个PyQt项目 拖动Label到主窗体,双击并输入自己想输入的文字 并保持为 HelloWorld.ui 此时在你Python项目下 ...

  9. java 连接mysql

    目前还沉浸在java自动化测试中不能自拔! 自动化过程中免不了要从数据库取值与期望值比较,目前我项目刚开始就需要用到了. 下面我把操作过程写下来: 我的项目框架是java+maven+testNG,所 ...

  10. zookeeper初探

    安装三台linux虚拟机,安装好java环境,并配置好网络以及host文件,分别改好hostname为node0.node1.node2 上传下载好的zookeeper文件到node0的/usr/lo ...