jq实现数字增加或者减少的动画
效果图:

1.HTML:
<div class="up"></div>
<br>
<div class="down"></div>
2.JS:
$(function(){
var obj={
el:$(".up"),
max:1000,
start:100//增加开始的初始值
}
var obj2={
el:$(".down"),
max:1000,
end:100//减少到最小的值
}
up(obj);
down(obj2)
})
function up(obj){
var item=obj.el;
var num=obj.max;
var start=obj.start;
time2=setInterval(function(){
start++;
if(start>num){
start=num;
clearInterval(time2);
}
item.text(start)
},1)
}
function down(obj){
var item=obj.el;
var num=obj.max;
var min=obj.end;
time1=setInterval(function(){
num--;
if(num<min){
num=min;
clearInterval(time1)
}
item.text(num)
},1)
}
可以自行设定每次增加的大小
问题:1。要是需要用背景图片中的数字替换当前显示的数字,并且有上下滚动的效果怎么做? background-position
2。实现了问题1的效果之后,如果要最大的位数最先停止动画,后面的位数依次停止怎么做?或者开始动画的时候,最后一位数开始动画,最大的位数最后开始动画怎么做?
3。如果数字增加到千的时候,在千位之后加逗号,例如:1,000。这又怎么做?
4。怎样用settimeout来实现?settimeout可以解决动画先后顺序,即延迟动画
jq实现数字增加或者减少的动画的更多相关文章
- CountUp.js – 让数字以非常有趣的动画方式显示
CountUp.js 无依赖的.轻量级的 JavaScript 类,可以用来快速创建以一种更有趣的动画方式显示数值数据.尽管它的名字叫 countUp,但其实可以在两个方向进行变化,这是根据你传递的 ...
- Linux LVM逻辑卷配置过程详解(创建,增加,减少,删除,卸载)
Linux LVM逻辑卷配置过程详解 许多Linux使用者安装操作系统时都会遇到这样的困境:如何精确评估和分配各个硬盘分区的容量,如果当初评估不准确,一旦系统分区不够用时可能不得不备份.删除相关数据, ...
- Android-----购物车(包含侧滑删除,商品筛选,商品增加和减少,价格计算,店铺分类等)
电商项目中常常有购物车这个功能,做个很多项目了,都有不同的界面,选了一个来讲一下. 主要包含了 店铺分类,侧滑删除,商品筛选,增加和减少,价格计算等功能. 看看效果图: 重要代码: private v ...
- CoreThink开发(十三)增加页面加载动画
效果: 加载动画是由jquery和fakeloader这个js库实现的. 其实这个也可以做成一个插件,用数据库记录是否开启,选择动画的样式,那样扩展性会更好. 源码资源已经上传在我的csdn下载中. ...
- js实现购物车数量的增加与减少,js实现购物车数量的自增与自减
js实现购物车数量的增加与减少,js实现购物车数量的自增与自减 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//E ...
- 利用 jQuery 操作页面元素的方法,实现电商网站购物车页面商品数量的增加和减少操作,要求单项价格和总价随着数量的改变而改变
查看本章节 查看作业目录 需求说明: 利用 jQuery 操作页面元素的方法,实现电商网站购物车页面商品数量的增加和减少操作,要求单项价格和总价随着数量的改变而改变 当用户单击"+" ...
- 购物车增加、减少商品时动画效果:jQuery.Fly.js插件使用方法
某些电商网站加入购物车和减少购物车商品数量时,有个小动画,以抛物线形式增减,如图: 这里用到了第三方jQuery.Fly.js插件(底层依赖Jquery库,地址:https://github ...
- MUI 里js动态添加数字输入框后,增加、减少按钮无效
numbox 的自动初化是在 mui.ready 时完成的mui 页面默认会自动初始化页面中的所有数字输入框,动态构造的 DOM 需要进行手动初始化.比如:您动态创建了一个 ID 为 abc 的数字输 ...
- MySQL实现当前数据表的所有时间都增加或减少指定的时间间隔
DATE_ADD() 函数向日期添加指定的时间间隔. 当前表所有数据都往后增加一天时间: UPDATE ACT_BlockNum SET CreateTime = DATE_ADD(CreateTim ...
随机推荐
- 版本控制——TortoiseSVN (3)多版本发布
=================================版权声明================================= 版权声明:原创文章 禁止转载 请通过右侧公告中的“联系邮 ...
- ADO.NET复习总结(1)--ADO.NET基础介绍
1.为什么要学ADO.NET: 之前我们所学只能在查询分析器里查看数据,操作数据,我们不能让普通用户去学sql, 所以我们搭建一个界面(Web或Winform)让用户方便的操作数据库中的数据. 2.什 ...
- Hadoop问题:chmod 0700 of directory /var/lib/apt/lists/
问题描述: apt-get update W: chmod of directory /: Operation not permitted) E: Could not open : Permissio ...
- Ajax常用实例
摘录自:http://www.cnblogs.com/gaopeng527/p/4459622.html 1. 级联下拉列表 例1.1 级联下拉列表. (1)编写AjaxRequest.js文件,并将 ...
- 让自己写的项目支持Cocoapods管理
学会使用别人的 Pods 依赖库以后, 你一定对创建自己的依赖库很有兴趣吧,现在我们一起来制作自己的Pods依赖库. 1.创建自己的 github 仓库 上图中标识出了6处地方 Repository ...
- php实现监控在线服务应用程序小栗子
下面我就给大家举个栗子(例子) 某单位需要实现监控服务器状态,和监控服务器应用网站,还有需要监控服务器的中间件,数据库状态监控.听到这个任务是不是恨透头疼,这想起来是不是头疼.还好有系统可用,但是我现 ...
- java8大基本数据类型
基本类型 字节数 位数 最大值 最小值 byte 1byte 8bit 2^7 - 1 -2^7 short 2byte 16bit 2^15 - 1 -2^15 int 4byte 32bit 2^ ...
- myeclipse取消js校验
最近玩一个新的项目,项目里面集成了别的项目,在从SVN上第一次荡下来的时候编译的时候老是校验jq文件,老是被卡主,设置myeclipse环境的时候我已经取消了所有的js校验了,但是还是不行.恼火之余, ...
- 解决eclipse maven工程中src/main/resources目录下创建的文件夹所显示样式不是文件夹,而是"包"图标样式的问题
参考:http://blog.csdn.net/luwei42768/article/details/72268246 eclipse项目中创建maven项目后,有时在执行命令maven update ...
- Linux cp 移动的时候报错
报错如下: cp: omitting directory `./nginx-1.12.1' 原因: 要移动的目录下还存在有目录 解决: cp -r 文件名 地址 注意: 这里的-r代表递归 ...