CountUp.js实现数字滚动增值效果


Posted in Javascript onOctober 17, 2019

数据改动的时候,countUp.js进行数值滚动增加的动态效果,供大家参考,具体内容如下

这是js文件

// target = id of html element or var of previously selected html element where counting occurs
// startVal = the value you want to begin at
// endVal = the value you want to arrive at
// decimals = number of decimal places, default 0
// duration = duration of animation in seconds, default 2
// options = optional object of options (see below)
 
var CountUp = function (target, startVal, endVal, decimals, duration, options) {
 var self = this
 self.version = function () { return '1.9.3' }
 
 // default options
 self.options = {
 useEasing: true, // toggle easing
 useGrouping: true, // 1,000,000 vs 1000000
 separator: ',', // character to use as a separator
 decimal: '.', // character to use as a decimal
 easingFn: easeOutExpo, // optional custom easing function, default is Robert Penner's easeOutExpo
 formattingFn: formatNumber, // optional custom formatting function, default is formatNumber above
 prefix: '', // optional text before the result
 suffix: '', // optional text after the result
 numerals: [] // optionally pass an array of custom numerals for 0-9
 }
 
 // extend default options with passed options object
 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 {
 // ensure the separator is a string (formatNumber assumes this)
 self.options.separator = '' + self.options.separator
 }
 
 // make sure requestAnimationFrame and cancelAnimationFrame are defined
 // polyfill for browsers without native support
 // by Opera engineer Erik Möller
 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 tesult = currTime + timeToCall
 var id = window.setTimeout(function () { callback(tesult) }, timeToCall)
 lastTime = currTime + timeToCall
 return id
 }
 }
 if (!window.cancelAnimationFrame) {
 window.cancelAnimationFrame = function (id) {
 clearTimeout(id)
 }
 }
 
 function formatNumber (num) {
 var neg = (num < 0)
 var x, x1, x2, x3, i, len
 num = Math.abs(num).toFixed(self.decimals)
 num += ''
 x = num.split('.')
 x1 = x[0]
 x2 = x.length > 1 ? self.options.decimal + x[1] : ''
 if (self.options.useGrouping) {
 x3 = ''
 for (i = 0, len = x1.length; i < len; ++i) {
 if (i !== 0 && ((i % 3) === 0)) {
 x3 = self.options.separator + x3
 }
 x3 = x1[len - i - 1] + x3
 }
 x1 = x3
 }
 // optional numeral substitution
 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 (neg ? '-' : '') + self.options.prefix + x1 + x2 + self.options.suffix
 }
 // Robert Penner's easeOutExpo
 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)
 // error checks
 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
 }
 }
 
 // Print value to target
 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
 
 // to ease or not to ease
 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)
 }
 }
 
 // don't go past endVal since progress can exceed duration in the last frame
 if (self.countDown) {
 self.frameVal = (self.frameVal < self.endVal) ? self.endVal : self.frameVal
 } else {
 self.frameVal = (self.frameVal > self.endVal) ? self.endVal : self.frameVal
 }
 
 // decimal
 self.frameVal = Math.round(self.frameVal * self.dec) / self.dec
 
 // format and print value
 self.printValue(self.frameVal)
 
 // whether to continue
 if (progress < self.duration) {
 self.rAF = requestAnimationFrame(self.count)
 } else {
 if (self.callback) self.callback()
 }
 }
 // start your animation
 self.start = function (callback) {
 if (!self.initialize()) return
 self.callback = callback
 self.rAF = requestAnimationFrame(self.count)
 }
 // toggles pause/resume animation
 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)
 }
 }
 // reset to startVal so animation can be run again
 self.reset = function () {
 self.paused = false
 delete self.startTime
 self.initialized = false
 if (self.initialize()) {
 cancelAnimationFrame(self.rAF)
 self.printValue(self.startVal)
 }
 }
 // pass a new endVal and start animation
 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)
 }
 
 // format startVal on initialization
 if (self.initialize()) self.printValue(self.startVal)
}
module.exports = CountUp

index.html文件中需要进入该插件,和jq插件,再进行new实例化

var options = {
 useEasing: true, // 使用缓和效果
 useGrouping: true, // 使用分组效果
 separator: ',', // 分离器,数据够三位,例如100,000
 decimal: '.', // 小数点分割,例如:10.00
 prefix: '', // 第一位默认数字,例如:¥
 suffix: '' // 最后一位默认数字,例如:元,美元
 }
 // new CountUp(target, startVal, endVal, decimals, duration, options)
 // target = 目标元素的 ID
 // startVal = 开始值
 // endVal = 结束值
 // decimals = 小数位数 默认值是0
 // duration = 动画延迟秒数,默认值是2;
 // options = optional object of options (see below)
 
 var demo = new CountUp('extractionMoney', 0, data.balanceAmount, 2, 0.5, options)
 if (!demo.error) {
 demo.start()
 } else {
 console.error(demo.error)
 }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 学习笔记(六)
Dec 31 Javascript
jQuery判断元素是否存在的可靠方法
May 06 Javascript
js获取IP地址的方法小结
Jul 01 Javascript
javascript中通过arguments参数伪装方法重载
Oct 08 Javascript
JavaScript不刷新实现浏览器的前进后退功能
Nov 05 Javascript
js实现简单的可切换选项卡效果
Apr 10 Javascript
论Bootstrap3和Foundation5网格系统的异同
May 16 Javascript
javascript中对Date类型的常用操作小结
May 19 Javascript
JavaScript实现无刷新上传预览图片功能
Aug 02 Javascript
使用异步组件优化Vue应用程序的性能
Apr 28 Javascript
原生JavaScript实现随机点名表
Jan 14 Javascript
js面向对象方式实现拖拽效果
Mar 03 Javascript
countUp.js实现数字动态变化效果
Oct 17 #Javascript
jQuery/JS监听input输入框值变化实例
Oct 17 #jQuery
countup.js实现数字动态叠加效果
Oct 17 #Javascript
vue使用showdown并实现代码区域高亮的示例代码
Oct 17 #Javascript
vue-devtools的安装和使用步骤详解
Oct 17 #Javascript
express中static中间件的具体使用方法
Oct 17 #Javascript
在Express中提供静态文件的实现方法
Oct 17 #Javascript
You might like
中国第一家无线电行
2021/03/01 无线电
mysql_fetch_row,mysql_fetch_array,mysql_fetch_assoc的区别
2009/04/24 PHP
php 高效率写法 推荐
2010/02/21 PHP
PHP中获取变量的变量名的一段代码的bug分析
2011/07/07 PHP
PHP中变量引用与变量销毁机制分析
2014/11/15 PHP
php数组比较实现查找连续数的方法
2015/07/29 PHP
JS验证控制输入中英文字节长度(input、textarea等)具体实例
2013/06/21 Javascript
一个简单的动态加载js和css的jquery代码
2014/09/01 Javascript
jQuery超酷平面式时钟效果代码分享
2020/03/30 Javascript
分享几种比较简单实用的JavaScript tabel切换
2015/12/31 Javascript
浅析JS原型继承与类的继承
2016/04/07 Javascript
使用 jQuery.ajax 上传带文件的表单遇到的问题
2016/10/31 Javascript
AngularJS表单基本操作
2017/01/09 Javascript
微信小程序获取微信运动步数的实例代码
2017/07/20 Javascript
Vue实现点击后文字变色切换方法
2018/02/11 Javascript
深入浅析Vue.js计算属性和侦听器
2018/05/05 Javascript
Node.js之readline模块的使用详解
2019/03/25 Javascript
vue实现导航菜单和编辑文本的示例代码
2020/07/04 Javascript
React 条件渲染最佳实践小结(7种)
2020/09/27 Javascript
一文秒懂nodejs中的异步编程
2021/01/28 NodeJs
[01:03:03]VP vs Mineski 2018国际邀请赛淘汰赛BO3 第一场 8.22
2018/08/23 DOTA
gearman的安装启动及python API使用实例
2014/07/08 Python
Python 多线程的实例详解
2017/09/07 Python
Tensorflow分类器项目自定义数据读入的实现
2019/02/05 Python
PIL.Image.open和cv2.imread的比较与相互转换的方法
2020/06/03 Python
Python Opencv图像处理基本操作代码详解
2020/08/31 Python
python3中编码获取网页的实例方法
2020/11/16 Python
全网最全python库selenium自动化使用详细教程
2021/01/12 Python
英国网上香水店:Fragrance Direct
2016/07/20 全球购物
数据库面试要点基本概念
2013/10/31 面试题
总经理助理的职责
2014/03/14 职场文书
关于学习的决心书
2015/02/05 职场文书
高中团支书竞选稿
2015/11/21 职场文书
《田忌赛马》教学反思
2016/02/19 职场文书
升职自荐书
2019/05/09 职场文书
如何利用opencv判断两张图片是否相同详解
2021/07/07 Python