一个小小的函数,很容易看懂,就不过多解释了,只为下次用时直接用就ok了。。。

function countUp(count)
{
var div_by = 100,
speed = Math.round(count / div_by),
$display = $('.count'),
run_count = 1,
int_speed = 24; var int = setInterval(function() {
if(run_count < div_by){
$display.text(speed * run_count);
run_count++;
} else if(parseInt($display.text()) < count) {
var curr_count = parseInt($display.text()) + 1;
$display.text(curr_count);
} else {
clearInterval(int);
}
}, int_speed);
} countUp(num);

只需要把要显示内容的元素获取下来,还有把要显示的数据写到函数的参数位置即可。。

js 显示数字不断增加的更多相关文章

  1. CountUp.js – 让数字以非常有趣的动画方式显示

    CountUp.js 无依赖的.轻量级的 JavaScript 类,可以用来快速创建以一种更有趣的动画方式显示数值数据.尽管它的名字叫 countUp,但其实可以在两个方向进行变化,这是根据你传递的 ...

  2. 快速创建显示数字数据的动画——CountUp.js

    由于项目需求,需要写一个数字增/减量的动画特效,最后找到了CountUp.js CountUp.js是一个无依赖,轻量级的JavaScript“类”,可用于快速创建以更有趣的方式显示数字数据的动画. ...

  3. 前端JS—显示赋值(一)

    一:js代码必须位于<script>js代码</script> 把js代码放到<body>元素的地步,可以改善显示速度 二:js显示数据 使用 window.ale ...

  4. JS将数字转换为中文

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

  5. [收集]在iPhone桌面的应用程序图标右上角显示数字

    能够在ios桌面的程序icon右上角显示数字(badge number)的方法 在ViewController中的viewDidLoad方法中添加如下代码即可 - (void)viewDidLoad ...

  6. js显示当前时间

    闲着没事在闪存里看到有人需要js显示当前时间,就一时兴起写了个. 输出格式:“2013年12月18日 星期三 上午9:05:00 ”. <script type="text/javas ...

  7. js 利用 ajax 加载 js ,显示加载进度 ,严格按照js的顺序先后加载到页面

    js 利用 ajax 加载 js ,显示加载进度 ,严格按照js的顺序先后加载到页面 , 做手机端开发时,发现一个问题,有些浏览器,在网速比较慢的情况下,js文件没有加载完,后续的调用已经开始调用了, ...

  8. js动态数字时钟

    js动态数字时钟 主要用到知识点: 主要是通过数组的一些方法,如:Array.from() Array.reduce() Array.find() 时间的处理和渲染 js用到面向对象的写法 实现的功能 ...

  9. js 格式化数字,格式化金额:

    js 格式化数字,格式化金额: function number_format(number, decimals, dec_point, thousands_sep) { /* * 参数说明: * nu ...

随机推荐

  1. CodeForces - 796A Buying A House

    思路:从m直接向两边枚举,如果当前点需要的费用小于等于k,说明一定是最近距离. AC代码 #include <cstdio> #include <cmath> #include ...

  2. hdu1006 Tick and Tick

    原题链接 Tick and Tick 题意 计算时针.分针.秒针24小时之内三个指针之间相差大于等于n度一天内所占百分比. 思路 每隔12小时时针.分针.秒针全部指向0,那么只需要计算12小时内的百分 ...

  3. .net Winfrom 僵尸窗口 的问题

    执行顺序如下: Form1 form1 =new Form1(); form1.ShowDialog(); Form2 form2= Application.OpenForms["Form2 ...

  4. 使用lambda编程之延迟执行

    使用lambda表达式的主要原因是,将代码的执行延迟到一个合适的时间点. 所有的lambda表达式都是延迟执行的.毕竟,如果你希望立即执行一段代码,那就没有必要使用lambda表达式了.延迟执行代码的 ...

  5. 二、Mysql(二)

    原文参考:http://www.cnblogs.com/wupeiqi/articles/5713323.html 还有一个是课件,看着也像博客,但不知道是谁的 内置函数 触发器 存储过程 索引 与p ...

  6. python每天一个小练习-列表元素非唯一

    列表元素非唯一 来源 checkio 需求 你将得到一个含有整数(X)的非空列表.在这个任务里,你应该返回在此列表中的非唯一元素的列表.要做到这一点,你需要删除所有独特的元素(这是包含在一个给定的列表 ...

  7. Linux如何查找处理文件名后包含空格的文件

    Linux如何查找处理文件名后包含空格的文件   当Linux下文件名中出现空格这类特殊情况话,如何查找或确认那些文件名后有空格呢? 又怎么批量替换处理掉这些空格呢? 方法1: 输入文件名后使用Tab ...

  8. STM32 下的库函数和寄存器操作比较

    以 led闪烁中的flashLed函数例子: 库函数操作简单,但是效率不如寄存器操作的高: 寄存器操作很复杂,因为要熟悉上百个寄存器,但是程序效率很高 /**下面是通过直接操作库函数的方式实现IO控制 ...

  9. fineuploader使用实例

    1.Fine Uploader特点 Fine Uploader Features: A:支持文件上传进度显示. B:文件拖拽浏览器上传方式 C:Ajax页面无刷新. D:多文件上传. F:跨浏览器. ...

  10. Dynamics 365中审核用户权限变化的一种方法

    摘要: 本人微信和易信公众号: 微软动态CRM专家罗勇 ,回复268或者20180311可方便获取本文,同时可以在第一间得到我发布的最新的博文信息,follow me!我的网站是 www.luoyon ...