js 实现大屏数字滚动效果

最新推荐文章于 2024-08-16 10:12:21 发布

zhooson

最新推荐文章于 2024-08-16 10:12:21 发布

阅读量2k

点赞数 2

分类专栏： javascript vue

本文链接：https://blog.csdn.net/Zhooson/article/details/106860472

版权

vue 同时被 2 个专栏收录

67 篇文章 1 订阅

订阅专栏

javascript

10 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Vue学习</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.8/vue.min.js"></script>
    <style>
        .box {
                    display: flex;
                    box-sizing: border-box;
                    padding: 20px 30px;
                    width: 450px;
                    height: 85px;
                    border: 1px solid blue;
                }
                
                .dou {
                    color: #ff6744;
                    font-size: 30px;
                }
                
                .item {
                    margin: 0 2px;
                    width: 35px;
                    height: 45px;
                    border-radius: 4px;
                    background: green;
                    background-size: 100% 100%;
                }
                
                li {
                    list-style: none;
                }
                
                .num {
                    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>


</head>

<div id="app">
    <ul class="box">
        <li :class="{'item': !isNaN(item)}" v-for="(item,index) in clocks" :key="index">
            <span v-if="!isNaN(item)" :class="{'num': !isNaN(item)}">
                    <i ref="numRef">0123456789</i>
            </span>
            <span v-else class="dou">{{item}}</span>
        </li>
    </ul>
</div>

<script>
    let mp = new Vue({
        el: '#app',
        data: {
            clocks: ["0", "0", "0", ",", "0", "0", "0", ",", "0", "0", "0"], //  11位 
            count: 0,
        },
        methods: {
            // 设置每一位数字的偏移
            setNumberTransform(count) {
                // 空位补齐
                let newNumber = this.PrefixZero(count, 9);

                let items = this.$refs.numRef;
                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 count = this.getRandomNumber(1, 10000000)
                this.setNumberTransform(count)
            }, 3000);
        }
    })
</script>
</body>

</html>```