今天就跟大家聊聊有关使用jQuery怎么实现数字自动增加或减少,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。
jquery是一个简洁而快速的JavaScript库,它具有独特的链式语法和短小清晰的多功能接口、高效灵活的css选择器,并且可对CSS选择器进行扩展、拥有便捷的插件扩展机制和丰富的插件,是继Prototype之后又一个优秀的JavaScript代码库,能够用于简化事件处理、HTML文档遍历、Ajax交互和动画,以便快速开发网站。
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
可以解决动画先后顺序,即延迟动画
看完上述内容,你们对使用jQuery怎么实现数字自动增加或减少有进一步的了解吗?如果还想了解更多知识或者相关内容,请关注亿速云行业资讯频道,感谢大家的支持。
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。