99偷拍视频精品区一区二,口述久久久久久久久久久久,国产精品夫妇激情啪发布,成人永久免费网站在线观看,国产精品高清免费在线,青青草在线观看视频观看,久久久久久国产一区,天天婷婷久久18禁,日韩动漫av在线播放直播

react不用插件實現數字滾動的方法

這篇文章主要講解了react不用插件實現數字滾動的方法，內容清晰明了，對此有興趣的小伙伴可以學習一下，相信大家閱讀完之后會有幫助。

創新互聯建站主要從事網頁設計、PC網站建設（電腦版網站建設）、wap網站建設（手機版網站建設）、成都響應式網站建設、程序開發、網站優化、微網站、小程序設計等，憑借多年來在互聯網的打拼，我們在互聯網網站建設行業積累了豐富的做網站、網站制作、網站設計、網絡營銷經驗，集策劃、開發、設計、營銷、管理等多方位專業化運作于一體。

突然要實現個數字滾動效果，網上一搜，一大堆都是用組件的。我只是想實現個簡單的效果而已，決定還是自己搞搞吧。

先來看看效果吧

react不用插件實現數字滾動的方法

也不多說了，實現起來不難，但是有點細節問題需要自己好好琢磨一下

大概思路，

1.一開始為0，獲取第一次數據，記錄下來

2.和前一次數據進行對比

3.然后transform

4.最后收工

好了，附上代碼、

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

  componentWillUnmount() {
  }
  componentDidMount() {
    setTimeout(()=>{
      this.run()
    })
    // this.setTimer()
  }


  // 獲取數據
  getNumber() {
    let { inits } = this.state
    let random = Math.floor(Math.random() * (100000 - 1) + 1);
    let prev = this.addZero(inits, 6)
    let next = 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++;
    }
    return num;
  }
  // 對比數據前后變化
  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">
      {/* 數字滾動 */}
      <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>人已參與</div>
      </div>
      {/* 數字end */}
    </div>
  }
}

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.1rem;
  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; /* Safari 與 Chrome */
 }
 .roll_2 {
  -webkit-animation: roll_2 2s forwards; /* Safari 與 Chrome */
 }

 .roll_3 {
  -webkit-animation: roll_3 2s forwards; /* Safari 與 Chrome */
 }

 .roll_4 {
  -webkit-animation: roll_4 2s forwards; /* Safari 與 Chrome */
 }

 .roll_5 {
  -webkit-animation: roll_5 2s forwards; /* Safari 與 Chrome */
 }

 .roll_6 {
  -webkit-animation: roll_6 2s forwards; /* Safari 與 Chrome */
 }

 .roll_7 {
  -webkit-animation: roll_7 2s forwards; /* Safari 與 Chrome */
 }

 .roll_8 {
  -webkit-animation: roll_8 2s forwards; /* Safari 與 Chrome */
 }
 
 /*省略roll_2——roll_8*/

 .roll_9 {
  -webkit-animation: roll_9 2s forwards; /* Safari 與 Chrome */
 }

 @-webkit-keyframes roll_1 /* Safari 與 Chrome */
 {
  0% {
   transform: translate3d(0, 0, 0);
  }
  100% {
   transform: translate3d(0, -3rem, 0);
  }
 }

 @-webkit-keyframes roll_2 /* Safari 與 Chrome */
 {
  0% {
   transform: translate3d(0, 0px, 0);
  }
  100% {
   transform: translate3d(0, -6rem, 0);
  }
 }
 @-webkit-keyframes roll_3 /* Safari 與 Chrome */
 {
  0% {
   transform: translate3d(0, 0px, 0);
  }
  100% {
   transform: translate3d(0, -9rem, 0);
  }
 }
 @-webkit-keyframes roll_4 /* Safari 與 Chrome */
 {
  0% {
   transform: translate3d(0, 0px, 0);
  }
  100% {
   transform: translate3d(0, -12rem, 0);
  }
 }
 @-webkit-keyframes roll_5 /* Safari 與 Chrome */
 {
  0% {
   transform: translate3d(0, 0px, 0);
  }
  100% {
   transform: translate3d(0, -15rem, 0);
  }
 }
 @-webkit-keyframes roll_6 /* Safari 與 Chrome */
 {
  0% {
   transform: translate3d(0, 0px, 0);
  }
  100% {
   transform: translate3d(0, -18rem, 0);
  }
 }
 @-webkit-keyframes roll_7 /* Safari 與 Chrome */
 {
  0% {
   transform: translate3d(0, 0px, 0);
  }
  100% {
   transform: translate3d(0, -21rem, 0);
  }
 }
 @-webkit-keyframes roll_8 /* Safari 與 Chrome */
 {
  0% {
   transform: translate3d(0, 0px, 0);
  }
  100% {
   transform: translate3d(0, -24rem, 0);
  }
 }
 @-webkit-keyframes roll_9 /* Safari 與 Chrome */
 {
  0% {
   transform: translate3d(0, 0px, 0);
  }
  100% {
   transform: translate3d(0, -27rem, 0);
  }
 }

看完上述內容，是不是對react不用插件實現數字滾動的方法有進一步的了解，如果還想學習更多內容，歡迎關注創新互聯行業資訊頻道。

分享文章：react不用插件實現數字滾動的方法
文章位置：http://www.yijiale78.com/article30/jjjjso.html

成都網站建設公司_創新互聯，為您提供網站改版、動態網站、網站收錄、靜態網站、標簽優化、服務器托管

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯

手機網站建設