JavaScript 数字滚动countup.js
1. 概述
1.1 说明
在项目过程中,有时候需要动态的去展示一些数据的加载状态,如一个数字为10000,需要5秒时间滚动加载完成。此时使用countup.js就能够很方便的处理此类功能问题。
1.2 countup.js
countup.js是一个无依赖性、轻量级的javascript类,可用于快速创建动画,以更有趣的方式显示数字/数据。详见countup.js
1.3 countup.js使用
npm install countup 进行安装依赖
import CountUp from "countup" 在页面中引入
new CountUp(target, startVal, endVal, decimals, duration, options)
参数:
- target: 目标元素的id *必填
- startVal:开始的值(从哪个值开始) *必填
- endVal:结束的值(滚动到哪个值结束) *必填
- decimals:小数位数,默认值为0 *可选
- duration:动画持续时间,单位为秒,默认值为2 *可选
- options:选项的可选对象 *可选
- useEasing:true --是否使用缓动动画,默认为缓动,可设置为false让其匀速
- useGrouping:true --对数字进行分组,如12345,按三位一组变为类似12,345这样的
- separator: ',' --分组时使用的分隔符默认是逗号
- decimal: '.' --小数点
- prefix: '' --添加前缀如12345,变为¥12345
- suffix: '' --添加后缀如12345 通过添加后缀变为12345$,12345元之类的
方法:
- 暂停/恢复 pauseResume
- 重置动画 reset
- 更新值 update(newVal)
2. 代码
2.1 源代码
var CountUp = function(target, startVal, endVal, decimals, duration, options) {
var self = this;
self.version = function() {
return "1.9.2"
};
self.options = {
useEasing: true,
useGrouping: true,
separator: ",",
decimal: ".",
easingFn: easeOutExpo,
formattingFn: formatNumber,
prefix: "",
suffix: "",
numerals: []
};
if (options && typeof options === "object") {
for (var key in self.options) {
if (options.hasOwnProperty(key) && options[key] !== null) {
self.options[key] = options[key]
}
}
}
if (self.options.separator === "") {
self.options.useGrouping = false
} else {
self.options.separator = "" + self.options.separator
}
var lastTime = 0;
var vendors = ["webkit", "moz", "ms", "o"];
for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
window.requestAnimationFrame = window[vendors[x] + "RequestAnimationFrame"];
window.cancelAnimationFrame = window[vendors[x] + "CancelAnimationFrame"] || window[vendors[x] + "CancelRequestAnimationFrame"]
}
if (!window.requestAnimationFrame) {
window.requestAnimationFrame = function(callback, element) {
var currTime = new Date().getTime();
var timeToCall = Math.max(0, 16 - (currTime - lastTime));
var id = window.setTimeout(function() {
callback(currTime + timeToCall)
},
timeToCall);
lastTime = currTime + timeToCall;
return id
}
}
if (!window.cancelAnimationFrame) {
window.cancelAnimationFrame = function(id) {
clearTimeout(id)
}
}
function formatNumber(num) {
num = num.toFixed(self.decimals);
num += "";
var x, x1, x2, x3, i, l;
x = num.split(".");
x1 = x[0];
x2 = x.length > 1 ? self.options.decimal + x[1] : "";
if (self.options.useGrouping) {
x3 = "";
for (i = 0, l = x1.length; i < l; ++i) {
if (i !== 0 && ((i % 3) === 0)) {
x3 = self.options.separator + x3
}
x3 = x1[l - i - 1] + x3
}
x1 = x3
}
if (self.options.numerals.length) {
x1 = x1.replace(/[0-9]/g,
function(w) {
return self.options.numerals[ + w]
});
x2 = x2.replace(/[0-9]/g,
function(w) {
return self.options.numerals[ + w]
})
}
return self.options.prefix + x1 + x2 + self.options.suffix
}
function easeOutExpo(t, b, c, d) {
return c * ( - Math.pow(2, -10 * t / d) + 1) * 1024 / 1023 + b
}
function ensureNumber(n) {
return (typeof n === "number" && !isNaN(n))
}
self.initialize = function() {
if (self.initialized) {
return true
}
self.error = "";
self.d = (typeof target === "string") ? document.getElementById(target) : target;
if (!self.d) {
self.error = "[CountUp] target is null or undefined";
return false
}
self.startVal = Number(startVal);
self.endVal = Number(endVal);
if (ensureNumber(self.startVal) && ensureNumber(self.endVal)) {
self.decimals = Math.max(0, decimals || 0);
self.dec = Math.pow(10, self.decimals);
self.duration = Number(duration) * 1000 || 2000;
self.countDown = (self.startVal > self.endVal);
self.frameVal = self.startVal;
self.initialized = true;
return true
} else {
self.error = "[CountUp] startVal (" + startVal + ") or endVal (" + endVal + ") is not a number";
return false
}
};
self.printValue = function(value) {
var result = self.options.formattingFn(value);
if (self.d.tagName === "INPUT") {
this.d.value = result
} else {
if (self.d.tagName === "text" || self.d.tagName === "tspan") {
this.d.textContent = result
} else {
this.d.innerHTML = result
}
}
};
self.count = function(timestamp) {
if (!self.startTime) {
self.startTime = timestamp
}
self.timestamp = timestamp;
var progress = timestamp - self.startTime;
self.remaining = self.duration - progress;
if (self.options.useEasing) {
if (self.countDown) {
self.frameVal = self.startVal - self.options.easingFn(progress, 0, self.startVal - self.endVal, self.duration)
} else {
self.frameVal = self.options.easingFn(progress, self.startVal, self.endVal - self.startVal, self.duration)
}
} else {
if (self.countDown) {
self.frameVal = self.startVal - ((self.startVal - self.endVal) * (progress / self.duration))
} else {
self.frameVal = self.startVal + (self.endVal - self.startVal) * (progress / self.duration)
}
}
if (self.countDown) {
self.frameVal = (self.frameVal < self.endVal) ? self.endVal: self.frameVal
} else {
self.frameVal = (self.frameVal > self.endVal) ? self.endVal: self.frameVal
}
self.frameVal = Math.round(self.frameVal * self.dec) / self.dec;
self.printValue(self.frameVal);
if (progress < self.duration) {
self.rAF = requestAnimationFrame(self.count)
} else {
if (self.callback) {
self.callback()
}
}
};
self.start = function(callback) {
if (!self.initialize()) {
return
}
self.callback = callback;
self.rAF = requestAnimationFrame(self.count)
};
self.pauseResume = function() {
if (!self.paused) {
self.paused = true;
cancelAnimationFrame(self.rAF)
} else {
self.paused = false;
delete self.startTime;
self.duration = self.remaining;
self.startVal = self.frameVal;
requestAnimationFrame(self.count)
}
};
self.reset = function() {
self.paused = false;
delete self.startTime;
self.initialized = false;
if (self.initialize()) {
cancelAnimationFrame(self.rAF);
self.printValue(self.startVal)
}
};
self.update = function(newEndVal) {
if (!self.initialize()) {
return
}
newEndVal = Number(newEndVal);
if (!ensureNumber(newEndVal)) {
self.error = "[CountUp] update() - new endVal is not a number: " + newEndVal;
return
}
self.error = "";
if (newEndVal === self.frameVal) {
return
}
cancelAnimationFrame(self.rAF);
self.paused = false;
delete self.startTime;
self.startVal = self.frameVal;
self.endVal = newEndVal;
self.countDown = (self.startVal > self.endVal);
self.rAF = requestAnimationFrame(self.count)
};
if (self.initialize()) {
self.printValue(self.startVal)
}
};
2.1 代码示例
<!-- 数字滚动 -->
<template>
<div id="numScroll" style="width: 200px;height: 200px;font-size: 30px;font-weight: bold;"></div>
</template> <script>
import CountUp from "countup"
export default {
name: "numberScroll.vue",
mounted() {
this.numberScroll()
},
methods: {
numberScroll() {
let count = new CountUp("numScroll", 0, 56565, 0, 5, {duration: 5, useEasing: false})
if (!count.error) {
count.start()
} else {
console.log(count.error)
}
}
}
}
</script>
JavaScript 数字滚动countup.js的更多相关文章
- Countup.js:vue-countup-v2(npm)数字滚动插件
1.官方地址:http://inorganik.github.io/countUp.js/ 2.官方demo: 3.参数说明: params——start(开始数字).end(结束数字).decima ...
- CountUp.js – 让数字以非常有趣的动画方式显示
CountUp.js 无依赖的.轻量级的 JavaScript 类,可以用来快速创建以一种更有趣的动画方式显示数值数据.尽管它的名字叫 countUp,但其实可以在两个方向进行变化,这是根据你传递的 ...
- jquery轻量级数字动画插件jquery.countup.js
插件描述: jquery.countup.js 是一款轻量级jquery数字动画插件.该数字动画插件可以在页面滚动时,将指定的数字从0开始计数增加动画. 插件说明 jquery.countup.js ...
- 快速创建显示数字数据的动画——CountUp.js
由于项目需求,需要写一个数字增/减量的动画特效,最后找到了CountUp.js CountUp.js是一个无依赖,轻量级的JavaScript“类”,可用于快速创建以更有趣的方式显示数字数据的动画. ...
- CountUp.js用法 让数字动起来的插件
CountUp.js 无依赖的.轻量级的 JavaScript 类,可以用来快速创建以一种更有趣的动画方式显示数值数据.尽管它的名字叫 countUp,但其实可以在两个方向进行变化,这是根据你传递的 ...
- CountUp.js让页面数字跳动起来
CountUp.js 无依赖的.轻量级的 JavaScript 类,可以用来快速创建以一种更有趣的动画方式显示数值数据.尽管它的名字叫 countUp,但其实可以在两个方向进行变化,这是根据你传递的 ...
- Vue.js大屏数字滚动翻转效果
================================ 大屏数字滚动翻转效果来源于最近工作中element后台管理页面一张大屏的UI图,该UI图上有一个模块需要有数字往上翻动的效果,以下是最 ...
- CountUp.js 数字跳转效果小插件
CountUp.js 实现数字跳转效果的小插件 //调用方法 const easingFn = function (t, b, c, d) { var ts = (t /= d) * t; var ...
- 数字滚动特效 NumScroll
1.使用前先引入jquery2.前端学习群:814798690 下载地址 https://github.com/chaorenzeng/jquery.numscroll.js.git 快速使用 1.引 ...
随机推荐
- mybatis 中 if else 用法
mybaits 中没有 else 要用 chose when otherwise 代替 下面就是MyBatis中的if....else...表示方法 <choose> <when t ...
- leyou_03_cors解决ajax的跨域请求问题
1.为什么会有跨域问题 因为跨域问题是浏览器对于ajax请求的一种安全限制:一个页面发起的ajax请求,只能是与当前页域名相同的路径,这能有效的阻止跨站攻击. 因此:跨域问题 是针对ajax的一种限制 ...
- C#可扩展编程之MEF(一):MEF简介及简单的Demo
在文章开始之前,首先简单介绍一下什么是MEF,MEF,全称Managed Extensibility Framework(托管可扩展框架).单从名字我们不难发现:MEF是专门致力于解决扩展性问题的 ...
- pyd打包补充
网上说的将python代码,通过Cython打包成pyd的教程挺多,好处也多,主要有两个: 1.隐藏代码 2.加速运行速度 补充两点: 1.打包脚本配置 __build__.py from distu ...
- 【DM642学习笔记九】XDS560仿真器 Can't Initialize Target CPU
以前用的瑞泰的ICETEK-5100USB仿真器,现在换成XDS560试了试,速度快多了.把720*576的图片在imgae中显示也只需要四五秒钟.而5100仿真器需要三四分钟. 仿真器驱动安好后,刚 ...
- JDBC2 --- 获取数据库连接的方式二 --- 技术搬运工(尚硅谷)
/** * 方式二,对方式一的迭代 * 在如下的程序中,不出现第三方的api,使得程序具有更好的可移植性. * @throws Exception */ @Test public void testC ...
- storm的安装
一. 安装storm要先本机搭建好zookeeper集群(手动目录安装或者CDH安装) 二. Java 6 Python 2.6.6 unzip(针对使用语言要安装好相应环境 比如java 要JDK和 ...
- HDFS常用Java API
- LINUX设置SUID,SGID,Stick bit
前面介绍过SUID与SGID的功能,那么,如何打开文件使其成为具有SUID与SGID的权限呢?这就需要使用数字更改权限了.现在应该知道,使用数字 更改权限的方式为“3个数字”的组合,那么,如果在这3个 ...
- Wamp PHP 安装各种拓展
安装redis 下载dll文件地址:http://pecl.php.net/package/redis 下载对应版本nginx:NTS apache:TS 文件放在php的ext目录下 php.ini ...