php – 如何使用jQuery在屏幕上绘制字母

发布时间：2020-12-13 16:15:38 所属栏目：PHP教程来源：网络整理

导读：假设我有一个html表,单元格背景为红色.我想使用 jquery在表格的循环中打印字母(A-Z),例如字母J看起来如下图所示： Click here to view the image 我可以创建一个表和一个指针,它可以循环遍历表的所有单元格,并将背景颜色更改为黑色.但是,我不明白要为特定字

假设我有一个html表,单元格背景为红色.我想使用 jquery在表格的循环中打印字母(A-Z),例如字母J看起来如下图所示：

Click here to view the image

我可以创建一个表和一个指针,它可以循环遍历表的所有单元格,并将背景颜色更改为黑色.但是,我不明白要为特定字母突出显示哪些单元格.例如,要在30 x 30表格上显示字母“A”,我需要更改其背景,以便我在屏幕上显示字母A,以此类推其他字母.这有什么模式吗？

这是我到目前为止的代码：

<html>
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        var x=0;
        var y=1;
        function movePointer(){
            printCell();
            if(x==30){
                x=0;
                y++;
            }
            if(y==31){
                y=1;
                x=0;
                $(".pointer").css("background","red");
            }
            x++;
        }

        function printCell(){
            $("#"+x+"_"+y).css("background","black");
        }
        function eraseCell(){
        }
        setInterval(movePointer,1);
    });
</script>
</head>
<body style="margin:0; padding:0">
        <?php
            $h=30;
            $v=30;
            echo "<table border='1'>";
            for($y=1;$y<=$v;$y++){
                echo "<tr>";
                for($x=1;$x<=$h;$x++){
                    echo "<td style='border:1px solid red; width:20px; height:20px'>";
                    echo "<div style='width:20px; height: 20px; background:red' class='pointer' id='".$x."_".$y."'></div>";
                    echo "</td>";
                }
                echo "</tr>";
            }
        ?>
    </table>
</body>

解决方法

要实现这样的功能,你需要像“位图”这样的东西,所以你需要一个字母映射/数组,它为每个元素附加了另一个具有不同颜色的方形索引的数组.

编辑：

一个简单的例子就是使用类似的东西：

var alphabet = ("abcdefghijklmnopqrstuvwxyz").split("");
var letterBitmap = {};
$.each(alphabet,function(index,data){
letterBitmap[data] = new Array("1.1");
console.log(letterBitmap[data]);
});

请注意,表示新数组(“1.2”)的行实际上是需要进行匹配的第一个块的坐标,给定1作为行,2作为列.对于一封信你应该有类似的东西：

新数组(“1.1”,“2.3”,“5.2”)等,请注意坐标无效,它们只是概念证明.

在获得这种格式的数据之后,通过该坐标数组,分割它们并选择正确的颜色索引非常简单.

希望能帮助到你.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!