遍历生成5个不同颜色的div块且在每个div块遍历渲染不同的数据
你可以使用JavaScript来生成5个不同颜色的div块，并在每个div块中渲染不同的数据。下面是一个示例代码：
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 100px;
height: 100px;
margin: 10px;
display: inline-block;
text-align: center;
line-height: 100px;
}
</style>
</head>
<body>
<div id="container"></div>
<script>
var container = document.getElementById('container');
var colors = ['red', 'blue', 'green', 'yellow', 'orange'];
var data = ['Data 1', 'Data 2', 'Data 3', 'Data 4', 'Data 5'];
for (var i = 0; i < 5; i++) {
var div = document.createElement('div');
div.className = 'box';
div.style.backgroundColor = colors[i];
div.innerHTML = data[i];
container.appendChild(div);
}
</script>
</body>
</html>
在这个示例中，我们首先在HTML中添加了一个id为"container"的div作为容器。然后，在JavaScript中，我们定义了一个包含5个颜色的数组colors和一个包含5个数据的数组data。
接下来，我们使用for循环来创建5个div块。对于每个div块，我们使用document.createElement方法创建一个新的div元素，并为其设置类名为"box"。然后，我们使用div.style.backgroundColor属性将背景颜色设置为colors数组中对应的颜色。最后，我们使用div.innerHTML属性将数据设置为data数组中对应的数据。
最后，我们将每个div块添加到容器div中，通过container.appendChild(div)实现。这样，就可以在页面上生成5个不同颜色的div块，并在每个div块中渲染不同的数据
原文地址: https://www.cveoy.top/t/topic/iF2a 著作权归作者所有。请勿转载和采集!