React doesn’t use plug-ins to scroll numbers

Suddenly to achieve a digital scrolling effect, a search on the Internet, a lot of components are used. I just wanted a simple effect, so I decided to do it myself.

Let’s see the effect first

Also do not say much, it is not difficult to implement, but some details need to think about it

The general idea,

1. Start with 0, get the first data and record it

2. Compare with the previous data

3. Then the transform

4. Call it a day

Ok, attach the code,

export default class Number extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            prev: "000000"// Initialize 6 digits next:"000000",
            inits: 0,
            listAll: [[0],[0],[0],[0],[0],[0]],
            contrlAnimationWay: false
        }
        this.key1 = 0
    }

    componentWillUnmount() {}componentDidMount() {
        setThe Timeout (() = > {this. The run ()}) / / this. SetTimer ()} / / get the datagetNumber() {
        let { inits } = this.state
        let random = Math.floor(Math.random() * (100000 - 1) + 1);
        let prev = this.addZero(inits, 6)
        letnext = this.addZero(inits + 1235, 6) this.setState({ inits: inits + 1235 }) console.log(99, prev); console.log(99, next); This.getdata (prev, next)} addZero(num, n) {let len = num.toString().length;
        while (len < n) {
            num = "0" + num;
            len++;
        }
        returnnum; } getData(prev, next) {let { listAll } = this.state
        listAll = [];
        let prevArray = prev.toString().split("");
        let nextArray = next.toString().split("");
        console.log(11, prevArray);
        console.log(22, nextArray);
        let listInit = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

        for (let i = 0; i < prevArray.length; i++) {
            let prevNumber = parseInt(prevArray[i]);
            let nextNumber = parseInt(nextArray[i]);
            let start = -1;
            let end = -1;

            for (let j = 0; j < listInit.length; j++) {
                if (listInit[j] === prevNumber) {
                    start = j;
                }
                if(start ! == -1 && listInit[j] === nextNumber) { end = j;break;
                }
            }
            listAll.push(listInit.slice(start, end + 1));
            console.log(listAll);
        }
        this.setState({
            listAll
        })
    }
    run() {
        this.getNumber()
        this.key1++
    }
    setTimer() {
        setInterval(() => {
            setTimeout(()=>{ this.run() }, 0); }, 1000 * 4)}render() {
        let { listAll } = this.state;
        return <div className="new-tmall911"> {/* digital scroll */} <div className="box-number">
                <div onClick={this.setTimer.bind(this)}>累计</div>
                {
                    listAll.map((list, i) => {
                        return <div key={i} className="list-wrap">
                            <div className={`roll roll_${list.length - 1}`} key={this.key1++}>
                                {
                                    list.map((item, index) => {
                                        return< div key = {index} > {item} < / div >})} < / div > < / div >})} < div > have been involved in < / div > < / div > {digital end / * * /} < / div >}}Copy the code

css

Box-number {/* background: green; */ display: flex; flex-direction: row; justify-content: center; align-items: center; color: rgb(36, 35, 35); height: 100px } .list-wrap { height: 3rem; width: 3rem; text-align: center; overflow: hidden; Margin: 0.1 rem; border: 2px rgb(19, 19, 18) solid; border-radius: 2px; } .roll div { font-size: 2rem; line-height: 3rem; } .roll_1 { -webkit-animation: roll_1 2s forwards; Roll_2 {-webkit-animation: roll_2 2s forward; Roll_3 {-webkit-animation: roll_3 2s forward; /* Safari & Chrome */}. Roll_4 {-webkit-animation: roll_4 2s forward; Roll_5 {-webkit-animation: roll_5 2s forward; Roll_6 {-webkit-animation: roll_6 2s forward; Roll_7 {-webkit-animation: roll_7 2s forward; /* Safari and Chrome */}. Roll_8 {-webkit-animation: roll_8 2s forward; Roll_2 -- roll_8*/. Roll_9 {-webkit-animation: roll_9 2s forward; } @-webkit-keyframes roll_1 /} @-webkit-keyframes roll_1 / {0% {transform: translate3d(0, 0, 0); } 100% { transform: translate3d(0, -3rem, 0); }} @-webkit-keyframes roll_2 /* Safari with Chrome */ {0% {transform: translate3d(0, 0px, 0); } 100% { transform: translate3d(0, -6rem, 0); }} @-webkit-keyframes roll_3 /* Safari with Chrome */ {0% {transform: translate3d(0, 0px, 0); } 100% { transform: translate3d(0, -9rem, 0); }} @-webkit-keyframes roll_4 /* Safari with Chrome */ {0% {transform: translate3d(0, 0px, 0); } 100% { transform: translate3d(0, -12rem, 0); }} @-webkit-keyframes roll_5 /* Safari with Chrome */ {0% {transform: translate3d(0, 0px, 0); } 100% { transform: translate3d(0, -15rem, 0); }} @-webkit-keyframes roll_6 /* Safari with Chrome */ {0% {transform: translate3d(0, 0px, 0); } 100% { transform: translate3d(0, -18rem, 0); }} @-webkit-keyframes roll_7 /* Safari with Chrome */ {0% {transform: translate3d(0, 0px, 0); } 100% { transform: translate3d(0, -21rem, 0); }} @-webkit-keyframes roll_8 /* Safari with Chrome */ {0% {transform: translate3d(0, 0px, 0); } 100% { transform: translate3d(0, -24rem, 0); }} @-webkit-keyframes roll_9 /* Safari with Chrome */ {0% {transform: translate3d(0, 0px, 0); } 100% { transform: translate3d(0, -27rem, 0); }}Copy the code

Finish, call it a day ！！！！