我的想法是使用php或js创建大量的div。 （我从昨天开始写js。）
所以我自己给出的任务是使用php或js或两者生成一个div网格。到目前为止，这个想法是将一个普通div作为行和小单元格。首先，我确定使用php变量行必须多长时间，之后我定义行数[目前为止很容易]。当我生成网格时，问题出现了。仅使用php非常慢，所以我决定使用js。我的第一次尝试导致时间缩短了一半但仍然很慢。所以我问自己有没有办法划分js的工作？是的...当然使用功能！所以我创建了一个名为sector的函数并尝试调用它。它工作但仍然太慢。那么做这样的事情的最佳做法是什么？
<?php
$rowWidth = 200; // width in pixels
$rowHeight = 100; // height in pixels
$boxWidth = 1; // box width in pixels
$boxHeight = 1; // box height in pixels
?>
<body>
<script>
function sector(sector) {
for (var i = 0*sector; i < (<?php echo $rowHeight / 100 ?> + 100*sector); i++) { // trying to manage sectors
var div = document.createElement('div');
// set style
div.style.width = '<?php echo $rowWidth ?>';
div.style.height = '<?php echo $boxHeight ?>';
div.style.background = 'red';
div.setAttribute('class', 'row'); // and make a class for future css (for now using inline css set by js)
div.setAttribute('id', 'row'+i); // and make an id selector
document.body.appendChild(div);
for (var e = 0; e < <?php echo $rowWidth ?>; e++) {
var box = document.createElement('div');
// set style
box.style.width = '<?php echo $boxWidth ?>';
box.style.height = '<?php echo $boxHeight ?>';
box.style.float = 'left';
box.style.background = 'pink';
box.setAttribute('class', 'box'); // and make a class for future css (for now using inline css set by js)
box.setAttribute('id', 'box'+e); // and make an id selector
document.getElementById('row'+i).appendChild(box); // joining my row
}
}
}
<?php for ($sector=0; $sector < ($rowWidth / 100) ; $sector++) { ?>
//calling all sectors, calling all sectors... please report
sector(<?php echo $sector+1 ?>);
<?php } ?>
</script>
</body>
更新：这看起来与我的想法相似。
他们是怎么做到的？
如果您的目的是显示一个您将设置单个像素的图像，那么使用canvas元素将获得更好的结果。
这是一个小小的演示：
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext('2d');
var imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
function draw() {
ctx.putImageData(imgData, 0, 0);
}
function setPixel(x, y, red, green, blue) {
var offset = (y * canvas.width + x) * 4;
imgData.data[offset] = red;
imgData.data[offset+1] = green;
imgData.data[offset+2] = blue;
imgData.data[offset+3] = 255; // opacity
}
// Example: set some green pixels along a line
for (var i = 0; i < 200; i++) {
setPixel (i, i >> 2, 0, 128, 0);
}
draw(); // display the result.<canvas id="canvas" width="500" height="500"></canvas>您的PHP脚本应设置canvas元素（HTML）的width和height属性，并提供要传递给setPixel()的坐标和相应的颜色代码。显然，让PHP以简洁的格式提供信息以最大限度地减少流量非常重要。
如果您的数据库可以存储位图格式，那么您可以使用<img src="...">元素加载它并完成。接下来最好的是您的数据库将数据存储为矢量，您只需绘制一些线条和矩形，这比需要传递和绘制每个像素所需资源更少。