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 ...
随机推荐
- APIs
应用程序接口(application programe interfaces)
- Mybatis延迟加载和查询缓存
摘录自:http://www.linuxidc.com/Linux/2016-07/133593.htm 阅读目录 一.延迟加载 二.查询缓存 一.延迟加载 resultMap可以实现高级映射(使用a ...
- Oracle临时表空间组
Oracle 10g之前,同一用户的多个会话只可以使用同一个临时表空间,因为在给定的时间只有一个临时表空间默认给用户,为了解决这个潜在的瓶颈,Oracle支持临时表空间组即包含多个临时表空间的集合.临 ...
- js 原型 对象篇
一切皆对象 js中 值类型就不是对象 剩下的都是对象(也就是引用类型) typeof()运算符 判断四种值类型 typeof 10; --> Number || typeof &quo ...
- Azure VM 防止被入侵
伴随着开源Linux系统的逐渐盛行,在机器上线之前配置好安全策略至关重要,分享几点有关Azure Linux VM机器的安全建议如下: 1.禁止root账号登录虚拟机,并增加密码的复杂度(大小写字母, ...
- JS中数组的常用方法
首先,在开始前我们先了解一下什么是数组. 1.什么是数组? 数组就是一组数据的集合,其表现形式就是内存中的一段连续的内存地址,数组名称其实就是连续内存地址的首地址.说白了它就是将一堆数据按照一定的顺序 ...
- HTML5与css3权威指南(一)
doctype声明: <!DOCTYPE html> 字符编码: <meta charset="utf-8"> 不允许写结束标记:area,base,br. ...
- mysql修改root用户密码
自我总结,欢迎拍砖! 目的:若root用户密码忘记,则需要重新设置root用户的密码. 步骤: 1.找到mysql安装目录下的 my.ini 文件,找到[mysqlId]一行,在下方添加语句:skip ...
- R语言-探索多个变量
目的: 通过探索文件pseudo_facebook.tsv数据来学会多个变量的分析流程 通过探索diamonds数据集来探索多个变量 通过酸奶数据集探索多变量数据 知识点: 散点图 dplyr汇总数据 ...
- c# 类属性和方法
属性 public 类字段 就相当于c#里面暴露给外面的属性 类似nodejs的 module.exports 但是属性又不同于普通的字段,属性只是外部包装字段 没有自己的任何含量 类似退换后的方法. ...