制作滚动表格，循环列表表格内容

80 阅读 0 评论 53 点赞

我是靠谱客的博主俊逸手链，最近开发中收集的这篇文章主要介绍制作滚动表格，循环列表表格内容，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

2022年07月25日

制作滚动表格

三个学习点：Html，CSS3，java script

Html:

HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签．

通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。

HTML文本是由HTML命令组成的描述性文本

HTML命令可以说明文字，图形、动画、声音、表格、链接等。

CSS3:主要包括盒子模型、列表模块、超链接方式、

语言模块、背景和边框、文字特效、多栏布局等模块

java script:[JavaScript（简称“JS”）]

是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。

虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中。

JavaScript 基于原型编程、多范式的动态脚本语言，

并且支持面向对象、命令式、声明式、函数式编程范式。

用Vscode编写代码

滚动起来的两种思路

思路一：复制很多很多相同的表格后滚动，例如滚动完一行后就把消失的那一行加到文本最后，然后就能不停的滚动滚动不完的表格。

思路二：准备两个相连的相同文本，文本滚动，当第一个文本滚动消失后，瞬间回到初始位置，重新滚动第一个文本。

思路一核心代码：

var count = 0;

var newTr = trs[count++].cloneNode(true);

body1.appendChild(newTr);

思路二核心代码：

if (tab2.offsetTop - box2.scrollTop <= 0) {
box2.scrollTop = 0;
}
// 第一个文本若没有全部滚动完，则继续滚动
else {
box2.scrollTop += 1;
}

scrollTop：元素高度（200px）小于元素内容（300px）时

拉到最底下会有隐藏部分（100px）

scrollTop=100px

制作中遇到的问题和经验：

写完js代码后表格不动：

表格不滚动，可能是没有设置相对位置或绝对位置

滚动表格设置完绝对位置后，页面会不停延长：

表头设置相对固定

想要用hidden隐藏表格内容，表头和表格就要分开

要用一个大框套住里面的元素

限制大框大小后，大框比里面元素小就能隐藏元素

有设置开始暂停按钮的，为什么按两下开始按钮后就暂停不了？

可能是没设置开始条件，会不停使用滚动方法

代码：

思路二代码：

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>滚动表格</title>

    <style>
        /* 背景颜色 */
        body {
            background-color: beige;
        }

        /* 表格居中，设置表格样式 */
        .box1,
        .box2,
        .tab1,
        .tab2 {
            width: 700px;
            margin: 100px auto;
            margin-bottom: 0px;
            border-collapse: collapse;
            background-color: aliceblue;
        }

        /* 表格居中(去除外边框影响) */
        .box2,
        .tab1,
        .tab2 {
            margin-top: 0px;
        }

        /* 表头样式 */
        .box1 {
            border-top: 1px black solid;
            border-right: 1px black solid;
        }

        /* 表格容器样式 */
        .box2 {
            height: 406px;
            overflow: hidden;
            position: relative;
        }

        /* 文本一样式 */
        .tab1 {
            border-right: 1px black solid;
            position: relative;
        }

        /* 文本二样式 */
        .tab2 {
            border-right: 1px black solid;
            position: absolute;
        }

        /* 按钮居中 */
        .box5 {
            width: 200px;
            margin: 0px auto;
        }

        /* 按钮长宽 */
        .btn{
            width: 60px;
            height: 50px;
        }

        /* 文本每行样式 */
        .box1 td,
        .box2 td {
            border: 1px black solid;
            border-top: 0px;
            border-right: 0px;
            text-align: center;
            height: 55px;
        }

        /* 改变文本偶数行样式 */
        tr:nth-child(2n) {
            background-color: blanchedalmond;
        }

        /* 去除表格边框上边距 */
        .box3 td,
        .box4 td {
            border-top: none;
        }

        /* 调整文本第一个单元格样式：颜色，宽度 */
        td:nth-child(1) {
            color: rgba(112, 23, 23, 0.632);
            width: 80px;
        }

        /* 调整文本第二个单元格样式：颜色，宽度 */
        td:nth-child(2) {
            color: rgba(99, 23, 116, 0.732);
            width: 80px;
        }

        /* 调整文本第三个单元格样式：颜色，宽度 */
        td:nth-child(3) {
            color: rgba(67, 43, 111, 0.581);
            width: 80px;
        }

        /* 调整文本第四个单元格样式：颜色，宽度 */
        td:nth-child(4) {
            color: rgba(27, 23, 149, 0.605);
            width: 445px;
        }
    </style>

    <script type="text/javascript">

        window.onload = function () {

            // 获取表格容器box2和第二个文本tab2的对象
            var box2 = document.getElementsByClassName("box2")[0];
            var tab2 = document.getElementsByClassName("tab2")[0];

            // 滚动方法
            function scroll() {
                // 第一个文本全部滚动完后，回到原位
                if (tab2.offsetTop - box2.scrollTop <= 0) {
                    box2.scrollTop = 0;
                }
                // 第一个文本若没有全部滚动完，则继续滚动
                else {
                    box2.scrollTop += 2;
                }
                // 滚动状态，滚动时为1，停止为0
                scrollkey = 1;
            }

            var timer;
            // 开始时静止，滚动状态为0
            var scrollkey = 0;
            // 点击状态：点击开始按钮后starkey为1，点击结束按钮时starkey为0
            var starkey = 0;

            // 获取开始按钮btn1的对象
            // var btn1 = document.getElementById("btn1");

            btn1.onclick = function () {

                // 停止状态时点击开始按钮，才有对应的开始动作
                if (starkey == 0 && scrollkey == 0) {
                    starkey = 1;
                    timer = setInterval(scroll, 15);
                    scrollkey = 1;

                    // 鼠标移入表格，表格停止滚动
                    box2.onmouseover = function () {
                        clearInterval(timer);
                        scrollkey = 0;
                    }
                    // 鼠标移出表格，表格开始滚动
                    box2.onmouseout = function () {
                        if (starkey == 1) {
                            timer = setInterval(scroll, 15);
                            scrollkey = 1;
                        }
                    }
                }
            }

            // 获取结束按钮btn2的对象
            // var btn2 = document.getElementById("btn2");

            // 点击结束按钮，表格停止滚动
            btn2.onclick = function () {
                clearInterval(timer);
                scrollkey = 0;
                starkey = 0;
            }

            // 点击重置按钮，回到最初始状态
            btn3.onclick = function () {
                clearInterval(timer);
                box2.scrollTop = 0;
                starkey = 0;
                scrollkey = 0;
            }

        }
    </script>

</head>



<body>

    <table id="box1" class="box1">

        <tr>
            <td>编号</td>
            <td>姓名</td>
            <td>年龄</td>
            <td>地址</td>
        </tr>
    </table>


    <div id="box2" class="box2">

        <table id="tab1" class="tab1">
            <tr>
                <td>0001</td>
                <td>李四</td>
                <td>10</td>
                <td>本宇宙-室女座超本星系团-本星系团-银河系-猎户座旋臂</td>
            </tr>
            <tr>
                <td>0002</td>
                <td>王五</td>
                <td>20</td>
                <td>银河系-猎户座旋臂-太阳系第三环总体位置</td>
            </tr>
            <tr>
                <td>0003</td>
                <td>张三</td>
                <td>30</td>
                <td>本宇宙-室女座超本星系团-本星系团-银河系-猎户座旋臂</td>
            </tr>
            <tr>
                <td>0004</td>
                <td>Jack</td>
                <td>40</td>
                <td>银河系-猎户座旋臂-太阳系第三环总体位置</td>
            </tr>
            <tr>
                <td>0005</td>
                <td>小兰</td>
                <td>50</td>
                <td>本宇宙-室女座超本星系团-本星系团-银河系-猎户座旋臂</td>
            </tr>
            <tr>
                <td>0006</td>
                <td>王六</td>
                <td>60</td>
                <td>银河系-猎户座旋臂-太阳系第三环总体位置</td>
            </tr>
            <tr>
                <td>0007</td>
                <td>吴七</td>
                <td>70</td>
                <td>本宇宙-室女座超本星系团-本星系团-银河系-猎户座旋臂</td>
            </tr>
            <tr>
                <td>0008</td>
                <td>king</td>
                <td>80</td>
                <td>银河系-猎户座旋臂-太阳系第三环总体位置</td>
            </tr>
            <tr>
                <td>0009</td>
                <td>queen</td>
                <td>90</td>
                <td>本宇宙-室女座超本星系团-本星系团-银河系-猎户座旋臂</td>
            </tr>
            <tr>
                <td>0010</td>
                <td>园子</td>
                <td>100</td>
                <td>银河系-猎户座旋臂-太阳系第三环总体位置</td>
            </tr>
        </table>

        <table id="tab2" class="tab2">
            <tr>
                <td>0001</td>
                <td>李四</td>
                <td>10</td>
                <td>本宇宙-室女座超本星系团-本星系团-银河系-猎户座旋臂</td>
            </tr>
            <tr>
                <td>0002</td>
                <td>王五</td>
                <td>20</td>
                <td>银河系-猎户座旋臂-太阳系第三环总体位置</td>
            </tr>
            <tr>
                <td>0003</td>
                <td>张三</td>
                <td>30</td>
                <td>本宇宙-室女座超本星系团-本星系团-银河系-猎户座旋臂</td>
            </tr>
            <tr>
                <td>0004</td>
                <td>Jack</td>
                <td>40</td>
                <td>银河系-猎户座旋臂-太阳系第三环总体位置</td>
            </tr>
            <tr>
                <td>0005</td>
                <td>小兰</td>
                <td>50</td>
                <td>本宇宙-室女座超本星系团-本星系团-银河系-猎户座旋臂</td>
            </tr>
            <tr>
                <td>0006</td>
                <td>王六</td>
                <td>60</td>
                <td>银河系-猎户座旋臂-太阳系第三环总体位置</td>
            </tr>
            <tr>
                <td>0007</td>
                <td>吴七</td>
                <td>70</td>
                <td>本宇宙-室女座超本星系团-本星系团-银河系-猎户座旋臂</td>
            </tr>
            <tr>
                <td>0008</td>
                <td>king</td>
                <td>80</td>
                <td>银河系-猎户座旋臂-太阳系第三环总体位置</td>
            </tr>
            <tr>
                <td>0009</td>
                <td>queen</td>
                <td>90</td>
                <td>本宇宙-室女座超本星系团-本星系团-银河系-猎户座旋臂</td>
            </tr>
            <tr>
                <td>0010</td>
                <td>园子</td>
                <td>100</td>
                <td>银河系-猎户座旋臂-太阳系第三环总体位置</td>
            </tr>
        </table>
    </div>


    <div class="box5">
        <table>
            <tr>
                <td>
                    <button id="btn1" class="btn">开始</button>
                </td>
                <td>
                    <button id="btn2" class="btn">暂停</button>
                </td>
                <td>
                    <button id="btn3" class="btn">重置</button>
                </td>
            </tr>
        </table>

    </div>

</body>



</html>