首页 >> js开发 >> jsreact 不用插件实现数字滚动的效果示例js大全
jsreact 不用插件实现数字滚动的效果示例js大全
发布时间: 2021年1月13日 | 浏览:
| 分类:js开发
突然要实现个数字滚动效果，网上一搜，一大堆都是用组件的。我只是想实现个简单的效果而已，决定还是自己搞搞吧。先来看看效果吧也不多说了，实现起来不难，但是有点细节问题需要自己好好琢磨一下大概思路，1.一开始为0，获取第一次数据，记录下来2.和前一次数据进行对比3.然后transform4.最后收工好了，附上代码、
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
{/* 数字滚动 */}
{
listAll.map((list, i) => {
return
{
list.map((item, index) => {
return
{item}
})
}
})
}
{/* 数字end */}
}
}
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
{/* 数字滚动 */}
{
listAll.map((list, i) => {
return
{
list.map((item, index) => {
return
{item}
})
}
})
}
{/* 数字end */}
}
}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);
}
}
/* 数字滚动 */
.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);
}
}
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
{/* 数字滚动 */}
累计
{
listAll.map((list, i) => {
return
{
list.map((item, index) => {
return
{item}
})
}
})
}
人已参与
{/* 数字end */}
}
}
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
{/* 数字滚动 */}
累计
{
listAll.map((list, i) => {
return
{
list.map((item, index) => {
return
{item}
})
}
})
}
人已参与
{/* 数字end */}
}
}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);
}
}
/* 数字滚动 */
.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);
}
}
相关文章:
- js解决vue 给window添加和移除resize事件遇到的坑js大全
- js基于 Vue 的 Electron 项目搭建过程图文详解js大全
- js解决echarts 一条柱状图显示两个值,类似进度条的问题js大全
- js解决echarts中横坐标值显示不全(自动隐藏)问题js大全
- js详解微信小程序入门从这里出发（登录注册、开发工具、文件及结构介绍）js大全
- js解决Vue中的生命周期beforeDestory不触发的问题js大全
- jsvue中解决拖拽改变存在iframe的div大小时卡顿问题js大全
- jsvue中destroyed方法的使用说明js大全
- js在vue中created、mounted等方法使用小结js大全
- jseslint+prettier统一代码风格的实现方法js大全
刚刚发布热门点击发布时间
- [07/09]Chrome抓取页面内容代码|chrome插件获取页面数据
- [07/09]谷歌浏览器数据采集插件开发|谷歌浏览器的采集功能
- [07/09]Chrome插件轻松抓取网络数据,Chrome插件轻松抓取网页源码数据
- [07/09]chrome插件怎么安装?chrome插件开发如何安装chrome插件
- [07/09]快速chrome插件开发-北京chrome插件开发外包
- [12/31]清大光德落地护眼灯|清大光德儿童护眼灯
- [07/20]网站无障碍适老化外包改造私有化过程遇到问题整理
- [07/19]适老化改造工信部明确APP适老化规范：禁广告弹窗，网站需提供特大字体
- [07/19]适老化改造包括哪些方面?
- [07/19]什么是适老化改造？
- [07/19]适老化与信息无障碍是什么关系，二者有何异同？
- [07/19]网站如何进行适老化改造？
- [07/12]老年群体面临“数字鸿沟” 数字化网站适老化改造服务彰显人文关怀
- [07/12]数字适老化改造方案 老龄群体数字化改造受关注
- [07/11]什么是重绘?什么是回流?常见引起回流属性和方法：
