最近写了个移动端宣传页，里面有数字的效果，所以有使用到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-数字滚动效果（简单基础使用）的更多相关文章

  1. CountUp.js 数字跳转效果小插件

    CountUp.js  实现数字跳转效果的小插件 //调用方法 const easingFn = function (t, b, c, d) { var ts = (t /= d) * t; var ...

  2. WPF数字滚动效果

    和WPF数字滚动抽奖有区别,WPF数字滚动抽奖是随机的,而这里是确定的. 为了系统演示,这个效果通宵加班写了整整6个小时,中间就上了次厕所. 代码: RollingNumberItemCtrl.xam ...

  3. js文字滚动效果实现

    纯js实现,完整代码如下: <!doctype html> <html lang="en"> <head> <meta http-equi ...

  4. js 无缝滚动效果学习

    <!DOCTYPE html> <html> <head> <title>无缝滚动测试</title> <meta http-equi ...

  5. 采用cocos2d－x lua 制作数字滚动效果样例

    require "Cocos2d"require "Cocos2dConstants"local testscene = class("testsce ...

  6. 用jQuery实现数字滚动效果

    html 部分 <div class="js-box box"></div> css 部分 .statistic .box{ display: inline ...

  7. js文字滚动效果

    function (global) { var logo = document.getElementById('logo'); var text = document.createTextNode(' ...

  8. animatescroll.min.js ~~~~ jq滚动效果 优化target自定义方法

    $(".meun>div[name='meun_nav']>a").eq(1).on("click",function(){ $("bod ...

  9. Vue.js大屏数字滚动翻转效果

    ================================ 大屏数字滚动翻转效果来源于最近工作中element后台管理页面一张大屏的UI图,该UI图上有一个模块需要有数字往上翻动的效果,以下是最 ...

随机推荐

  1. python 构建自己的log系统

    python的logging模块提供了记录程序运行情况的日志功能,类似于Apache的log4j,很好很强大,这里我们就来看一下Python中内置的日志模块logging用法详解 logging模块简 ...

  2. 【原】vue-router中params和query的区别

    1.引入方式不同 query要用path来引入 this.$router.push({ path: 'test', query: { type: 2, detail: '哈哈' } }) params ...

  3. DFA和NFA的区别

    正则表达式引擎分成两类,一类称为DFA(确定性有穷自动机),另一类称为NFA(非确定性有穷自动机).两类引擎要顺利工作,都必须有一个正则式和一个文本串,一个捏在手里,一个吃下去.DFA捏着文本串去比较 ...

  4. linux vim的全目录搜索 和 hostname的设置?

    vim下的搜索命令是: vimgrep, 简写就是vim. 关于这个全局搜索的用法根grep的差不多, 但是, 如果你直接使用 grep的话 就会在vim的外部执行, 根vim内部就没有什么关系了, ...

  5. js获取当前时间，并格式化为"yyyy-MM-dd HH:mm:ss"

    /** * Created by Administrator on 2019/11/15. *指尖敲打着世界 ----一个阳光而又不失帅气的少年!!!. */ // js获取当前时间,并格式化为&qu ...

  6. ValueStack对象

    ValueStack, 即值栈对象. 值栈对象: 是整个struts数据存储的核心,或者叫中转站. 用户每次访问struts的action,都会创建一个Action对象.值栈对象.ActionCont ...

  7. pandas之数据选择

    pandas中有三种索引方法:.loc,.iloc和[],注意:.ix的用法在0.20.0中已经不建议使用了 import pandas as pd import numpy as np In [5] ...

  8. SD相关号码范围IMG设定

    一.定义项目建议的号码范围——OVZA.VN01 二.免费货物的号码范围——WC07 三.定义销售文件的号码范围——VN01 四.金额契约产品建议模组的号码范围——WSN1 五.定义出口.进口的号码范 ...

  9. Winform非UI线程更新UI界面的各种方法小结

    我们知道只有UI线程才能更新UI界面,其他线程访问UI控件被认为是非法的.但是我们在进行异步操作时,经常需要将异步执行的进度报告给用户,让用户知道任务的进度,不至于让用户误认为程序“死掉了”,特别是对 ...

  10. Linux中命令别名alias与命令替换

    当我们使用bash进行一些操作的时候,希望一些较为长的命令使用一些短的命令即可完成输入运行的话,我们就可以使用alias命令别名来帮助我们完成这个任务 alias作为一个bash的内置命令,具有一定的 ...