HTML循环创建div和table并实现滚动效果

小橘是橘子

已于 2022-11-14 14:43:23 修改

阅读量4.4k

点赞数 2

文章标签： html 前端

于 2022-10-31 11:40:38 首次发布

本文链接：https://blog.csdn.net/A1871156383/article/details/127575457

版权

需求是后端传数据过来，然后把数据放到页面，循环滚动展示。

刚开始是用的div拼接做的，做完后发现在不同大小屏幕的电脑每次会有问题，开发时是在大屏的台式机做的，后面换了笔记本后发现布局乱掉了，太难看了，并且用div的方式没实现循环滚动，每次在数据滚动完会出现一段空白时间，也是不好看的；后面就用table重做了一个，并且实现了循环滚动，两种方法都在下面，各取所需吧。

第一种(div方式):

效果如图，下面的红色的数据是通过循环创建的，每条数据都是一个div

拼接方法：

a+='<div style="';
a+="font-size: 20px;padding-left: 2%; float: left;width: 18%;color:red;";
a+='">';
a+=454524;
a+='</div>';

如上，这就拼接出了一个基本的div，设置了字体大小，颜色等等，454524就是div里面你要填的内容。

在实际应用中，可能会在ajax里面使用，如果使用了ajax定时更新数据的话就会导致每次ajax请求就会重新创建div，比如你的数据需要循环创建10个div，ajax请求第二次就是10+10，请求第三次就是10+10+10，这显然不是我们想要的，为了解决这个问题，我们可以在创建之前初始化一下，在循环创建div的前面使用$("#ddc").html(''); ddc为动画体id。

示例代码如下(无后台数据)：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
		<style>
			
			.container {
    width: 100%;
    height: 100%;
    padding: 10px;
    overflow: hidden;
  
}

span{
	color: #BB2D3B;
	font-family: "楷体";
}

.rowup {
    -webkit-animation: 10s rowup linear infinite normal;
    animation: 10s rowup linear infinite normal;
    &:hover{
        animation-play-state:paused;
        -webkit-animation-play-state:paused; /* Safari 和 Chrome */
    }
}



@-webkit-keyframes rowup {
    0% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    100% {
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }
}

@keyframes rowup {
    0% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    100% {
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }
}
			
		</style>
	</head>
	<body>
		<div style="width: 100%;height: 30px;">
    		<div style="font-size: 20px;text-align:center;float: left;width: 9%;">工单</div>
    		<div style="font-size: 20px;text-align:center;padding-left: 4%;float: left;width: 9%;">料号</div>
    		<div style="font-size: 20px;text-align:center;padding-left: 2%;float: left;width: 9%;">工单数量</div>
    		<div style="font-size: 20px;text-align:center;padding-left: 5%;float: left;width: 9%;">投站数量</div>
    	</div>
		<div class="container ">
    <div class=" rowup " style="width: 100%;">
    <!-- 循环代码,也就是动画体 -->
         <div  style="height: calc( 100% - 20px); " id="ddc">
            
        </div>
    </div>
    
</div>
	</body>
	
<script>
			/*$("#ddc").html('');*/		//初始化div需要添加此行代码
            for (var i=0;i<15;i++){
			a='<div style="';
			a+="width: 100%;height: 30px;text-align:center;";
			a+='">'
		    a+='<div style="';
		    a+="font-size: 20px;float: left; width:9%;color:red;";
		    a+='">';
		    a+=534534354;
		    a+='</div>';
			a+='<div style="';
		    a+="font-size: 20px;padding-left: 0%; float: left;width: 15%;color:red;";
		    a+='">';
		    a+=4334345;
		    a+='</div>';
		    a+='<div style="';
		    a+="font-size: 20px;padding-left: 2%; float: left;width: 5%;color:red;";
		    a+='">';
		    a+=45435;
		    a+='</div>';
		    a+='<div style="';
		    a+="font-size: 20px;padding-left: 2%; float: left;width: 18%;color:red;";
		    a+='">';
		    a+=454524;
		    a+='</div>';
			a+='</div>';
			/*$(".ddc") 是jquery选择到一个class为ddc的元素
			 append是将我们a添加到他的子节点（子元素）中 */
		   $("#ddc").append(a);
		 }
            </script>


</html>

第二种方式(table表格方式):

效果如图:

表格的方式比使用div方式更简单，并且不需要很繁琐的去对齐之类的，而且还不会像div那样，页面的大小变了，布局就会一团糟的情况。代码如下:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        * {
            margin: 0px;
            padding: 0px;
        }
        .main_1 {
            /*border: 2px solid pink;*/
            /*background: black;*/
            margin-top: 30px;
        }
        .main_1 table {
            border-collapse: collapse;
            margin: 0px auto;
            /*background: black;*/
            /*color: white;*/
        }
        .main_1 thead,.main_1 tr,.main_1 th {
            border: 1px solid red;
            width: 70px;
            height: 40px;
            /*margin: 30px auto;*/
        }
        .main_2 table {
            border-collapse: collapse;
            margin: 0px auto;
            text-align: center;
            animation: mymove 23s linear infinite;
            border-spacing: 0;
        }
        .main_2 tbody,.main_2 tr,.main_2 td {
            border: 1px solid red;
            width: 70px;
            height: 40px;
            /*margin: 0px auto;*/
            /*margin-top: 30px;*/
            /*border-spacing: 0;*/
        }
        .main_2 {
            /*border: 2px solid purple;*/
            overflow: hidden;
            height: 200px;
        }
        @Keyframes mymove {
            0% {
                transform: translateY(0%);
            }
            to {
                transform: translateY(-100%);
            }
        }
    </style>
</head>
<body>
    <div class="main_1">
        <table>
            <thead>
                <tr>
                    <th class="td" style="font-size: 25px; color:black">WO</th>
        			<th class="td" style="font-size: 25px; color:black">Part&nbsp;No</th>
        			<th class="td" style="font-size: 25px; color:black">WO_Qty</th>
        			<th class="td" style="font-size: 25px; color:black">Station</th>
        			<th class="td" style="font-size: 25px; color:black">Completed</th>
                </tr>
            </thead>
        </table>
    </div>
    <div class="main_2">
        <table>
            <tbody id="btValue">
                
            </tbody>
        </table>
        <table>
            <tbody id="bt">
                
            </tbody>
        </table>
    </div>

</body>


<script type="text/javascript" src="js/jquery-3.5.1.js" ></script>
	<script>
		for (var i=0;i<7;i++){
			a='<tr>';
		    a+='<td style="';
		    a+="font-size: 25px;color:#00FFFF;";
		    a+='">';
		    a+=11111;
		    a+='</td>';
			a+='<td style="';
		    a+="font-size: 25px;color:#00FFFF;";
		    a+='">';
		    a+=11111;
		    a+='</td>';
		    a+='<td style="';
		    a+="font-size: 25px;color:#00FFFF;";
		    a+='">';
		    a+=11111;
		    a+='</td>';
		    a+='<td style="';
		    a+="font-size: 25px;color:#00FFFF;";
		    a+='">';
		    a+=11111;
		    a+='</td>';
		    a+='<td style="';
		    a+="font-size: 25px;color:#00FFFF;";
		    a+='">';
		    a+=11111;
		    a+='</td>';
			a+='</tr>';
			$("#btValue").append(a);
			$("#bt").append(a);
		 }
		
	</script>


</html>

才疏学浅，只使用了这两种方式，如有不对或者更好的方式还请各位大佬不吝赐教，感谢。