我的想法是使用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>
**更新:**这看起来与我的想法相似。
1条答案
按热度按时间jogvjijk1#
如果您的目的是显示一个图像,其中您将设置各个像素,那么您将获得更好的结果与画布元素。
下面是一个小演示:
PHP脚本应该设置canvas元素(HTML)的width和height属性,并提供坐标和相应的颜色代码传递给
setPixel()
。显然,让PHP以简洁的格式提供这些信息以最小化流量是很重要的。如果你的数据库可以存储位图格式,那么你可以只加载一个
<img src="...">
元素就可以了,其次最好的是你的数据库将数据存储为矢量,你只需要画一些线和矩形,这比传递和绘制每个像素需要的资源要少。