react 不用插件实现数字滚动的效果示例


Posted in Javascript onApril 14, 2020

突然要实现个数字滚动效果,网上一搜,一大堆都是用组件的。我只是想实现个简单的效果而已,决定还是自己搞搞吧。

先来看看效果吧

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 数字滚动内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木! 

Javascript 相关文章推荐
[转]JS宝典学习笔记
Feb 07 Javascript
一个可以显示阴历的JS代码
Mar 05 Javascript
jQuery$命名冲突怎么办如何解决
Jan 16 Javascript
你未必知道的JavaScript和CSS交互的5种方法
Apr 02 Javascript
JS在IE下缺少标识符的错误
Jul 23 Javascript
详解XMLHttpRequest(一)同步请求和异步请求
Sep 14 Javascript
JS三目运算(三元运算)方法详解
Mar 01 Javascript
简单谈谈require模块化jquery和angular的问题
Jun 23 jQuery
深入理解ES6学习笔记之块级作用域绑定
Aug 19 Javascript
微信小程序单选radio及多选checkbox按钮用法示例
Apr 30 Javascript
vue element upload组件 file-list的动态绑定实现
Oct 11 Javascript
微信小程序实现点击按钮后修改颜色
Dec 05 Javascript
详解在Vue.js编写更好的v-for循环的6种技巧
Apr 14 #Javascript
编写一个javascript元循环求值器的方法
Apr 14 #Javascript
javascript设计模式 ? 装饰模式原理与应用实例分析
Apr 14 #Javascript
javascript设计模式 ? 组合模式原理与应用实例分析
Apr 14 #Javascript
vue项目前端微信JSAPI与外部H5支付相关实现过程及常见问题
Apr 14 #Javascript
JavaScript代码压缩工具UglifyJS和Google Closure Compiler的基本用法
Apr 13 #Javascript
JS实现表单中点击小眼睛显示隐藏密码框中的密码
Apr 13 #Javascript
You might like
如何用php获取程序执行的时间
2013/06/09 PHP
PHP统计当前在线用户数实例讲解
2015/10/21 PHP
9个javascript语法高亮插件 推荐
2009/07/18 Javascript
jQueryUI如何自定义组件实现代码
2010/11/14 Javascript
基于jquery的修改当前TAB显示标题的代码
2010/12/11 Javascript
javascript跟随滚动效果插件代码(javascript Follow Plugin)
2013/08/03 Javascript
JavaScript解析URL参数示例代码
2013/08/12 Javascript
jQuery判断checkbox是否选中的小例子
2013/12/02 Javascript
document.write的几点使用心得
2014/05/14 Javascript
jQuery的deferred对象详解
2014/11/12 Javascript
javascript操作数组详解
2014/12/17 Javascript
Angular.JS判断复选框checkbox是否选中并实时显示
2016/11/30 Javascript
浅谈Node.js:Buffer模块
2016/12/05 Javascript
Bootstrap基本组件学习笔记之进度条(15)
2016/12/08 Javascript
详解如何在Node.js的httpServer中接收前端发送的arraybuffer数据
2018/11/11 Javascript
封装一下vue中的axios示例代码详解
2020/02/16 Javascript
Vue如何提升首屏加载速度实例解析
2020/06/25 Javascript
python解决字典中的值是列表问题的方法
2013/03/04 Python
Python将多个excel文件合并为一个文件
2018/01/03 Python
Python实现string字符串连接的方法总结【8种方式】
2018/07/06 Python
django 外键model的互相读取方法
2018/12/15 Python
python3中关于excel追加写入格式被覆盖问题(实例代码)
2020/01/10 Python
python中round函数如何使用
2020/06/19 Python
django restframework serializer 增加自定义字段操作
2020/07/15 Python
Python中logging日志记录到文件及自动分割的操作代码
2020/08/05 Python
CSS3实现复选框动画特效示例代码
2016/09/27 HTML / CSS
HTML5本地存储和本地数据库实例详解
2017/09/05 HTML / CSS
几个判断型的面试题
2012/07/03 面试题
介绍一下Java中的static关键字
2012/05/12 面试题
施工资料员的岗位职责
2013/12/22 职场文书
公司寄语大全
2014/04/10 职场文书
家长给老师的感谢信
2015/01/20 职场文书
布达拉宫导游词
2015/02/02 职场文书
水电工程师岗位职责
2015/02/13 职场文书
追悼词范文大全
2015/06/23 职场文书
Html5生成验证码的示例代码
2021/05/10 Javascript