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

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，停止为0scrollkey = 1;}var timer;// 开始时静止，滚动状态为0var scrollkey = 0;// 点击状态：点击开始按钮后starkey为1，点击结束按钮时starkey为0var 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>

制作滚动表格，循环列表表格内容相关推荐

CSS盒模型、边框和背景、表格和列表、颜色和透明度、阴影和轮廓及长度单位rem
1.CSS 盒模型元素尺寸 CSS 盒模型中最基础的就是设置一个元素的尺寸大小.有三组样式来配置一个元素的尺寸大小,样式表如下: 属性值说明 CSS版本 width auto.长度值或百分比设 ...
excel添加列下拉框票价_excel表格下拉表格添加数据-excel2017表格中怎么制作下拉菜单列表框...
在Excel表中,如何将增加下拉菜单的选项? excel中的下拉菜单选项,就是筛选的功能,具体操作如下: 1.首先选中a.b两列数据,在"开始"选项卡上选择"筛选&quo ...
html如何制作一个漂亮的表格？+ 列表制作 + 表单制作（干货！直接收代码）
https://blog.csdn.net/hanhanwanghaha宝藏女孩欢迎您的关注! 欢迎关注微信公众号:宝藏女孩的成长日记如有转载,请注明出处(如不注明,盗者必究) 目录 html如何 ...
Word模板文件,替换内容文本、图片、表格、列表、区块、嵌套等
Word模板文件,替换内容文本.图片.表格.列表.区块.嵌套等实例:员工信息表Word文件,程序动态替换内容,生成pdf文件话不多说,先看效果图! 优势: 1.模板只是布局调整,程序无需修改! ...
LaTeX学习(二) 列表表格等内容
接上篇:http://blog.csdn.net/qq_31390999/article/details/79431524 这篇主要讲表格,列表的使用列表之前的与上篇相同列表可以进行嵌套(就像PP ...
Bootstrap框架(基础篇)之列表,表格,表单
继续上篇的基础部分延伸,主要说一下列表,表格,表单相关Bootstrap框架变化以及基础知识. 1.列表篇除了HTML提供的三种基本列表样式: 无序列表 <ul><li>-& ...
word(2010)使用VBA完成批处理操作-批量清除表格某单元格内容
word VBA 的使用案例 VBA是什么? 为什么要使用VBA? VBA的运用实例---批量清除表格某单元格内容结语 VBA是什么? VBA(Visual Basic for Applicatio ...
用html制作简单考试系统,wps表格怎样制作考试系统
wps表格的功能是强大的,我们可以使用wps表格来制作考试系统,相信很多人都不知道怎样制作,下面就让学习啦小编告诉你wps表格怎样制作考试系统. wps表格制作考试系统的方法 1.制作试题工作表 1. ...
php中插入表格标签,列表，表格，添加表单及标签用法-2019.9.1
问题: 1.谈谈你对html标签,元素与属性的理解,并举例说明. 2.列表有几种,如何定义? 3.列表与表格的区别与联系?什么时候用列表,什么时候用表格,为什么? 4.编程实现,用列表制作你的工作计划 ...

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

制作滚动表格，循环列表表格内容相关推荐

最新文章

热门文章