Question

嗨，我有一个宽度为800像素，高度为600像素的div 我想把它分成800 X 400 = 3,20,000个子div 这意味着每个子区域的宽度为1像素，高度为1像素
我正在使用PHP。这是我的代码。

  <div class="main">
    <?php
     for($i=1;$i<=320000;$i++)
     {
    ?>
        <div class="single" ></div>

    <?php
     }
    ?>
 </div>

CSS：

.main
{
margin-left:auto;
margin-right:auto;
width:800px;
height:400px;
}
.single
{
background-color:pink;
float:left;
height:1px;
width:1px;
}

但是当我运行页面时，执行代码需要很长时间。而且我的浏览器有时会崩溃。我的工作有更简单的方法吗？我可以用更简单的方式使用Javascript或jQuery吗？

这不是答案。这是对那些问我为什么要这样做的人的答复？
实际上我想开发一个像应用程序的涂料。

当我在每个子div上拖动鼠标时，颜色会发生变化。这是我的完整代码

PHP：

<div class="main">
<?php 

     for($i=1;$i<=320000;$i++)
     {
    ?>

        <!--<div class="single" onMouseOver="changeColor(this)"></div>-->
        <div class="single" onmousemove="changeColor(this)" ></div>

    <?php
     }

?>

CSS：

<style>
.single
{
 background-color:pink;
 float:left;
 height:3px;
 width:3px;
 cursor:crosshair;
}
.main
{
 margin-left:auto;
 margin-right:auto;
 width:800px;
 height:400px;
}
</style>

JAVASCRIPT：

<script>
var isMouseDown = false;
document.onmousedown = function() { isMouseDown = true };
document.onmouseup   = function() { isMouseDown = false };

function changeColor(sing)
{
 if(isMouseDown) 
 {
    sing.style.backgroundColor = "black";
 }

}
</script>

我现在处于初级阶段。请不要嘲笑我的想法!! ：P

Answer 1

为每个像素创建一个div需要很长时间，这并不让我感到惊讶。我建议你研究一下使用html5画布，你可以逐个像素地绘制你想要的东西，它比尝试做div更快，更不用说了。

Answer 2

即使您拥有功能非常强大的计算机，通过代码创建超过300,000个div也会导致浏览器崩溃。即使您使用JavaScript或jQuery，您也会面临同样的问题。为什么你需要把它分成这么多div？

将div除以每个1像素的许多子div

2 个答案: