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 数字滚动内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
更多精彩内容其他人还在看
jQuery中图片展示插件highslide.js的简单dom
前言
今天用用了一款图片展示插件highslide.js，感觉用起来很是舒畅，几乎不用怎么写代码，只需要知道如何写参数就行了。
那么这么牛叉的插件我们该如何用哪，下面我就跟大家讲解一下。
一、引入
首先我们运用绝对路径引入，这一般都是在实际项目中引用的方法，我们下载时候会... 查看详情
收藏 0赞 0分享
基于vue-ssr的静态网站生成器VuePress 初体验
什么是VuePress
VuePress由两部分组成：一个基于Vue的轻量级静态网站生成器，以及为编写技术文档而优化的默认主题。 它是为了满足Vue自己的子项目文档的需求而创建的。
VuePress为每一个由它生成的页面提供预加载的html，不仅加载速度极佳，同时对s... 查看详情
收藏 0赞 0分享
Angular数据绑定机制原理
1.Angular.js扩展浏览器的事件循环
浏览器持续等待例如用户交互这样的事件。当你在一个<input>标签里输入字符之后，这个事件的回调函数在JS解释器中执行了其包含的DOM操作，执行完毕后，浏览器响应地对DOM做出了变化。Angular拓展了这个事件循环，使... 查看详情
收藏 0赞 0分享
微信小程序如何像vue一样在动态绑定类名
小程序 开发中遇到这样一个问题...
排行榜开发的时候，前三名的样式不同，其余的样式一样。但是都是通过同一元素来遍历的,当时卡了一下。后来发现有module模块化这一概念,于是查了下api，一下子就做出来了。
就是不同名次上边的样式根据实际情况展示效果。
模... 查看详情
收藏 0赞 0分享
Vue进度条progressbar组件功能
效果图
首先我们看一下进度条组件运行出来的效果，如下图显示
进度条组件
实现过程
◾ 项目搭建
progressbar组件在一个可以直接运行的npm包，通过Yeoman进行构建，再通过Gulp+Webpack构建工具，生成的工作目录如下，其中各个文件夹的... 查看详情
收藏 0赞 0分享
redux中间件之redux-thunk的具体使用
redux的核心概念其实很简单：将需要修改的state都存入到store里，发起一个action用来描述发生了什么，用reducers描述action如何改变state tree 。创建store的时候需要传入reducer，真正能改变store中数据的是store.dispat... 查看详情
收藏 0赞 0分享
JS实现二维数组横纵列转置的方法
我想将一个二维数组横纵列转过来，我就不信只有我有这个需求，可是百度了好久，四海八荒都找遍了……
后来证明还是大神说的google好用 ~ 第一条就是，鄙视臭百度
此番记录下来，也方便各位道友查阅（好想说“仙友”，最近被一部剧毒害的后遗症 ~~~）
var n... 查看详情
收藏 0赞 0分享
关于Angularjs中跨域设置白名单问题
在config中注入$sceDelegateProvider服务使用resourceUrlWhitelist([])方法添加白名单
跨域时将method的属性设置为"jsonp"就可以访问了
app.config(["... 查看详情
收藏 0赞 0分享
浅析vue中常见循环遍历指令的使用 v-for
vue中循环遍历使用的指令是v-for
1.v-for遍历数组
(1)value in arr 遍历数组中的元素
(2)(value,index) in arr 遍历数组中的元素和数组下标
运行代码：
<body>
<div class=... 查看详情
收藏 0赞 0分享
vue双向数据绑定知识点总结
1.原理
vue的双向数据绑定的原理相信大家都十分了解；主要是通过ES5的Object对象的defineProperty属性；重写data的set和get函数来实现的
所以接下来不使用ES6进行实际的代码开发；过程中如果函数使用父级this的情况；还是使用显示缓存中间变量... 查看详情
收藏 0赞 0分享