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 相关文章推荐
超级兔子让浮动层消失的前因后果
Mar 09 Javascript
30分钟就入门的正则表达式基础教程
Feb 25 Javascript
Node.js Mongodb 密码特殊字符 @的解决方法
Apr 11 Javascript
js截取字符串功能的实现方法
Sep 27 Javascript
使用ngrok+express解决本地环境中微信接口调试问题
Feb 26 Javascript
JS div匀速移动动画与变速移动动画代码实例
Mar 26 Javascript
微信小程序在线客服自动回复功能(基于node)
Jul 03 Javascript
Vue 实现前端权限控制的示例代码
Jul 09 Javascript
Vue中通过Vue.extend动态创建实例的方法
Aug 13 Javascript
vue webpack build资源相对路径的问题及解决方法
Jun 04 Javascript
基于Ionic3实现选项卡切换并重新加载echarts
Sep 24 Javascript
vue+elementUI动态增加表单项并添加验证的代码详解
Dec 17 Vue.js
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
codeigniter显示所有脚本执行时间的方法
2015/03/21 PHP
js脚本学习 比较实用的基础
2006/09/07 Javascript
用cookies实现的可记忆的样式切换效果代码下载
2007/12/24 Javascript
jQuery 顺便学习下CSS选择器 奇偶匹配nth-child(even)
2010/05/24 Javascript
封装了一个js图片轮换效果的函数
2011/09/28 Javascript
JavaScript与DOM组合动态创建表格实例
2012/12/23 Javascript
JavaScript汉诺塔问题解决方法
2015/04/21 Javascript
浅谈javascript实现八大排序
2015/04/27 Javascript
node.js调用C++开发的模块实例
2015/07/03 Javascript
用canvas 实现个图片三角化(LOW POLY)效果
2016/02/18 Javascript
解析ajaxFileUpload 异步上传文件简单使用
2016/12/30 Javascript
canvas实现爱心和彩虹雨效果
2017/03/09 Javascript
Vue.js 2.0学习教程之从基础到组件详解
2017/04/24 Javascript
使用vue实现grid-layout功能实例代码
2018/01/05 Javascript
cocos2dx+lua实现橡皮擦功能
2018/12/20 Javascript
vue-router源码之history类的浅析
2019/05/21 Javascript
浅谈vuex的基本用法和mapaction传值问题
2019/11/08 Javascript
原生JS利用transform实现banner的无限滚动示例代码
2020/06/15 Javascript
vue print.js打印支持Echarts图表操作
2020/11/13 Javascript
python实现在目录中查找指定文件的方法
2014/11/11 Python
python用reduce和map把字符串转为数字的方法
2016/12/19 Python
django orm 通过related_name反向查询的方法
2018/12/15 Python
Django中自定义admin Xadmin的实现代码
2019/08/09 Python
python线程的几种创建方式详解
2019/08/29 Python
pytorch方法测试详解——归一化(BatchNorm2d)
2020/01/15 Python
使用python+poco+夜神模拟器进行自动化测试实例
2020/04/23 Python
Python基于template实现字符串替换
2020/11/27 Python
python 获取谷歌浏览器保存的密码
2021/01/06 Python
小学教育毕业生自荐信
2013/11/18 职场文书
施工班组长岗位职责
2014/01/05 职场文书
2014年两会学习心得体会
2014/03/10 职场文书
网络宣传方案
2014/03/15 职场文书
超市优秀员工事迹材料
2014/05/01 职场文书
2015年母亲节寄语
2015/03/23 职场文书
消防隐患整改通知书
2015/04/22 职场文书
MySQL中的 inner join 和 left join的区别解析(小结果集驱动大结果集)
2023/05/08 MySQL