js数字累加 · 递增动画 - 代码可封装

代码如下：

<!DOCTYPE html>
<html> <head> <meta charset="UTF-8"> <title>数字自动增加</title>
</head>
<body><p><font size="5" id="time">0</font> <font size="5" color="orangered">%</font>    </p><script src="jquery.min.3.1.0.js" type="text/javascript" charset="utf-8"></script>
<script>
//数字自增到某一值动画参数（目标元素,自定义配置）
function NumAutoPlusAnimation(targetEle, options) {/*可以自己改造下传入的参数，按照自己的需求和喜好封装该函数*/ //不传配置就把它绑定在相应html元素的data-xxxx属性上吧 options = options || {};var $this = document.getElementById(targetEle), time = options.time || $this.data('time'), //总时间--毫秒为单位 finalNum = options.num || $this.data('value'), //要显示的真实数值 regulator = options.regulator || 100, //调速器，改变regulator的数值可以调节数字改变的速度 step = finalNum / (time / regulator),/*每30ms增加的数值--*/ count = 0, //计数器 initial = 0; var timer = setInterval(function() { count = count + step; if(count >= finalNum) { clearInterval(timer); count = finalNum; } //t未发生改变的话就直接返回 //避免调用text函数，提高DOM性能 var t = Math.floor(count); if(t == initial) return;initial = t;$this.innerHTML = initial; }, 30);
} // 调用函数，实现效果
var percet = 100; //分数或者百分比
NumAutoPlusAnimation("time", { time: 1500, num: percet, regulator: 50
})
</script>
</body>
</html>

参考原文 ·

文章地址： JavaScript实现数值自动增加动画

以上就是关于“ js数字累加 · 递增动画 - 封装篇 ” 的全部内容。

js数字累加 · 递增动画 - 封装篇相关推荐

js遍历追加html子样式,前端基本功：JS（十一）动画封装(CSS样式获取、JSON遍历)...
动画原理动画基本原理.gif 人走路的时候, 步长动画的基本原理 : 让盒子的 offsetLeft + 步长盒子原来的位置 0 + 10 盒子现在的offsetLeft 10 动画基本原理的 ...
js数字金额滚动动画(vue)
vue金额滚动动画效果预览 QQ20190124-0.gif <template><div><div class="head" @click=&qu ...
Flutter 自定义动画 — 数字递增动画和文字逐行逐字出现或消失动画
系列文章 Flutter 旋转动画 - RotationTransition Flutter 平移动画 - 4种实现方式 Flutter 淡入淡出与逐渐出现动画 Flutter 尺寸缩放.形状.颜色. ...
js实现数字动态递增效果
<!DOCTYPE html> <html> <head><meta charset="UTF-8"><title>js ...
js 数字递增递减_数字推理满分技巧！不是干货，请批我！
公众号:兼得公考数字推理不是广东的特色考点,但广东的数字推理是比较有"特色"的,他的特色就是简单,特别是2019年的数字推理.但我们不能因为某一两年考得简单而简单地学,为了让大家 ...
android开发游记：仿支付宝余额数字累加滚动效果的实现
支付宝更新9.0后,细心的朋友会发现新增了一个动画效果,就是进入我的钱包的时候,我的余额会有一段滚动显示的动画效果,比如说你有100块,余额就从0滚动到100,看到自己的钱在不断涨,让我们这些穷屌丝莫 ...
android扑克发牌动画,JS实现纸牌发牌动画
本文实例为大家分享了JS实现纸牌发牌动画的具体代码,供大家参考,具体内容如下先看演示游戏构建准备 1.准备52张纸牌 2.一张桌布 3.编辑工具为 Visual Code 技术概要 1.对象操作 ...
前端实现数字快速递增_天正CAD教程之递增文字应用实例
好课推荐: 1.CAD2014:点击查看 2.室内&全屋:点击查看 3.CAD2019:点击查看4.CAD2018:点击查看5.Bim教程:点击查看 6.室内手绘:点击查看7.CAD三维:点击 ...
hide show vue 动画_（Vue动效）7.Vue中动画封装
关键词:动画封装--进行可复用一.如何封装? 1.使用:局部组件传递数据+局部组件中使用JS动画 2.原理:将动画效果完全第封装在一个名为<fade>的组件中,今后如要复用,只需要复制有 ...

js数字累加 · 递增动画 - 封装篇

js数字累加 · 递增动画 - 代码可封装

代码如下：

js数字累加 · 递增动画 - 封装篇相关推荐

最新文章

热门文章