Web前端jQuery实现监控大屏数字滚动

最新推荐文章于 2024-05-14 11:22:56 发布

LINGK98

最新推荐文章于 2024-05-14 11:22:56 发布

阅读量789

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/LINGK98/article/details/110368389

版权

前端专栏收录该内容

16 篇文章 2 订阅

订阅专栏

HTML代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数字滚动</title>
    <link rel="stylesheet" href="rollNum.css">
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>

<body>
    <div class="num-box">
        <div class="num-1" id="num1">
            <div>0</div>
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
            <div>6</div>
            <div>7</div>
            <div>8</div>
            <div>9</div>
        </div>
        <div class="num-2" id="num2">
            <div>0</div>
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
            <div>6</div>
            <div>7</div>
            <div>8</div>
            <div>9</div>
        </div>，
        <div class="num-3" id="num3">
            <div>0</div>
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
            <div>6</div>
            <div>7</div>
            <div>8</div>
            <div>9</div>
        </div>
        <div class="num-4" id="num4">
            <div>0</div>
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
            <div>6</div>
            <div>7</div>
            <div>8</div>
            <div>9</div>
        </div>
        <div class="num-5" id="num5">
            <div>0</div>
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
            <div>6</div>
            <div>7</div>
            <div>8</div>
            <div>9</div>
        </div>
    </div>
    <script>
        $(function () {
            var num1 = document.getElementById('num1')
            var num2 = document.getElementById('num2')
            var num3 = document.getElementById('num3')
            var num4 = document.getElementById('num4')
            var num5 = document.getElementById('num5')
            function rolldown(...dom) {
                dom.forEach((item, index) => {
                    $(item.dom).animate({
                        scrollTop: (item.number * 50) - $(item.dom).scrollTop()
                    }, 500)
                })
            }

            setInterval(() => {
                var random = Math.floor(Math.random() * 99999)
                if (random >= 0 && random < 10) { // 个
                    rolldown(
                        {dom:num1,number:0,speed: 5},
                        {dom:num2,number:0,speed: 5},
                        {dom:num3,number:0,speed: 8},
                        {dom:num4,number:0,speed: 5},
                        {dom:num5,number:random,speed: 3}
                    )
                }else if (random < 100 && random >= 10) { // 十
                    rolldown(
                        {dom:num1,number:0,speed: 5},
                        {dom:num2,number:0,speed: 5},
                        {dom:num3,number:0,speed: 8},
                        {dom:num4,number:random.toString().substring(0,1),speed: 5},
                        {dom:num5,number:random.toString().substring(1,2),speed: 3}
                    )
                }
                else if (random < 1000 && random >= 100) { // 百
                    rolldown(
                        {dom:num1,number:0,speed: 5},
                        {dom:num2,number:0,speed: 5},
                        {dom:num3,number:random.toString().substring(0,1),speed: 8},
                        {dom:num4,number:random.toString().substring(1,2),speed: 5},
                        {dom:num5,number:random.toString().substring(2,3),speed: 3}
                    )
                }else if (random < 10000 && random >= 1000) { // 千
                    rolldown(
                        {dom:num1,number:0,speed: 5},
                        {dom:num2,number:random.toString().substring(0,1),speed: 5},
                        {dom:num3,number:random.toString().substring(1,2),speed: 8},
                        {dom:num4,number:random.toString().substring(2,3),speed: 5},
                        {dom:num5,number:random.toString().substring(3,4),speed: 3}
                    )
                }else if (random < 100000 && random >= 10000) { // 万
                    rolldown(
                        {dom:num1,number:random.toString().substring(0,1),speed: 5},
                        {dom:num2,number:random.toString().substring(1,2),speed: 5},
                        {dom:num3,number:random.toString().substring(2,3),speed: 8},
                        {dom:num4,number:random.toString().substring(3,4),speed: 5},
                        {dom:num5,number:random.toString().substring(4,5),speed: 3}
                    )
                }
            }, 2000);

        })
    </script>

</body>

</html>

css代码：

.num-box{
    width: 500px;
    height: 50px;
    font-size: 50px;
    line-height: 50px;
    overflow: hidden;
    display: flex;
    background-color: rgb(0, 7, 137);
    color: white;
}
::-webkit-scrollbar {
  width: 0 !important;
}
.num-box {
  -ms-overflow-style: none;
  overflow: -moz-scrollbars-none;
}
.num-1,.num-2,.num-3,.num-4,.num-5{
    /* background-color: yellowgreen; */
    /* border: 2px solid rgb(255, 255, 255); */
    overflow: auto;
    margin: 0 auto;
}

LINGK98

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
Web前端jQuery实现监控大屏数字滚动

HTML代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>数字滚动</title> <link rel="stylesheet" href=..
复制链接

扫一扫