css3数字滚动特效简单实现

放在大屏里面的数字滚动特效的简单实现，
思路参考：https://blog.csdn.net/nidunlove/article/details/78257549
结合业务需求和自己的思考拿vue写了一遍，有些地方实现逻辑不一样，代码也简洁很多
效果图：

附上代码：

<template><div class="box" :key="key"><div style="border: 1px yellow solid" class="block" v-for="list in listAll"><div v-bind:class="[roll, rollList[list.length]]"><div v-for="number in list">{{number}}</div></div></div></div>
</template>

主要方法：

// 获得变化前字符串和变化后字符串,可从后台获取getNumber(){console.log(this.init);let random=Math.floor(Math.random() * (100000- 1) + 1);this.prev=this.addZero(this.init,10);this.next=this.addZero(this.init+random,10);this.init+=random;},

      // 对数字补零成字符串addZero(num, n) {let len = num.toString().length;while (len < n) {num = "0" + num;len++;}return num;},

// 对变化前后字符串的各字符变化过程进行填充处理getData() {this.listAll=[];let prevArray = this.prev.split("");let nextArray = this.next.split("");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;}}this.listAll.push(listInit.slice(start, end + 1));}},

      run() {this.getNumber();this.key++;//强制组件刷新},

//定时任务刷新setTimer() {this.run();setInterval(() => {setTimeout(this.run, 0);}, 1000 * 4)},

<style scoped>.box {background: green;display: inline-flex;height: 100px}.block {height: 100px;width: 100px;color: white;text-align: center;overflow: hidden;}.roll div {font-size: 80px;line-height: 100px;}.roll_1 {-webkit-animation: roll_1 3s forwards; /* Safari 与 Chrome */}/*省略roll_2——roll_8*/.roll_9 {-webkit-animation: roll_9 3s forwards; /* Safari 与 Chrome */}@-webkit-keyframes roll_1 /* Safari 与 Chrome */{0% {transform: translate3d(0, 0px, 0);}100% {transform: translate3d(0, -100px, 0);}}/*省略roll_2——roll_8*/@-webkit-keyframes roll_9 /* Safari 与 Chrome */{0% {transform: translate3d(0, 0px, 0);}100% {transform: translate3d(0, -900px, 0);}}
</style>

css3数字滚动特效简单实现相关推荐

jquery实现数字滚动特效
一.引入js文件 <script src="https://code.jquery.com/jquery-3.3.1.js"></script> <s ...
html数字滚动动画效果,高效的jquery数字滚动特效
本文实例讲述了基于jquery数字滚动特效的代码,分为四种情况分享给大家供大家参考,具体如下: 有分隔符,有小数点: 只有分隔符: 只有小数点: 无分隔符,无小数点: 运行效果图: 具体代码如下数字 ...
jquery 数字滚动特效数字自增特效数字位数动态适应
最近做了个大项目,需要在首页动画显示实时统计数据,虽然百度了不少jquery特效,但有的需要积分,有的功能不全面,下面我将源码分享出来. html <!DOCTYPE html> < ...
h5 数字变化_那些H5用到的技术（6）——数字滚动特效
前言会有这么一种情况,H5页面需要进行数字统计展示,以此来强调产品or工作的成果.如果只是静态显示一个数字,总是感觉生硬.对比如下: 是不是瞬间高大上了呢? 这个效果我是在开源中国上找到的 http ...
html数字滚动选择,js实现数字滚动特效
本文实例为大家分享了js实现数字滚动展示的具体代码,供大家参考,具体内容如下效果图 html代码 Title #t,#tt{ border: #ccc thin solid; width: 250p ...
vue3 | 数据可视化实现数字滚动特效
前言 vue3不支持vue-count-to插件,无法使用vue-count-to实现数字动效,数字自动分割,vue-count-to主要针对vue2使用,vue3按照会报错: TypeError: ...
CSS3 + JS 数字滚动效果
原生JS+CSS3版: <!DOCTYPE html> <html> <head><title>CSS3 数字滚动效果</title> &l ...
js数字滚动功能实现
项目中用到数字滚动特效,就写了个demo记录一下效果: 代码实现: <!DOCTYPE html> <html lang="en"><head> ...
js+css数字滚动
<!DOCTYPE html> <html> <head><meta charset="UTF-8"><meta http-e ...

css3数字滚动特效简单实现

css3数字滚动特效简单实现相关推荐

最新文章

热门文章