js实现公告自动滚动

html

<div class="test003">
                            <div class="test004">
                                <div class="testTop"><span class="span1">姓名</span>
                                    <span class="span2">状态</span>
                                    <span class="span3">查询积分分数</span>
                                </div>
                                <div id="box">
                                    <ul id="list">
                                        <li><span class="span1">173****3856</span>
                                            <span class="span2">在11:36查询</span>
                                            <span class="span3">108分</span>
                                        <li>
                                        <li><span class="span1">139****1926</span>
                                            <span class="span2">在11:49查询</span>
                                            <span class="span3">120分</span>
                                        <li>
                                        <li><span class="span1">137****2575</span>
                                            <span class="span2">在09:59查询</span>
                                            <span class="span3">110分</span>
                                        <li>
                                        <li><span class="span1">181****6973</span>
                                            <span class="span2">在11:08查询</span>
                                            <span class="span3">120分</span>
                                        <li>
                                        <li><span class="span1">133****1728</span>
                                            <span class="span2">在13:10查询</span>
                                            <span class="span3">119分</span>
                                        <li>
                                        <li><span class="span1">186****2048</span>
                                            <span class="span2">在12:37查询</span>
                                            <span class="span3">114分</span>
                                        <li>
                                        <li><span class="span1">153****0658</span>
                                            <span class="span2">在10:22查询</span>
                                            <span class="span3">120分</span>
                                        <li>
                                        <li><span class="span1">150****3880</span>
                                            <span class="span2">在12:24查询</span>
                                            <span class="span3">120分</span>
                                        <li>
                                        <li><span class="span1">189****5792</span>
                                            <span class="span2">在11:00查询</span>
                                            <span class="span3">105分</span>
                                        <li>
                                        <li><span class="span1">157****3676</span>
                                            <span class="span2">在14:55查询</span>
                                            <span class="span3">192分</span>
                                        <li>
                                        <li><span class="span1">150****3811</span>
                                            <span class="span2">在14:25查询</span>
                                            <span class="span3">108分</span>
                                        <li>
                                        <li><span class="span1">173****4713</span>
                                            <span class="span2">在15:21查询</span>
                                            <span class="span3">109分</span>
                                        <li>
                                        <li><span class="span1">159****7114</span>
                                            <span class="span2">在14:40查询</span>
                                            <span class="span3">106分</span>
                                        <li>
                                        <li><span class="span1">180****2836</span>
                                            <span class="span2">在15:35查询</span>
                                            <span class="span3">147分</span>
                                        <li>
                                        <li><span class="span1">187****3546</span>
                                            <span class="span2">在14:17查询</span>
                                            <span class="span3">120分</span>
                                        <li>
                                    </ul>
                                </div>
                            </div>
                        </div>

css

<style type="text/css">
           

            .test001 {
                width: 100%;
                border-top: 1px solid black;
                border-bottom: 1px solid black;
                text-align: center;
                font-weight: bold;
                font-size: 17px;
                height: 70px;
                display: flex;
                justify-content: center;
                align-items: center;
            }

            .test002 {
                margin-top: 15px;
                width: 100%;
                text-align: center;
                font-weight: bold;
                font-size: 21px;
                display: flex;
                justify-content: center;
                align-items: center;
            }

            .test003 {
                margin-top: 15px;
                width: 100%;
                /* text-align: center; */
                /* font-weight: bold; */
                /* font-size: 21px; */
                display: flex;
                justify-content: center;
                /* border: solid 1px; */
                flex-direction: column;
                align-items: center;
            }

            .test004 {
                /* margin-top: 15px; */
                width: 90%;
                /* text-align: center; */
                /* font-weight: bold; */
                /* font-size: 21px; */
                display: flex;
                justify-content: center;
                border: solid 1px;
                flex-direction: column;
                align-items: center;
            }

            .testTop {
                width: 90%;
                font-size: 14px;
                height: 30px;
                display: block;
                font-weight: bold;
                padding-left: 20px;
                padding-top: 15px;
            }

            .testTop span {
                margin-right: 75px;
            }

            .testTop .span2 {
                margin-right: 65px;
            }

            #box {
                width: 90%;
                height: 250px;
                line-height: 2em;
                /* background-color: skyblue; */
                margin-top: 15px;
                /* margin: 100px auto; */
                padding: 0 0px;
                overflow: hidden;
            }

            #list li {
                margin-top: 10px;
                list-style: none;
            }

            #list span {
                margin-right: 30px;
                font-size: 14px;
                display: inline-block;
                overflow: hidden;
                text-align: center;

            }

            #list .span1 {
                width: 80px;
            }

            #list .span2 {
                margin-right: 40px;
                width: 80px;

            }

            #list .span3 {
                width: 50px;

                /* margin-right: 50px; */
                /* text-align: left; */
                /* border: 1px solid black; */
            }


            /* #list a:hover {
            color: orangered;
            text-decoration: underline;
        } */
        </style>

js

<script>
        var box = document.getElementById('box')
        var list = document.getElementById('list')
        console.log(box, 'box')
        //复制一遍文档
        var content = list.innerHTML;
        list.innerHTML += content;

        var time = 30;
        var timer = setInterval(up, time);

        function up() {
            //滚上去的内容大于ul内容高度的一半，重置高度 0
            if (box.scrollTop > (list.offsetHeight >> 1)) {
                box.scrollTop = 0
            } else {
                box.scrollTop++;
            }
        }
        //鼠标移入暂停--清除定时器
        // box.onmouseover = function () {
        //     clearInterval(timer)

        // }
        ///鼠标移出继续--启动定时器
        box.onmouseout = function() {
            timer = setInterval(up, time);
        }
    </script>