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 相关文章推荐
showModalDialog 和 showModelessDialog
Jan 22 Javascript
javaScript checkbox 全选/反选及批量删除
Apr 28 Javascript
JS实现清除指定cookies的方法
Sep 20 Javascript
JS实现仿中关村论坛评分后弹出提示效果的方法
Feb 23 Javascript
如何实现chrome浏览器关闭页面时弹出“确定要离开此面吗?”
Mar 05 Javascript
JavaScript使用forEach()与jQuery使用each遍历数组时return false 的区别
Aug 26 Javascript
AngularJS实现星星等级评分功能
Sep 24 Javascript
js实现上下左右弹框划出效果
Mar 08 Javascript
Jquery-data的三种用法
Apr 18 jQuery
js传递数组参数到后台controller的方法
Mar 29 Javascript
es6 for循环中let和var区别详解
Jan 12 Javascript
vue递归实现树形组件
Jul 15 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
php守护进程 加linux命令nohup实现任务每秒执行一次
2011/07/04 PHP
php中修改浏览器的User-Agent来伪装你的浏览器和操作系统
2011/07/29 PHP
php中运用http调用的GET和POST方法示例
2014/09/29 PHP
php实现数组中索引关联数据转换成json对象的方法
2015/07/08 PHP
PHP查看当前变量类型的方法
2015/07/31 PHP
thinkphp3.2.3版本的数据库增删改查实现代码
2016/09/22 PHP
Thinkphp 5.0实现微信企业付款到零钱
2018/09/30 PHP
索趣科技的答案
2007/02/07 Javascript
Javascript &amp; DHTML 实例编程(教程)基础知识
2007/06/02 Javascript
JavaScript高级程序设计 阅读笔记(十四) js继承机制的实现
2012/08/14 Javascript
js与css实现弹出层覆盖整个页面的方法
2014/12/13 Javascript
Jquery注册事件实现方法
2015/05/18 Javascript
JS实现三级折叠菜单特效,其它级可自动收缩
2015/08/06 Javascript
JS+CSS实现的经典tab选项卡效果代码
2015/09/16 Javascript
Angularjs使用directive自定义指令实现attribute继承的方法详解
2016/08/05 Javascript
用NodeJS实现批量查询地理位置的经纬度接口
2016/08/16 NodeJs
常用jQuery选择器汇总
2017/02/02 Javascript
Webpack打包慢问题的完美解决方法
2017/03/16 Javascript
实现微信小程序的wxml文件和wxss文件在webstrom的支持
2017/06/12 Javascript
网页中的图片查看器viewjs使用方法
2017/07/11 Javascript
node中koa中间件机制详解
2017/08/22 Javascript
electron demo项目npm install安装失败的解决方法
2018/02/06 Javascript
JavaScript如何借用构造函数继承
2019/11/06 Javascript
Echarts.js无法引入问题解决方案
2020/10/30 Javascript
Python语言编写电脑时间自动同步小工具
2013/03/08 Python
在Django中编写模版节点及注册标签的方法
2015/07/20 Python
小议Python中自定义函数的可变参数的使用及注意点
2016/06/21 Python
Django rest framework实现分页的示例
2018/05/24 Python
HTML5在a标签内放置块级元素示例代码
2013/08/23 HTML / CSS
银行求职推荐信范文
2013/11/30 职场文书
初中生期末评语大全
2014/04/24 职场文书
我的教育故事演讲稿
2014/05/04 职场文书
2015年治庸问责工作总结
2015/07/27 职场文书
导游词之贵州百里杜鹃
2019/10/29 职场文书
Spring Boot 实现 WebSocket
2022/04/30 Java/Android
SQL Server2019安装的详细步骤实战记录(亲测可用)
2022/06/10 SQL Server