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 相关文章推荐
模拟用户操作Input元素,不会触发相应事件
May 11 Javascript
ajax页面无刷新 IE下遭遇Ajax缓存导致数据不更新的问题
Dec 11 Javascript
JQuery异步获取返回值中文乱码的解决方法
Jan 29 Javascript
JavaScript获取浏览器信息的方法
Nov 20 Javascript
JavaScript核心语法总结(推荐)
Jun 02 Javascript
jQuery插件实现图片轮播特效
Jun 16 Javascript
JavaScript简单计算人的年龄示例
Apr 15 Javascript
JavaScript定时器setTimeout()和setInterval()详解
Aug 18 Javascript
vue 添加vux的代码讲解
Nov 30 Javascript
Vue中 v-if/v-show/插值表达式导致闪现的原因及解决办法
Oct 12 Javascript
你应该了解的JavaScript Array.map()五种用途小结
Nov 14 Javascript
layui 阻止图片上传的实例(before方法)
Sep 26 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
codeigniter中view通过循环显示数组数据的方法
2015/03/20 PHP
JavaScript与HTML结合的基本使用方法整理
2015/10/12 PHP
php 解析xml 的四种方法详细介绍
2016/10/26 PHP
在Javascript里访问SharePoint列表数据的实现方法
2011/05/22 Javascript
js列举css中所有图标的实现代码
2011/07/04 Javascript
JQuery魔力之$(&quot;tagName&quot;)与selector
2012/03/05 Javascript
JavaScript运动减速效果实例分析
2015/08/04 Javascript
JavaScript中字面量与函数的基本使用知识
2015/10/20 Javascript
关于webuploader插件使用过程遇到的小问题
2016/11/07 Javascript
nodejs 终端打印进度条实例代码
2017/04/22 NodeJs
JS实现简易的图片拖拽排序实例代码
2017/06/09 Javascript
VueJS组件之间通过props交互及验证的方式
2017/09/04 Javascript
微信小程序loading组件显示载入动画用法示例【附源码下载】
2017/12/09 Javascript
详解webpack3编译兼容IE8的正确姿势
2017/12/21 Javascript
vue技术分享之你可能不知道的7个秘密
2018/04/09 Javascript
Vue 实现树形视图数据功能
2018/05/07 Javascript
linux环境下python中MySQLdb模块的安装方法
2017/06/16 Python
Python生成短uuid的方法实例详解
2018/05/29 Python
Python基础之循环语句用法示例【for、while循环】
2019/03/23 Python
pycharm 批量修改变量名称的方法
2019/08/01 Python
Python字符串大小写转换拼接删除空白
2019/09/19 Python
python3 实现调用串口功能
2019/12/26 Python
Keras设定GPU使用内存大小方式(Tensorflow backend)
2020/05/22 Python
如何在 Matplotlib 中更改绘图背景的实现
2020/11/26 Python
python 模拟登录B站的示例代码
2020/12/15 Python
Banana Republic欧盟:美国都市简约风格的代表品牌
2018/05/09 全球购物
PHP中如何使用Cookie
2015/10/28 面试题
超市营业员求职简历的自我评价
2013/10/17 职场文书
建设投标担保书
2014/05/13 职场文书
新兵入伍心得体会
2014/09/04 职场文书
党员自我评价2015
2015/03/03 职场文书
接待员岗位职责范本
2015/04/15 职场文书
消防安全月活动总结
2015/05/08 职场文书
会计实训总结范文
2015/08/03 职场文书
写作指导:怎么书写竞聘演讲稿?
2019/07/04 职场文书
使用Nginx的访问日志统计PV与UV
2022/05/06 Servers