效果图:

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实现数字增加或者减少的动画的更多相关文章

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

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

  2. Linux LVM逻辑卷配置过程详解(创建,增加,减少,删除,卸载)

    Linux LVM逻辑卷配置过程详解 许多Linux使用者安装操作系统时都会遇到这样的困境:如何精确评估和分配各个硬盘分区的容量,如果当初评估不准确,一旦系统分区不够用时可能不得不备份.删除相关数据, ...

  3. Android-----购物车(包含侧滑删除,商品筛选,商品增加和减少,价格计算,店铺分类等)

    电商项目中常常有购物车这个功能,做个很多项目了,都有不同的界面,选了一个来讲一下. 主要包含了 店铺分类,侧滑删除,商品筛选,增加和减少,价格计算等功能. 看看效果图: 重要代码: private v ...

  4. CoreThink开发(十三)增加页面加载动画

    效果: 加载动画是由jquery和fakeloader这个js库实现的. 其实这个也可以做成一个插件,用数据库记录是否开启,选择动画的样式,那样扩展性会更好. 源码资源已经上传在我的csdn下载中. ...

  5. js实现购物车数量的增加与减少,js实现购物车数量的自增与自减

    js实现购物车数量的增加与减少,js实现购物车数量的自增与自减 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//E ...

  6. 利用 jQuery 操作页面元素的方法,实现电商网站购物车页面商品数量的增加和减少操作,要求单项价格和总价随着数量的改变而改变

    查看本章节 查看作业目录 需求说明: 利用 jQuery 操作页面元素的方法,实现电商网站购物车页面商品数量的增加和减少操作,要求单项价格和总价随着数量的改变而改变 当用户单击"+" ...

  7. 购物车增加、减少商品时动画效果:jQuery.Fly.js插件使用方法

    某些电商网站加入购物车和减少购物车商品数量时,有个小动画,以抛物线形式增减,如图:      这里用到了第三方jQuery.Fly.js插件(底层依赖Jquery库,地址:https://github ...

  8. MUI 里js动态添加数字输入框后,增加、减少按钮无效

    numbox 的自动初化是在 mui.ready 时完成的mui 页面默认会自动初始化页面中的所有数字输入框,动态构造的 DOM 需要进行手动初始化.比如:您动态创建了一个 ID 为 abc 的数字输 ...

  9. MySQL实现当前数据表的所有时间都增加或减少指定的时间间隔

    DATE_ADD() 函数向日期添加指定的时间间隔. 当前表所有数据都往后增加一天时间: UPDATE ACT_BlockNum SET CreateTime = DATE_ADD(CreateTim ...

随机推荐

  1. OpenCV鼠标滑轮事件

    鼠标的滑轮事件实现图像的缩放很方便,具体在回调函数中如下写: 其中scale可以在外部定义为全局变量,通过响应CV_EVENT_MOUSEWHEEL滑轮事件获取Scale的具体值. 获取Scale值需 ...

  2. Spring整合Struts的两种方式介绍

    1 使用Spring托管Struts Action 该种方式就是将Struts Action也视为一种Bean交给Spring来进行托管,使用时Struts的配置文件中配置的Action的classs ...

  3. Java泛型解析

    1. 概述    在引入范型之前,Java类型分为原始类型.复杂类型,其中复杂类型分为数组和类.引入范型后,一个复杂类型就可以在细分成更多的类型. 例如原先的类型List,现在在细分成List< ...

  4. FORTH基础

    body, table{font-family: 微软雅黑} table{border-collapse: collapse; border: solid gray; border-width: 2p ...

  5. C语言的函数调用过程

    从汇编的角度解析函数调用过程 看看下面这个简单函数的调用过程: int Add(int x,int y) { ; sum = x + y; return sum; } int main () { ; ...

  6. centos下配置sftp且限制用户访问目录[转]

    第一步:创建sftp服务用户组,创建sftp服务根目录 groupadd sftp #此目录及上级目录的所有者(owner)必须为root,权限不高于755,此目录的组最好设定为sftp mkdir ...

  7. 输入和输出--RandomAccessFile类

    RandomAccessFile 类 RandomAccessFile 类既可以读取文件内容,也可以向文件输出数据. RandomAccessFile 类支持 "随机访问" 的方式 ...

  8. SQL Server中的变更捕获技术--简单部署

    ------准备------ CREATE DATABASE db_test_cdc ,) ,name )); INSERT INTO t1(name)VALUES('test') ------开始- ...

  9. springMVC中使用POI方式导出excel至客户端、服务器实例

    Apache POI是Apache软件基金会的开放源码函式库,POI提供API给Java程序对Microsoft Office格式档案读和写的功能. 这里的方法支持导出excel至项目所在服务器,或导 ...

  10. java IO 类库的基本架构

    I/O问题是任何编程语言都无法回避的问题,可以说I/O问题是整个人机交互的核心问题,因为I/O是机器获取和交换信息的主要渠道,在当今这个数据大爆炸时代,I/O问题尤为突出,很容易成为一个性能瓶颈.正因 ...