在做公司的运营报告页面时，有一个数字累计增加的动画效果，一开始，毫无头绪，不知如何下手，于是上网查资料，发现大多都是用的插件来实现的，那么今天，我也来用插件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. Mego开发文档 - 基本保存操作

    基本保存操作 在Mego中没有更改跟踪,也就是说所有的新增.更新及删除都需要开发者自行判断.Mego会最为实际的将各个数据操作提交给数据库并执行. 添加数据 using (var db = new O ...

  2. h5图片上传预览

    项目中常用到文件上传预览功能,整理一下:如果不想使用 type="file" 的默认样式,可以让其覆盖在一个按钮样式上边,设其透明度为0,或者使用Label关联 html < ...

  3. hadoop2.6.0实践：002 检查伪分布式环境搭建

    1.检查网络配置[root@hadoop-master ~]# cat /etc/sysconfig/networkNETWORKING=yesHOSTNAME=hadoop-masterGATEWA ...

  4. SpringCloud的服务网关zuul

    演示如何使用api网关屏蔽各服务来源 一.概念和定义 1.zuul最终还是使用Ribbon的,顺便测试一下Hystrix断路保护2.zuul也是一个EurekaClient,访问服务注册中心,获取元数 ...

  5. tomcat增加处理线程数量

    修改server.xml <Executor name="tomcatThreadPool" namePrefix="catalina-exec-" ma ...

  6. ActiveMQ学习系列（一）

    一.JMS规范 JMS即Java消息服务(Java Message Service)应用程序接口,是一个Java平台中关于面向消息中间件(MOM)的API,用于在两个应用程序之间,或分布式系统中发送消 ...

  7. linux samba服务配置

    1.下载 wget+rpm或yum install 2.配置/etc/samba/smb.conf cat smb.conf | grep setsebool 执行终端打印出来的字符串 setsebo ...

  8. laravel 5.5 接入蚂蚁金服官方SDK（支付宝APP支付为例）开发步骤

    一.创建应用及配置 首先需要到蚂蚁金服开放平台(open.alipay.com)注册应用,获取应用id(APP_ID),并且配置应用,主要是签约应用,这个需要审核,一般2-5个工作日,审核通过后,去生 ...

  9. [LeetCode] Find K Closest Elements 寻找K个最近元素

    Given a sorted array, two integers k and x, find the k closest elements to x in the array. The resul ...

  10. 【linux之压缩归档，tar】

    一.压缩和归档 压缩算法就是等量代换 gzip FILE1 FILE2... 扩展名 .gz -#(数字):#代表压缩等级,1-9,默认6 -d(compression):解压缩 -r:递归的压缩目录 ...