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

115 阅读 0 评论 76 点赞

我是靠谱客的博主俊逸手链，这篇文章主要介绍制作滚动表格，循环列表表格内容，现在分享给大家，希望可以做个参考。

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">

/* 表格居中，设置表格样式 */
        .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>

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="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>

</body>

</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
思路二代码：

<!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>