一个小小的函数,很容易看懂,就不过多解释了,只为下次用时直接用就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. 【Learning】 莫比乌斯反演

    莫比乌斯反演 ​ 对于两个定义域为非负整数的函数\(F(n)\)和\(f(n)\) ​ 若满足:\(F(n)=\sum\limits_{d|n}f(d)\),则反演得到\(f(n)=\sum\limi ...

  2. Python接口测试,Requests模块讲解:GET、POST、Cookies、Session等

    文章最下方有对应课程的视频链接哦^_^ 一.安装.GET,公共方法 二.POST 三.Cookies 四.Session 五.认证 六.超时配置.代理.事件钩子 七.错误异常

  3. python爬虫之基本知识

    随着数据的海量增长,我们需要在互联网上选取所需要的数据进行自己研究的分析和实验.这就用到了爬虫这一技术,下面就跟着小编一起初遇python爬虫! 一.请求-响应 在利用python语言实现爬虫时,主要 ...

  4. Android动态改变App在Launcher里面的icon

    如果呆萌的产品童鞋让你动态更换App在Launcher里面的Icon,你怎么回答他,下文就提出一种实现该效果的方法. 原理1--activity-alias 在AndroidMainifest中,有两 ...

  5. mysql常用基础操作语法(八)~~多表查询合并结果和内连接查询【命令行模式】

    1.使用union和union all合并两个查询结果:select 字段名 from tablename1 union select 字段名 from tablename2: 注意这个操作必须保证两 ...

  6. Vxworks驱动程序的结构

    驱动程序的结构包括三个部分:初始化部分,函数功能部分和中断服务程序ISR.初始化部分初始化硬件,分配设备所需的资源,完成所有与系统相关的设置.如果是字符设备,首先调用iosDrvlnstall()来安 ...

  7. 引导加载程序之争: LILO 和 GRUB

    在不考虑他们的工作或专业情况下,所有 Linux 用户都会使用的是哪个工具?引导加载程序.通过本文了解引导加载程序的工作原理,认识两个流行的引导加载程序 LILO(LInux LOader)和 GNU ...

  8. ATA接口寄存器描述

    ATA接口寄存器描述 .ATA接口的三种数据传输方式 位. )MDMA(Multiword DMA)传输,用于数据传输.ATA主机控制器向ATA设备下达MDMA传输命令后,等待设备向主机发送DMARQ ...

  9. HTML5中的输入框

    HTML5中的输入框 1.双引号 <input type="text"/> 2.单引号 <input type='text'/> 3.无引号 <inp ...

  10. IOS开发之XCode学习008:UIViewController基础

    此文学习来源为:http://study.163.com/course/introduction/1002858003.htm 红色框选部分用A代替,AppDelegate类在程序框架启动时,如果在i ...