数字跳动countupjs和react中使用react-countup

已于 2022-09-05 17:06:03 修改
阅读量3.4k 收藏 8
点赞数 8
分类专栏： react 文章标签： react.js javascript 前端
于 2022-09-05 16:55:12 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_67171480/article/details/126705874
版权

前几天写项目有个数据信息展示，要简单的从零到目标数的跳动效果。于是就用了react-countup。

这里就说一下这个十分简单好用轻松实现数字跳动效果的countupjs和react-countup。

countup.js 是一个轻量级，无依赖的JavaScript类，通过简单的设置就可以达到数字滚动的效果

官网：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)}};

我们打开官网以后可以看到这下面就有一个demo

 相应的代码底下也会生成

 countupjs，支持了react，vue，angular和wordpress，基本写前端的都能用了，因为我们项目使用的react，所以我们就用react-countup。

上代码

yarn add react-countup或者npm install react-countup 

import React from 'react'
import styles from './Information.module.scss'
import CountUp from 'react-countup'

export default function Information({ informationList: list, time }) {
  return (
    <div className={styles.Information}>
      <div className="information">
        {list.map(item => (
          <div className="box" key={item.id}>
            <div className="getnumber">
              {item.number < 1000 ? (
                <CountUp 
                start={0}
                 end={item.number} 
                 duration={time}
                //  不算太常用
                //  useEasing={true}
                //  useGrouping={true}
                //  separator=" "
                //  decimals={2}
                //  decimal=","
                //  prefix="A"
                //  suffix="N"
                //  onComplete={onComplete}
                //  onStart={onStart}           
                 ></CountUp>
              ) : item.number < 999950 ? (
                <CountUp
                  start={0}
                  end={item.number / 1000}
                  duration={time}
                  decimals="1"
                  suffix=" K"
                ></CountUp>
              ) : (
                <CountUp
                  start={0}
                  end={item.number / 1000000}
                  duration={time}
                  decimals="1"
                  suffix="M"
                ></CountUp>
              )}
            </div>
            <div className="introduce">{item.info}</div>
          </div>
        ))}
      </div>
    </div>
  )
}

其实我们实现简单的数字跳动效果，也就只需要一个start（起始值），一个end（目标值），一个duration（动画时长）基本就搞定了，有时候可能还会多一个suffix（放在后面的单位）和decimals（保留几位小数），关于颜色大小字体...相关的直接用css就可以完成。

效果图：

 忘了附上react-countup的github了：react-countup - npm

最上面countupjs的源码展开一下：

看起来舒服一点

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)
    }
};

呐呐呐~854
关注
专栏目录
React网页数据自动递增CountUp中基本使用
songshao の blog
11-27 2055
react中如何让页面数据自动递增，在此本人使用的是CountUp.js，让数字递增，主要使用方法，如下面程序端： import React, { Component } from 'react' import CountUp, { useCountUp } from 'react-countup' export default function CompleteHook(v) { cons...
countUp.js
07-16
在jsp界面引用该js， new CountUp("放置数字的元素ID", 起始数字, 结束数字, 0, 2).start(); 例如new CountUp("bcky", 0, result.obj[i].ONLINENUM, 0, 2).start(); 即可实现数字动态跳动
CountUp.js 使用教程
最新发布
gitblog_01073的博客
08-09 594
CountUp.js 使用教程 countUp.jsAnimates a numerical value by counting to it项目地址:https://gitcode.com/gh_mirrors/co/countUp.js 项目介绍 CountUp.js 是一个轻量级的 JavaScript 类，无需依赖其他库，可以快速创建动画效果，以更有趣的方式展示数字数据。它适用于需要在网页...
数字滚动 动画插件 countUp.js
王敬辉的博客
12-02 517
数字滚动 动画插件 <!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-...
countup.js
Sandkin的博客
06-19 4738
CountUp。js是一个相互间无依赖的,轻量级的JavaScript“类”,可以用来快速创建动画显示数值数据以一种更有趣的方式。 尽管它的名字,CountUp可以在两个方向数,根据startVal和endValparams通过。 CountUp。js支持所有浏览器。 CountUP:demo演示 参数: 目标= html元素id,输入,svg文本元素,或之前选定元素的var /输入
CountUp.js( 轻量级数字动画插件 )
weixin_56456012的博客
01-06 7800
CountUp.js( 轻量级数字动画插件 )
js实现数字跳动到指定数字代码
CodingNoob
08-15 4430
运行结果如下： <!DOCTYPE html> <head> <title>js实现数字跳动到指定数字</title> <style> h1 {font-size: 150px;text-align:center;} p {text-align:center;} but...
react-countup：around围绕CountUp.js的可配置React组件包装器
02-05
import CountUp from 'react-countup' ; 简单的例子 < CountUp xss=removed> 这将在渲染时开始从0到100向上计数过渡。 渲染道具示例 < CountUp start = { - 875.039 } end = { 160527.012 } duration = { ...
around围绕CountUp.js的可配置React组件包装器-React开发
05-27
around围绕CountUp.js的可配置React组件包装React CountUp围绕CountUp.js的可配置React组件包装。 单击此处查看CodeSandbox。 寻找v3.x文件吗？ 单击此处以获取以前的文档。 目录安装用法简单示例渲染道具示例更多...
react-antd-admin-template：一个基于React + Antd的后台管理模版，在线预览https：nlrx-wjc.github.ioreact-antd-admin-template
02-05
是一个基于React和Ant Design的后台管理系统模板。它内置了用户登录/登出，动态路由，权限重置，用户管理等典型的业务模型，可以帮助您快速构建企业级中后台产品原型，是你接私活的不二之选。 本系统的开发灵感来自 ...
react + vite +testing-library 构建单元测试
weixin_37764929的博客
06-15 1058
业务复杂多变迭代快速，加上编写单测其实是耗费一定时间去做的，可能很多人认为编写单元测试是一件吃力不讨好的事儿，不会在项目中主动的去做单元测试，一两年前笔者也是这样的一种心态，对于单测嗤之以鼻，但是随着看的书多了，学习的东西多了，明白了单测可有有效的保证我们一些核心功能的正确性，同样可以反推我们的设计一些通用功能是否全面，再者也可以在我们改动一些功能后，校验原有功能的正确性，说这么多，还需要大家自己写起来单测，一个东西好不好，只有用起来了才知道，在vite下配置jest单测代码一上传至git，有兴趣的朋友，可
jquery轻量级数字动画插件jquery.countup.js
11-20
插件描述：jquery.countup.js是一款轻量级jquery数字动画插件。该数字动画插件可以在页面滚动时，将指定的数字从0开始计数增加动画。演示地址：http://www.jq22.com/jquery-info10784
js实现数字跳动到指定数字
10-14
主要为大家详细介绍了js实现数字跳动到指定数字，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
CountUpjs是一个数字滚动增加展示效果展示的JS库
08-11
CountUp.js是一个数字滚动增加展示效果展示的JS库
react jsoneditor 的学习使用
王为仁的博客
03-04 8048
react jsoneditor 的使用npm 的地址具体使用然后发现各种的问题，so 手动修改了一下源代码相关链接 npm 的地址 地址在这里 在npm 上面还有一个效果配图 具体使用 import JSONInput from 'react-json-editor-ajrm'; import locale from 'react-json-editor-ajrm/locale/...
CountUp.js用法 让数字动起来的插件
weixin_34100227的博客
07-21 1329
CountUp.js 无依赖的、轻量级的 JavaScript 类，可以用来快速创建以一种更有趣的动画方式显示数值数据。尽管它的名字叫 countUp，但其实可以在两个方向进行变化，这是根据你传递的 startVal 和 endVal 参数判断的。 再加上滚轮事件判断……   可配置的参数：target = 目标元素的 ID；startVal = 开始值；endVal = 结束值；decima...
轻量级数字动画插件CountUp.js。vue中使用
weixin_43758930的博客
05-11 1133
countUp.js是一款轻量级/无依赖的js计数器动画特效插件
countUp.js在react中的应用
alexsaurora的博客
03-02 7195
公司项目需要做一个数字显示器，让我找到一个有趣的项目——CountUp.js。它是一个免费的轻量级javaScript工具，可用于快速创建动画，以更有趣的方式显示数字数据。作用：动画显示数字，千位分隔符，添加前后缀等等。 demo在查看CountUp.js工具demo github在countUp的GitHub， 已经有四千多的Star了，但是只有两条issues，这说明什么，几乎所有人都可...
JS_countup.js 的简单使用，数字滚动效果
小歪博客
03-09 1187
countup.js 是一个轻量级，无依赖的JavaScript类，通过简单的设置就可以达到数字滚动的效果。
react 使用react-viewer --save
05-25
react-viewer 是一个基于 React 的图片浏览器组件，可以在网页中实现图片的预览和放大缩小等功能。如果你想在自己的项目中使用 react-viewer，可以通过以下命令来安装： ``` npm install react-viewer --save ``` 安装完成后，在需要使用的组件中引入即可，例如： ```javascript import ReactViewer from 'react-viewer'; <ReactViewer visible={this.state.visible} onClose={() => { this.setState({ visible: false }); }} images={[{ src: 'http://example.com/1.jpg', alt: '图片1' }, { src: 'http://example.com/2.jpg', alt: '图片2' }]} /> ``` 其中，`visible` 表示图片浏览器是否可见，`onClose` 是关闭图片浏览器的回调函数，`images` 是需要浏览的图片数组。具体的参数和用法可以查看 react-viewer 的文档。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值