vue数字滚动效果

vue数字滚动效果

​ 首先，我们使用bootcdn引用vue的js

<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.8/vue.min.js"></script>

​ css样式

<style>
        .divTitleBox {
            display: flex;
            box-sizing: border-box;
            padding: 20px 30px;
            width: 450px;
            height: 85px;
        }

        .divTitleDou {
            color: #ff6744;
            font-size: 30px;
        }

        .divTitleItem {
            margin: 0 2px;
            width: 35px;
            height: 45px;
            border-radius: 4px;
            background: green;
            background-size: 100% 100%;
        }

        .divTitleBox > li {
            list-style: none;
        }

        .divTitleNum {
            position: relative;
            display: inline-block;
            overflow: hidden;
            width: 100%;
            height: 100%;
            color: #ff6744;
            font-size: 40px;

            writing-mode: vertical-rl;
            text-orientation: upright;
        }

        i {
            position: absolute;
            top: 0;
            left: 50%;
            letter-spacing: 10px;
            transition: transform 0.5s ease-in-out;
            transform: translate(-50%, 0);
        }
    </style>

<div id="app">
    <ul class="divTitleBox">
        <li :class="{'divTitleItem': !isNaN(item)}" v-for="(item,index) in clocks" :key="index">
            <span v-if="!isNaN(item)" :class="{'divTitleNum': !isNaN(item)}">
                    <i ref="numRef3">0123456789</i>
            </span>
            <span v-else class="divTitleDou">{{item}}</span>
        </li>
    </ul>
    <ul class="divTitleBox">
        <li :class="{'divTitleItem': !isNaN(item)}" v-for="(item,index) in clocks" :key="index">
            <span v-if="!isNaN(item)" :class="{'divTitleNum': !isNaN(item)}">
                    <i ref="numRef1">0123456789</i>
            </span>
            <span v-else class="divTitleDou">{{item}}</span>
        </li>
    </ul>
    <ul class="divTitleBox">
        <li :class="{'divTitleItem': !isNaN(item)}" v-for="(item,index) in clocks" :key="index">
            <span v-if="!isNaN(item)" :class="{'divTitleNum': !isNaN(item)}">
                    <i ref="numRef2">0123456789</i>
            </span>
            <span v-else class="divTitleDou">{{item}}</span>
        </li>
    </ul>
</div>

​ js

<script>
    let mp = new Vue({
        el: '#app',
        data: {
            clocks: ["0", "0", ",", "0", "0", "0"], //  11位
            count: 0,
        },
        methods: {
            // 设置每一位数字的偏移
            setNumberTransform(state, count) {
                // 空位补齐
                let newNumber = this.PrefixZero(count, 5);
                let items;
                if (state == 1) {
                    items = this.$refs.numRef1;
                }else if (state == 2) {
                    items = this.$refs.numRef2;
                }else {
                    items = this.$refs.numRef3;
                }
                for (let i = 0; i < items.length; i++) {
                    let el = items[i];
                    // 兼容浏览器
                    el.style.transform = `translate(-50%, -${newNumber[i] * 10}%)`;
                    el.style.transform = `-ms-translate(-50%, -${newNumber[i] * 10}%)`;
                    el.style.transform = `-moz-translate(-50%, -${newNumber[i] * 10}%)`;
                    el.style.transform = `-o-translate(-50%, -${newNumber[i] * 10}%)`;
                }
            },
            // 获取随机数
            getRandomNumber(min, max) {
                return Math.floor(Math.random() * (max - min + 1) + min);
            },

            // num: 被操作数 , n 固定的总位数
            PrefixZero(num, n) {
                return (Array(n).join(0) + num).slice(-n);
            },
        },
        mounted() {
            setInterval(() => {
                let count1 = this.getRandomNumber(1, 99999);
                let count2 = this.getRandomNumber(1, 99999);
                let count3 = this.getRandomNumber(1, 99999);
                this.setNumberTransform(1, count1)
                this.setNumberTransform(2, count2)
                this.setNumberTransform(3, count3)
            }, 3000);
        }
    })
</script>