我的想法是使用 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="180"></canvas>您的 PHP 脚本应设置 canvas 元素 (HTML) 的宽度和高度属性，并提供坐标和相应的颜色代码以传递给 setPixel() 。显然，让 PHP 以简洁的格式提供该信息以最大限度地减少流量非常重要。
如果您的数据库可以存储位图格式，那么您可以使用 <img src="..."> 加载它。元素并完成。下一个最好的方法是您的数据库将数据存储为矢量，您只需绘制一些线条和矩形，这比必须传递和绘制每个像素所需的资源更少。
关于javascript - 至少 1000000 div 的大网格，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47840979/