极乐门资源网 Design By www.ioogu.com
突然要实现个数字滚动效果,网上一搜,一大堆都是用组件的。我只是想实现个简单的效果而已,决定还是自己搞搞吧。
先来看看效果吧
也不多说了,实现起来不难,但是有点细节问题需要自己好好琢磨一下
大概思路,
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,数字滚动
极乐门资源网 Design By www.ioogu.com
极乐门资源网
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
极乐门资源网 Design By www.ioogu.com
暂无react 不用插件实现数字滚动的效果示例的评论...
更新日志
2024年12月23日
2024年12月23日
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]