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 相关文章推荐
找到了一篇jQuery与Prototype并存的冲突的解决方法
Aug 29 Javascript
js获取元素到文档区域document的(横向、纵向)坐标的两种方法
May 17 Javascript
JS创建事件的三种方法(实例代码)
May 12 Javascript
基于javascript实现按圆形排列DIV元素(二)
Dec 02 Javascript
JS异步加载的三种实现方式
Mar 16 Javascript
在iFrame子页面里实现模态框的方法
Aug 17 Javascript
JS温故而知新之变量提升和时间死区
Jan 27 Javascript
vue父组件触发事件改变子组件的值的方法实例详解
May 07 Javascript
运用js实现图层拖拽的功能
May 24 Javascript
原生JS无缝滑动轮播图
Oct 22 Javascript
解决vue单页面 回退页面 keeplive 缓存问题
Jul 22 Javascript
js实现手表表盘时钟与圆周运动
Sep 18 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
数字转英文
2006/12/06 PHP
PHP最常用的ini函数分析 针对PHP.ini配置文件
2010/04/22 PHP
在win系统安装配置 Memcached for PHP 5.3 图文教程
2015/03/03 PHP
关于PHP虚拟主机概念及如何选择稳定的PHP虚拟主机
2018/11/20 PHP
jquery实现倒计时代码分享
2014/06/13 Javascript
jquery对象和javascript对象即DOM对象相互转换
2014/08/07 Javascript
jQuery级联操作绑定事件实例
2014/09/02 Javascript
JavaScript中使用Callback控制流程介绍
2015/03/16 Javascript
Jquery实现鼠标移动放大图片功能实例
2015/03/25 Javascript
JavaScript运算符小结
2015/06/03 Javascript
JavaScript实现对下拉列表值进行排序的方法
2015/07/15 Javascript
jQuery 特性操作详解及实例代码
2016/09/29 Javascript
浅谈Angular的$q, defer, promise
2016/12/20 Javascript
jQuery插件echarts实现的多折线图效果示例【附demo源码下载】
2017/03/04 Javascript
详解Vue中watch的详细用法
2018/11/28 Javascript
详解vuex数据传输的两种方式及this.$store undefined的解决办法
2019/08/26 Javascript
JavaScript实现简单日历效果
2020/09/11 Javascript
通过滑动翻页效果实现和移动端click事件问题
2021/01/26 Javascript
[04:32]玩具屠夫中文语音节选
2020/08/23 DOTA
Python的randrange()方法使用教程
2015/05/15 Python
Python实现投影法分割图像示例(一)
2020/01/17 Python
在tensorflow中设置保存checkpoint的最大数量实例
2020/01/21 Python
python实现的分层随机抽样案例
2020/02/25 Python
python实现门限回归方式
2020/02/29 Python
详解KMP算法以及python如何实现
2020/09/18 Python
推荐10个CSS3 制作的创意下拉菜单效果
2014/02/11 HTML / CSS
找到不普通的东西:Bonanza
2016/10/20 全球购物
考试没考好检讨书
2014/01/31 职场文书
2014年3.15团委活动总结
2014/03/16 职场文书
公务员试用期满考核材料
2014/05/22 职场文书
导游词300字
2015/02/13 职场文书
学校实习推荐信
2015/03/27 职场文书
小学见习报告
2015/06/23 职场文书
关于感恩的作文
2019/08/26 职场文书
如何自己动手写SQL执行引擎
2021/06/02 MySQL
React自定义hook的方法
2022/06/25 Javascript