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 select操作控制方法小结
May 26 Javascript
使用Math.floor与Math.random取随机整数的方法详解
May 07 Javascript
关于JS数组追加数组采用push.apply的问题
Jun 09 Javascript
Flexigrid在IE下不显示数据的有效处理方法
Sep 04 Javascript
js使用for循环与innerHTML获取选中tr下td值
Sep 26 Javascript
js随机生成网页背景颜色的方法
Feb 26 Javascript
JavaScript中判断函数、变量是否存在
Jun 10 Javascript
浅析javascript的return语句
Dec 15 Javascript
购物车前端开发(jQuery和bootstrap3)
Aug 27 Javascript
微信小程序 触控事件详细介绍
Oct 17 Javascript
javascript 删除数组元素和清空数组的简单方法
Feb 24 Javascript
jQuery插件实现的日历功能示例【附源码下载】
Sep 07 jQuery
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
PHPMailer发送HTML内容、带附件的邮件实例
2014/07/01 PHP
[原创]PHP获取数组表示的路径方法分析【数组转字符串】
2017/09/01 PHP
Javascript中的var_dump函数实现代码
2009/09/07 Javascript
jQuery入门知识简介
2010/03/04 Javascript
基于jQuery的试卷自动排版系统实现代码
2011/01/06 Javascript
jQuery制作仿腾讯web qq用户体验桌面
2013/08/20 Javascript
scroll事件实现监控滚动条并分页显示(zepto.js)
2016/12/18 Javascript
从零学习node.js之利用express搭建简易论坛(七)
2017/02/25 Javascript
JS实现的模仿QQ头像资料卡显示与隐藏效果
2017/04/07 Javascript
JS基于正则表达式的替换操作(replace)用法示例
2017/04/28 Javascript
nodejs multer实现文件上传与下载
2017/05/10 NodeJs
p5.js入门教程之平滑过渡(Easing)
2018/03/16 Javascript
js中split()方法得到的数组长度问题
2018/07/19 Javascript
JS双向链表实现与使用方法示例(增加一个previous属性实现)
2019/01/31 Javascript
深入解析koa之异步回调处理
2019/06/17 Javascript
[15:58]DOTA2国际邀请赛采访专栏:Tongfu.Sansheng&KingJ,DK.rOtk
2013/08/08 DOTA
Python使用django搭建web开发环境
2017/06/09 Python
Python编程实战之Oracle数据库操作示例
2017/06/21 Python
python编程使用selenium模拟登陆淘宝实例代码
2018/01/25 Python
Python2和3字符编码的区别知识点整理
2019/08/08 Python
django写用户登录判定并跳转制定页面的实例
2019/08/21 Python
python Dijkstra算法实现最短路径问题的方法
2019/09/19 Python
如何在python开发工具PyCharm中搭建QtPy环境(教程详解)
2020/02/04 Python
python中如何设置代码自动提示
2020/07/15 Python
python如何运行js语句
2020/09/09 Python
CSS3 RGBA色彩模式使用实例讲解
2016/04/26 HTML / CSS
关于h5中的fetch方法解读(小结)
2017/11/15 HTML / CSS
意大利文具和办公产品在线商店:Y-Office
2020/02/27 全球购物
精彩的大学生自我评价
2013/11/17 职场文书
物理教师自荐信范文
2013/12/28 职场文书
大学新生入学教育方案
2014/05/16 职场文书
安全保卫工作竞聘材料
2014/08/25 职场文书
高端收音机+蓝牙音箱,JBL TUNER FM带收音蓝牙音箱评测
2021/04/24 无线电
python中requests库+xpath+lxml简单使用
2021/04/29 Python
如何判断pytorch是否支持GPU加速
2021/06/01 Python
Redis主从复制操作和配置详情
2022/09/23 Redis