react 数字滚动组件

效果图

给数字做了逗号符分割，更符合国际大额数字的浏览效果。

/** @Descripttion:* @version:* @Author: dal* @Date: 2021-11-02 16:48:26* @LastEditors: dal* @LastEditTime: 2021-11-03 13:50:43*/
import "./counter.less"
import { Component } from "react";
class Counter extends Component {constructor(props: any) {super(props)console.log(props)this.state = {num: props.num,//初始化的值，由父组件传递listAll: [],//数字有多少位就有多少个二维数组}}componentDidMount() {this.run()setInterval(() => {this.run()}, 4000)}run() {this.getNumber()}getNumber() {let { num } = this.statelet random = Math.floor(Math.random() * (100000 - 1) + 1); //加随机数this.setState({num: num + random})this.getData(num, num + random)}getData(prev: number, next: number) {this.start(this.getDecimal(prev), this.getDecimal(next))}getDecimal(num: number): string {return num.toLocaleString()}start(prev: string, next: string) {console.log(prev, next)let numbers = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9']let arr = []for (let n = 0; n < next.length; n++) {let start = -1;let end = -1;//先判断是不是【，】,如果是的话直接放入数组中if (next[n] === ",") {} else if (n < prev.length) {prev[n] !== "," ? start = numbers.findIndex(s => s == prev[n]) : ""end = start < numbers.findIndex(s => s == next[n]) ? numbers.findIndex(s => s == next[n]) : numbers.lastIndexOf(next[n])} else {end = numbers.findIndex(s => s == next[n])}if (start === -1 && end !== -1) start = 0console.log(start, end + 1)arr.push(numbers.slice(start, end + 1))}console.log(arr)this.setState({listAll: arr})}render() {let { listAll } = this.statereturn (<div><div className="box-number">{listAll.map((list: number[], i: number) => {return <div key={i} className="list-wrap"><div className={`roll roll_${list.length - 1}`} key={i}>{list.length === 0 ? <div>,</div> :list.map((item, index) => {return <div key={index}>{item}</div>})}</div></div>})}</div></div>)}
}
export default Counter

/* 数字滚动 */
.box-number {/* background: green; */display: flex;flex-direction: row;justify-content: center;align-items: center;
}.list-wrap {height: 3rem;text-align: center;overflow: hidden;margin: 0.1rem;
}.roll div {font-size: 2rem;line-height: 3rem;
}.roll_1 {animation: roll_1 2s forwards;/* Safari 与 Chrome */
}.roll_2 {animation: roll_2 2s forwards;/* Safari 与 Chrome */
}.roll_3 {animation: roll_3 2s forwards;/* Safari 与 Chrome */
}.roll_4 {animation: roll_4 2s forwards;/* Safari 与 Chrome */
}.roll_5 {animation: roll_5 2s forwards;/* Safari 与 Chrome */
}.roll_6 {animation: roll_6 2s forwards;/* Safari 与 Chrome */
}.roll_7 {animation: roll_7 2s forwards;/* Safari 与 Chrome */
}.roll_8 {animation: roll_8 2s forwards;/* Safari 与 Chrome */
}/*省略roll_2——roll_8*/.roll_9 {animation: roll_9 2s forwards;/* Safari 与 Chrome */
}@keyframes roll_1 {0% {transform: translate3d(0, 0, 0);}100% {transform: translate3d(0, -3rem, 0);}
}@keyframes roll_2/* Safari 与 Chrome */{0% {transform: translate3d(0, 0px, 0);}100% {transform: translate3d(0, -6rem, 0);}
}@keyframes roll_3/* Safari 与 Chrome */{0% {transform: translate3d(0, 0px, 0);}100% {transform: translate3d(0, -9rem, 0);}
}@keyframes roll_4/* Safari 与 Chrome */{0% {transform: translate3d(0, 0px, 0);}100% {transform: translate3d(0, -12rem, 0);}
}@keyframes roll_5/* Safari 与 Chrome */{0% {transform: translate3d(0, 0px, 0);}100% {transform: translate3d(0, -15rem, 0);}
}@keyframes roll_6/* Safari 与 Chrome */{0% {transform: translate3d(0, 0px, 0);}100% {transform: translate3d(0, -18rem, 0);}
}@keyframes roll_7/* Safari 与 Chrome */{0% {transform: translate3d(0, 0px, 0);}100% {transform: translate3d(0, -21rem, 0);}
}@keyframes roll_8/* Safari 与 Chrome */{0% {transform: translate3d(0, 0px, 0);}100% {transform: translate3d(0, -24rem, 0);}
}@keyframes roll_9/* Safari 与 Chrome */{0% {transform: translate3d(0, 0px, 0);}100% {transform: translate3d(0, -27rem, 0);}
}

react 数字滚动组件相关推荐

数字滚动组件（react）
基于react实现一个数字滚动组件(vue也一样,逻辑相同) 直接上代码 1.number-roll.tsx interface NumberRollProps {value: number; } c ...
初级开发者福音：手把手教你实现数字滚动效果~
文章目录一.前言二.背景知识三.实现方案 Step 1:分析需求 Step 2:实现单个数字的滚动效果 Step 3:组件接口设计 Step 4:完善组件一.前言前端数字滚动显示的场景很多, ...
php实现数字滚动效果,vue如何实现数字滚动增加效果？代码示例
项目中需要做数字滚动增加的效果,一开始很懵,研究了一下原理,发现很简单,贴出来分享一下 ^_^ 数字滚动组件: 0 props: { time: { type: Number, default: 2 ...
Vue 实现数字滚动效果
效果就是显示某个数值不是直接显示,而是从0开始滚动,直到为那个数值时停止滚动 1.新建数字滚动组件:test.vue文件 <template><div class="num ...
css 数字滚动效果
先看效果图一.前置条件首先了解两个css字符排版的样式 1. writing-mode 设置文本行是水平还是垂直布局 horizontal-tb:默认值,表示水平排版,从上到下 vertical- ...
Vue组件——数字滚动抽奖效果
闲话不多说(希望对大家有帮助),那就直接上代码吧可调整数字滚动速度,可指定开奖延迟时间,可指定开奖数字,按个人需求自行改动(录了个效果供参考,临时找的录屏,表介意) 不一一精简了组件代码 < ...
vue数字滚动效果组件
数字滚动变化效果组件效果预览体验地址用途大屏展示,数字滚动效果实现使用js控制元素移动. 关键代码如下: //修改 chang(oldVal,newVal,id){if(oldVal & ...
【React】手写虚拟滚动组件（二）可自动获取不定高度的虚拟滚动组件
前言上次那篇写的虚拟滚动后来使用发现在某些情况并不是特别好用,并且只支持固定高度.我看了下umihook的虚拟滚动,发现也不是很好用,它支持手动设定每个元素高度,但也不能支持不定高度,而且限定更多了 ...
【react】InfiniteScroll 滚动组件
在data.d.ts中定义父组件所需要传的值 import { ReactNode } from 'react' type PullStatus = 'pulling' | 'canRelease' ...

react 数字滚动组件

react 数字滚动组件相关推荐

最新文章

热门文章