jQuery实现数字自动增加或者减少的动画效果示例


Posted in jQuery onDecember 11, 2018

本文实例讲述了jQuery实现数字自动增加或者减少的动画效果。分享给大家供大家参考,具体如下:

效果图:

jQuery实现数字自动增加或者减少的动画效果示例

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可以解决动画先后顺序,即延迟动画

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

更多关于jQuery相关内容还可查看本站专题:《jQuery动画与特效用法总结》、《jQuery切换特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery拖拽特效与技巧总结》、《jQuery表格(table)操作技巧汇总》、《jQuery常见经典特效汇总》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
基于jquery实现二级联动效果
Mar 30 jQuery
jQuery判断邮箱格式对错实例代码讲解
Apr 12 jQuery
jQuery remove()过滤被删除的元素(推荐)
Jul 18 jQuery
jQuery实现拼图小游戏(实例讲解)
Jul 24 jQuery
vue-cli webpack 引入jquery的方法
Jan 10 jQuery
jQuery niceScroll滚动条错位问题的解决方法
Feb 03 jQuery
jQuery超简单遮罩层实现方法示例
Sep 06 jQuery
jQuery选择器选中最后一个元素,倒数第二个元素操作示例
Dec 10 jQuery
jquery validate 实现动态增加/删除验证规则操作示例
Oct 28 jQuery
jquery实现商品sku多属性选择功能(商品详情页)
Dec 20 jQuery
jQuery实现推拉门效果
Oct 19 jQuery
JavaScript枚举选择jquery插件代码实例
Nov 17 jQuery
JQuery实现ajax请求的示例和注意事项
Dec 10 #jQuery
jQuery选择器选中最后一个元素,倒数第二个元素操作示例
Dec 10 #jQuery
jQuery+css last-child实现选择最后一个子元素操作示例
Dec 10 #jQuery
JQuery Ajax执行跨域请求数据的解决方案
Dec 10 #jQuery
jQuery时间戳和日期相互转换操作示例
Dec 07 #jQuery
超好用的jQuery分页插件jpaginate用法示例【附源码下载】
Dec 06 #jQuery
jQuery动态操作表单示例【基于table表格】
Dec 06 #jQuery
You might like
长波知识介绍
2021/03/01 无线电
咖啡界又出新概念,无需咖啡豆的分子咖啡
2021/03/03 咖啡文化
模板引擎正则表达式调试小技巧
2011/07/20 PHP
php实现图形显示Ip地址的代码及注释
2014/01/20 PHP
PHP中使用glob函数实现一句话删除某个目录下的所有文件
2014/07/22 PHP
PHP基于SMTP协议实现邮件发送实例代码
2017/04/27 PHP
豆瓣网的jquery代码实例
2008/06/15 Javascript
动态表格Table类的实现
2009/08/26 Javascript
javascript 单例/单体模式(Singleton)
2011/04/07 Javascript
javascript 学习笔记(一)DOM基本操作
2011/04/08 Javascript
JS 如果改变span标签的是否隐藏属性
2011/10/06 Javascript
表格奇偶行设置不同颜色的核心JS代码
2013/12/24 Javascript
jquery弹窗插件colorbox绑定动态生成元素的方法
2014/06/20 Javascript
javascript自定义函数参数传递为字符串格式
2014/07/29 Javascript
Javascript MVC框架Backbone.js详解
2014/09/18 Javascript
相册展示PhotoSwipe.js插件实现
2016/08/25 Javascript
Angular2中Bootstrap界面库ng-bootstrap详解
2016/10/18 Javascript
JavaScript 中调用 Kotlin 方法实例详解
2017/06/09 Javascript
uin-app+mockjs实现本地数据模拟
2020/08/26 Javascript
[43:58]DOTA2上海特级锦标赛C组败者赛 Newbee VS Archon第二局
2016/02/27 DOTA
[44:10]2018DOTA2亚洲邀请赛 4.5 淘汰赛 EG vs VP 第一场
2018/04/06 DOTA
[48:46]完美世界DOTA2联赛PWL S2 SZ vs FTD.C 第二场 11.19
2020/11/19 DOTA
Python中设置变量访问权限的方法
2015/04/27 Python
Python中用altzone()方法处理时区的教程
2015/05/22 Python
Python中将变量按行写入txt文本中的方法
2018/04/03 Python
Python 读取某个目录下所有的文件实例
2018/06/23 Python
python递归下载文件夹下所有文件
2019/08/31 Python
如何使用python代码操作git代码
2020/02/29 Python
澳大利亚领先的在线葡萄酒零售商:Get Wines Direct
2018/03/27 全球购物
世界上最大的字体市场:MyFonts
2020/01/10 全球购物
乌克兰机票、铁路和巴士票、酒店搜索、保险:Tickets.ua
2020/01/11 全球购物
设计师大码女装:11 Honoré
2020/05/03 全球购物
介绍一下SQL Server的全文索引
2013/08/15 面试题
我的中国梦演讲稿500字
2014/08/19 职场文书
中国在我心中演讲稿
2014/09/13 职场文书
办公室规章制度范本
2015/08/04 职场文书