countUp.js-数字滚动效果（简单基础使用）

　　最近写了个移动端宣传页，里面有数字的效果，所以有使用到countUp.js。

　　以下内容有包括：h5页面countUp.js的引入和实例、参数说明、事件简单使用和描述、countUp.js源代码。

　　附上countUp.js的gitHub地址：http://inorganik.github.io/countUp.js/

效果

重点部分-参数

h5页面代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        .content{

            text-align: center

        }

    </style>

    <script src="./js/countUp.js"></script>

</head>

<body>

    <div class="content">数字一：<span id="num1"></span></div>

    <div class="content"><button onclick="start()">开始</button><button onclick="pause()">暂停</button><button onclick="reset()">重置</button><button onclick="updata()">更新值</button></div>

    <div class="content">数字二：<span id="num2"></span></div>

</body>

<script>

    var options={

        useEasing: true,  // 过渡动画效果，默认ture

        useGrouping: true,  // 千分位效果，例：1000->1,000。默认true

        separator: ',',   // 使用千分位时分割符号

        decimal: '.',   // 小数位分割符号

        prefix: '',    // 前置符号

        suffix: ''    // 后置符号，可汉字

    }

    // target,startVal,endVal,decimals,duration,options

    // dom节点, 初始值,  结束值, 小数位数, 过渡几秒 , 初始参数

    var num1 = new CountUp('num1', 0, 100, 0, 2,options),

        num2 = new CountUp('num2', 0, 200, 0, 2,options)

    function start(){

        // 开始

        num1.start()

    }

    function pause(){

        // 暂停或继续

        num1.pauseResume()

    }

    function reset(){

        // 重置初始值

        num1.reset()

    }

    function updata(){

        // 重新赋值

        num1.update(888)

    }

</script>

</html>

countUp.js

var CountUp=function(target,startVal,endVal,decimals,duration,options){var self=this;self.version=function(){return"1.9.2"};self.options={useEasing:true,useGrouping:true,separator:",",decimal:".",easingFn:easeOutExpo,formattingFn:formatNumber,prefix:"",suffix:"",numerals:[]};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{self.options.separator=""+self.options.separator}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 id=window.setTimeout(function(){callback(currTime+timeToCall)},timeToCall);lastTime=currTime+timeToCall;return id}}if(!window.cancelAnimationFrame){window.cancelAnimationFrame=function(id){clearTimeout(id)}}function formatNumber(num){num=num.toFixed(self.decimals);num+="";var x,x1,x2,x3,i,l;x=num.split(".");x1=x[0];x2=x.length>1?self.options.decimal+x[1]:"";if(self.options.useGrouping){x3="";for(i=0,l=x1.length;i<l;++i){if(i!==0&&((i%3)===0)){x3=self.options.separator+x3}x3=x1[l-i-1]+x3}x1=x3}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 self.options.prefix+x1+x2+self.options.suffix}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);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}};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;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)}}if(self.countDown){self.frameVal=(self.frameVal<self.endVal)?self.endVal:self.frameVal}else{self.frameVal=(self.frameVal>self.endVal)?self.endVal:self.frameVal}self.frameVal=Math.round(self.frameVal*self.dec)/self.dec;self.printValue(self.frameVal);if(progress<self.duration){self.rAF=requestAnimationFrame(self.count)}else{if(self.callback){self.callback()}}};self.start=function(callback){if(!self.initialize()){return}self.callback=callback;self.rAF=requestAnimationFrame(self.count)};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)}};self.reset=function(){self.paused=false;delete self.startTime;self.initialized=false;if(self.initialize()){cancelAnimationFrame(self.rAF);self.printValue(self.startVal)}};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)};if(self.initialize()){self.printValue(self.startVal)}};

countUp.js-数字滚动效果（简单基础使用）的更多相关文章

CountUp.js 数字跳转效果小插件
CountUp.js 实现数字跳转效果的小插件 //调用方法 const easingFn = function (t, b, c, d) { var ts = (t /= d) * t; var ...
WPF数字滚动效果
和WPF数字滚动抽奖有区别,WPF数字滚动抽奖是随机的,而这里是确定的. 为了系统演示,这个效果通宵加班写了整整6个小时,中间就上了次厕所. 代码: RollingNumberItemCtrl.xam ...
js文字滚动效果实现
纯js实现,完整代码如下: <!doctype html> <html lang="en"> <head> <meta http-equi ...
js 无缝滚动效果学习
<!DOCTYPE html> <html> <head> <title>无缝滚动测试</title> <meta http-equi ...
采用cocos2d－x lua 制作数字滚动效果样例
require "Cocos2d"require "Cocos2dConstants"local testscene = class("testsce ...
用jQuery实现数字滚动效果
html 部分 <div class="js-box box"></div> css 部分 .statistic .box{ display: inline ...
js文字滚动效果
function (global) { var logo = document.getElementById('logo'); var text = document.createTextNode(' ...
animatescroll.min.js ~~~~ jq滚动效果优化target自定义方法
$(".meun>div[name='meun_nav']>a").eq(1).on("click",function(){ $("bod ...
Vue.js大屏数字滚动翻转效果
================================ 大屏数字滚动翻转效果来源于最近工作中element后台管理页面一张大屏的UI图,该UI图上有一个模块需要有数字往上翻动的效果,以下是最 ...

随机推荐

打开App显示文件已损坏，打不开，您应该将它移到废纸篓，怎么办？
1. 首先确保系统安全设置已经改为任何来源 sudo spctl --master-disable 2. 打开任何来源后,到应用程序目录中尝试运行软件,如果仍提示损坏,请在应用图标上,鼠标右键,在弹出 ...
JNI使用常见错误
1. java.lang.UnsatisfiedLinkError: Couldn't load hello: **findLibrary returned null** 解决方案: * 如果处理器平 ...
silverlight开发实例（Prism+MVVM+RIA）（二）--创建shell及用户登录
在上篇基本说清了本项目的基本框架,下面开始说下项目的加载和shell.开始之前在建立EF时出现了一个问题,我在数据库中建立了视图,而在EF导入视图时出现因无法匹配主键导致无法导入视图的问题,检查发现是 ...
Jenkins 有用的API
/quietDown: Put Jenkins in a Quiet mode, in preparation for a restart. In that mode Jenkins don’t st ...
JavaScript参考DOM部分
目录 DOM完整版 DOM 介绍节点节点树 Node接口属性方法 NodeList 接口,HTMLCollection 接口介绍 NodeList.prototype.length Node ...
【转载】mysql行列转换方法总结
[转载]mysql行列转换方法总结 [MySQL] 行列转换变化各种方法实现总结(行变列报表统计.列变行数据记录统计等) Mysql 列转行统计查询 .行转列统计查询在某些数据库中有交叉表,但在My ...
kmp算法分析和C++实现
知乎高赞分析作者:逍遥行链接:https://www.zhihu.com/question/21923021/answer/37475572来源:知乎著作权归作者所有.商业转载请联系作者获得授权, ...
1. centos7 的安装
选择上海时间我们选择桌面版选择手动配置分区选择标准分区修改主机名开始安装设置密码设置用户名接下来等待安装完同样的操作再安装3台机器!!这里不多赘述. 安装完之后就重启接下来给不同机 ...
JS小知识--获取当前日期的时间和上周五时间
获取当前日期的时间和上周五时间 var today=new Date();//获取当前时间var weekday=today.getDay();//获取星期几 var monday=new Da ...
C++常见面试题：
一.进程和线程的概念和区别 1.进程是系统进行资源调度的基本单位 2.线程是系统进行运算调度(处理器分配{CPU.内存})的基本单位二.进程间的通信进程间的通信共有5种: 1.管道通常指无名管道 ...

countUp.js-数字滚动效果（简单基础使用）

countUp.js-数字滚动效果（简单基础使用）的更多相关文章

随机推荐

热门专题