js 显示数字不断增加
一个小小的函数,很容易看懂,就不过多解释了,只为下次用时直接用就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 显示数字不断增加的更多相关文章
- CountUp.js – 让数字以非常有趣的动画方式显示
CountUp.js 无依赖的.轻量级的 JavaScript 类,可以用来快速创建以一种更有趣的动画方式显示数值数据.尽管它的名字叫 countUp,但其实可以在两个方向进行变化,这是根据你传递的 ...
- 快速创建显示数字数据的动画——CountUp.js
由于项目需求,需要写一个数字增/减量的动画特效,最后找到了CountUp.js CountUp.js是一个无依赖,轻量级的JavaScript“类”,可用于快速创建以更有趣的方式显示数字数据的动画. ...
- 前端JS—显示赋值(一)
一:js代码必须位于<script>js代码</script> 把js代码放到<body>元素的地步,可以改善显示速度 二:js显示数据 使用 window.ale ...
- JS将数字转换为中文
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- [收集]在iPhone桌面的应用程序图标右上角显示数字
能够在ios桌面的程序icon右上角显示数字(badge number)的方法 在ViewController中的viewDidLoad方法中添加如下代码即可 - (void)viewDidLoad ...
- js显示当前时间
闲着没事在闪存里看到有人需要js显示当前时间,就一时兴起写了个. 输出格式:“2013年12月18日 星期三 上午9:05:00 ”. <script type="text/javas ...
- js 利用 ajax 加载 js ,显示加载进度 ,严格按照js的顺序先后加载到页面
js 利用 ajax 加载 js ,显示加载进度 ,严格按照js的顺序先后加载到页面 , 做手机端开发时,发现一个问题,有些浏览器,在网速比较慢的情况下,js文件没有加载完,后续的调用已经开始调用了, ...
- js动态数字时钟
js动态数字时钟 主要用到知识点: 主要是通过数组的一些方法,如:Array.from() Array.reduce() Array.find() 时间的处理和渲染 js用到面向对象的写法 实现的功能 ...
- js 格式化数字,格式化金额:
js 格式化数字,格式化金额: function number_format(number, decimals, dec_point, thousands_sep) { /* * 参数说明: * nu ...
随机推荐
- php面试上机题(2018-3-3)
需求:将第三方api的前3000条数据全部读取出来,存入对应的数据库字段 第三方api:http://pub.cloudmob.mobi/publisherapi/offers/?uid=92& ...
- Codeforces 257D
题意略. 思路:这个题目最重要的是那个不等式 a[i] <= a[i+1] <= 2 * a[i] ,你会发现0 <= a[i+1] - a[i] <= a[i],令x ...
- ‘true’==true返回false详解
JavaScript高级程序设计(第3版) 第三章非常完整地解释了原因. 3.5.7 相等操作符 在转换不同的数据类型时,相等和不相等操作符遵循下列基本规则: . 如果有一个操作数是布尔值,则在比较 ...
- Oracle trunc() 函数处理数字、日期的整理
--Oracle trunc()函数的用法/**************日期********************/1.select trunc(sysdate) from dual --2013- ...
- 安装coreseek cannot find input file: src/Makefile.in 错误解决方法
安装coreseek 出现了cannot find input file: src/Makefile.in 解决方法如下 >autoheader >automake --add-missi ...
- Indent Guides for Visual Studio 代码格式化收缩插件
代码格式化收缩插件 下载地址:http://indentguide.codeplex.com/releases/view/110312 更多关注付义方技术博客:http://blog.csdn.net ...
- iOS - XMPP 的使用
1.XMPP XMPP 是一个基于 Socket 通信的即时通讯的协议,它规范了即时通信在网络上数据的传输格式,比如登录,获取好友列表等等的格式.XMPP 在网络传输的数据是 XML 格式. 开发架构 ...
- tomcat查看端口被占用
1. tomcat有安装版和压缩版 安装版的没有关闭命令 压缩版的命令如下: tomcat关闭:catalina stop/shutdown 开启:catalina start 2. 在tomca ...
- JavaScript中的this的指代对象详解
在javascript里面,this是一个特殊的对象,它不像其他编程语言那样,是存储在实例中的值,直接指向此实例. 而是作为一个单独的指针,在不同的情况之下,指向不同的位置,这也是为什么我们会将它搞混 ...
- Keras官方中文文档:常见问题与解答
所属分类:Keras Keras FAQ:常见问题 如何引用Keras? 如何使Keras调用GPU? 如何在多张GPU卡上使用Keras "batch", "epoch ...