JavaScript 数字滚动countup.js

巴山夜雨涨秋池 發表於 2019-7-8 15:57:00

<h2>1. 概述</h2>
<h3>1.1 说明</h3>
在项目过程中，有时候需要动态的去展示一些数据的加载状态，如一个数字为10000，需要5秒时间滚动加载完成。此时使用countup.js就能够很方便的处理此类功能问题。
<h3>1.2 countup.js</h3>
countup.js是一个无依赖性、轻量级的javascript类，可用于快速创建动画，以更有趣的方式显示数字/数据。详见countup.js
<h3>1.3 countup.js使用</h3>
 npm install countup  进行安装依赖
import CountUp from "countup"  在页面中引入
new CountUp(target, startVal, endVal, decimals, duration, options)
参数：
<ul>
<li style="list-style-type: none">
<ul>
<li>target: 目标元素的id  *必填</li>
<li>startVal：开始的值(从哪个值开始)  *必填</li>
<li>endVal：结束的值(滚动到哪个值结束)  *必填</li>
<li>decimals：小数位数，默认值为0  *可选</li>
<li>duration：动画持续时间，单位为秒，默认值为2  *可选</li>
<li>options：选项的可选对象  *可选
<ul>
<li style="list-style-type: none">
<ul>
<li>useEasing:true  --是否使用缓动动画，默认为缓动，可设置为false让其匀速</li>
<li>useGrouping:true --对数字进行分组，如12345，按三位一组变为类似12,345这样的</li>
<li>separator: ','  --分组时使用的分隔符默认是逗号</li>
<li>decimal: '.'  --小数点</li>
<li>prefix: ''  --添加前缀如12345，变为￥12345</li>
<li>suffix: ''  --添加后缀如12345 通过添加后缀变为12345$，12345元之类的</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
 方法：
<ul>
<li style="list-style-type: none">
<ul>
<li>暂停/恢复      pauseResume</li>
<li>重置动画       reset</li>
<li>更新值           update(newVal)</li>
</ul>
</li>
</ul>
<h2> 2. 代码</h2>
<h3>2.1 源代码</h3>
<div class="cnblogs_code">
<pre>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 !== null) {
 self.options = options
 }
 }
}
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 + "RequestAnimationFrame"];
 window.cancelAnimationFrame = window + "CancelAnimationFrame"] || window + "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;
 x2 = x.length > 1 ? self.options.decimal + x : "";
 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 + x3
 }
 x1 = x3
 }
 if (self.options.numerals.length) {
 x1 = x1.replace(//g,
 function(w) {
 return self.options.numerals[ + w]
 });
 x2 = x2.replace(//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 = " 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 = " 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 = " 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)
}
};</pre>
</div>
<h3>2.1 代码示例</h3>
<div class="cnblogs_code">
<pre>
<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></pre>
</div>
 
　　
　　
 
　　 
来源：https://www.cnblogs.com/ajuan/p/11151749.html

頁: [1]

琼殿技术论坛's Archiver

JavaScript 数字滚动countup.js