Php 为我的页面创建网格外观的最有效方法_Php_Javascript_Html

Php 为我的页面创建网格外观的最有效方法

php javascript html

Php 为我的页面创建网格外观的最有效方法,php,javascript,html,Php,Javascript,Html,我想在我的页面上创建一个由非常小的框组成的网格（比如说，2像素的高度和宽度，或者2x2）。我有一些关于如何去做的想法——所有这些都以这样或那样的方式失败了：使用echo statemenet的PHP Javascript——目前为止我最好的选择手动构建网格以适应800 x 800的空间（需要的时间太长）不幸的是，即使是我最好的选择也相当缓慢。有没有人有更好的计划让我可以高效地创建一个由小正方形组成的网格？在2x2网格上，我敢肯定你不会显示任何数据。即使你是，我想它也不会在每个网格框内因此

我想在我的页面上创建一个由非常小的框组成的网格（比如说，2像素的高度和宽度，或者2x2）。我有一些关于如何去做的想法——所有这些都以这样或那样的方式失败了：

使用echo statemenet的PHP

Javascript——目前为止我最好的选择

手动构建网格以适应800 x 800的空间（需要的时间太长）

不幸的是，即使是我最好的选择也相当缓慢。有没有人有更好的计划让我可以高效地创建一个由小正方形组成的网格？

在2x2网格上，我敢肯定你不会显示任何数据。即使你是，我想它也不会在每个网格框内

因此，您应该在图像程序中创建一个2x2（或3x3，带1像素边框）图像，并创建一个要“网格化”的

div

，并给div一个

background

.gridify {
    background: url(image/grid.jpg) repeat left top;
}

gridify是您的div/span/what have的类

进一步编辑

现在，由于您希望单击并拖动以选择一个区域，您可以做的是在

.gridify

div顶部创建一个div，并为新的“单击并拖动”div提供一个更暗和透明的背景。。。这会给人一种选择框的错觉。

这对我来说很有效（grid.gif是3x3，带边框，请参阅工作版本）：


函数mm（e）{
如果（！e）e=window.Event；
var o=document.getElementById（'grid'）；
var x=e.clientX-o.offsetLeft；
变量y=e.clientY-o.offsetTop；
document.getElementById（'coords'）.innerHTML='+x+'/'+y；
}

仅使用FF和Chrome（均在Ubuntu Lucid上）进行测试，但idea应该可以使用。

这里有一个小PHP，可以打印网格：

<?php
$size = 5;
$total = 100;
?>
<html>
<head>
        <style>
        .box {
                width:<?php echo $size; ?>px;
                height:<?php echo $size; ?>px;
                float:left;
        }
        .black {
                background-color:black;
        }
        .white {
                background-color:white;
        }
        </style>
</head>
<body>

<?php
echo "<div style='width:{$total}px;height:{$total}px;'>\n";
$start_color = true;
for($i = 1; $i <= floor($total/$size); $i++) {
        $start_color =! $start_color;
        $current_color = $start_color;
        for($j = 1; $j <= floor($total/$size); $j++) {
                echo "<span class='box ".(($current_color) ? 'black' : 'white')."' id='box_{$i}_{$j}'></span>\n";
                $current_color =! $current_color;
        }
}
echo "</div>";
?>
</body>
</html>


.盒子{
宽度：px；
高度：px；
浮动：左；
}
布莱克先生{
背景色：黑色；
}
怀特先生{
背景色：白色；
}
您可以看看jQuery插件。不幸的是，它的目标是重新排列网格布局并设置其动画，而不是打印一个很小的2d布局，但可能会有所帮助。它还可以为每个砖块或单元定义一个函数。它的算法类似于装箱 这个网格是做什么用的？了解网格的用途会有很大帮助。网格的用途是什么——数据视图、美学等等。。。？我觉得目标在解决方案中会起到相当大的作用。如果只是为了美观，我强烈建议使用Photoshop或类似的图像程序。不，是为了坐标系。我需要用户能够将鼠标悬停在网格的一部分上，一些代码会让用户知道鼠标在哪里。（网格32x，45y），例如，我不想宣传我自己，但也许你想看看我为实现而创建的网格。它使用画布绘制网格。是的，但每个正方形都需要某种功能。如果我使用的是图像，我该怎么做呢？从我在你的评论中读到的，如果你只需要发送鼠标坐标，你可以很容易地用javascript实现，而不需要麻烦网格。这取决于。什么样的软功能？我喜欢Indranil发布的内容；但是，我希望用户能够单击一个坐标，拖动鼠标，然后让它选择多个坐标。我希望通过一个交互式页面来显示这些内容，因此希望当用户单击/选择特定的方块时，这些方块会亮起。这就是为什么我不能使用图像！首先，我要感谢您编写的代码。不幸的是，我希望有一些方法让用户选择网格，拖动它，等等。。出于这个原因，上面发布的游戏似乎是我的最佳选择（一旦我让它工作起来——因为它抛出了一个恼人的JQuery错误。这样做，对我来说效率太低了。问题是：任何“效率太低”的东西在PHP中以循环方式创建对任何浏览器来说都太难处理了。例如，对于2x2像素的800x800网格，您看到的是400x400=1638400个单独的HTML元素。这太多了，没有任何实际用途，就像您对每个元素应用鼠标悬停事件这样简单的操作一样，任何浏览器都会呕吐。
<?php
$size = 5;
$total = 100;
?>
<html>
<head>
        <style>
        .box {
                width:<?php echo $size; ?>px;
                height:<?php echo $size; ?>px;
                float:left;
        }
        .black {
                background-color:black;
        }
        .white {
                background-color:white;
        }
        </style>
</head>
<body>

<?php
echo "<div style='width:{$total}px;height:{$total}px;'>\n";
$start_color = true;
for($i = 1; $i <= floor($total/$size); $i++) {
        $start_color =! $start_color;
        $current_color = $start_color;
        for($j = 1; $j <= floor($total/$size); $j++) {
                echo "<span class='box ".(($current_color) ? 'black' : 'white')."' id='box_{$i}_{$j}'></span>\n";
                $current_color =! $current_color;
        }
}
echo "</div>";
?>
</body>
</html>