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

Question

嗨我有一个宽度为800像素,高度为600像素的div.
我想把它分成800 X 400 = 3,20,000个子div.
这意味着每个子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更快,更不用说了.