效果图:

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. 1.(python)__new__与__init__

    1.来比较一下__new__与__init__: (1)__new__在初始化实例前调用,__init__在初始化实例之后调用,用来初始化实例的一些属性或者做一些初始操作 # -*- coding: ...

  2. nginx中支持.htaccess并禁止php在特定目录无法运行

    在nginx.conf中的server里面 include /yjdata/www/thinkphp/.htaccess; 在对应的目录下面创建.htaccess,并填写以下内容,(image是跟目下 ...

  3. svn checkout The XML response contains invalid XML

    svn checkout 报错:The XML response contains invalid XML 待解决? ---目前没有找到好的解决方法,svn数据库中存的log入手应该可以,有时间再去看 ...

  4. 前端css常用class命名id命名

    1.常用id的命名: (1)页面结构 容器: container 页头:header 内容:content/container 页面主体:main 页尾:footer 导航:nav 侧栏:sideba ...

  5. HX711初步处理记录

    参考文档为极客工坊大神记录 http://www.geek-workshop.com/forum.php?mod=viewthread&tid=2315&highlight=hx711 ...

  6. 数据存储之HTTP Cookie

    Cookie (HTTP Cookie) 作用 HTTP本身是无状态的,客户端通过Cookie来存储会话信息 限制 cookie在性质上是绑定在特定域名下的 意思是说当设定了一个cookie之后,再给 ...

  7. .net Core学习笔记1 创建简单的 .net core项目

    1.打开vs2017>Web 1:创建实体类: namespace ProductMvc.Models { //商品类型 public class ProductType { public in ...

  8. Android开发之漫漫长途 Fragment番外篇——TabLayout+ViewPager+Fragment

    该文章是一个系列文章,是本人在Android开发的漫漫长途上的一点感想和记录,我会尽量按照先易后难的顺序进行编写该系列.该系列引用了<Android开发艺术探索>以及<深入理解And ...

  9. 05_Python Format Operation

    Python格式化输出 print('name: %s,version: %s,code: %d' %('Python',3.6,3)) print('name: {name},version: {v ...

  10. 分离Webpack开发环境与生产环境的配置

    这是Webpack+React系列配置过程记录的第五篇.其他内容请参考: 第一篇:使用webpack.babel.react.antdesign配置单页面应用开发环境 第二篇:使用react-rout ...