如何使用jQuery在屏幕上绘制字母表
How can I draw alphabet letters on screen using jQuery
假设我有一个单元格背景为红色的html表。我想使用jquery在表上循环打印字母表(a-Z),例如字母J如下图所示:
单击此处查看图像
我可以创建一个表和一个指针,它可以在表的所有单元格中循环,并将背景颜色更改为黑色。然而,我不明白对于特定的字母表应该突出显示哪些单元格。例如,要在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]);
});
请注意,表示new Array("1.2")的行实际上是需要并置的第一个块的坐标,其中1为行,2为列。对于一封信,你应该有这样的东西:
new Array("1.1"、"2.3"、"5.2")等,注意坐标无效,它们只是概念的证明。
在你有了这样一种格式的数据后,很容易通过坐标数组,分割它们,然后选择正确的索引来着色。
希望能有所帮助。
您可以为每个字母创建某种位图作为多维数组。
您可以编写一个简单的html,通过单击单元格来绘制字母。然后返回一个带有单元格状态的十六进制数字。然后在代码中使用生成的数据。
另一种选择是在谷歌上搜索一些已经完成字母的"Ascii字体表"(我试过了,但运气不好)。
如果一切都失败了,您可以使用控制台命令"banner"为a-Z生成此文本。
更简单的方法是编写这个迷你绘图html工具:D
相关文章:
- 如何在javascript中通过rtl字母表对列表进行排序和分组
- 对于循环-在循环内部循环,用于获取带有ascii值的字母表
- 只允许数字出现在字母表后面
- 在JavaScript中增加字母表
- JQuery文本区域字母表
- 如何使正则表达式接受ONLY字母表和空格
- 字母表中的选择
- 仅当后面跟着字母表时才允许使用空格字符的验证
- 如何使用regex从字母表字符串中删除特定的字母
- 显示给定输入数字的数据集中字母表的所有可能组合
- 存储字母表中每个字母在所需位置的字符串中出现的次数
- 基于字母表的选择元素的动态选项组
- 将字母表中的所有字母实例替换为另一个
- 在 Jquery 中创建词汇表字母表
- 在CSS和/或Javascript中给定文本中俄语字母表的每个字符都有不同的颜色
- 我正在尝试遍历所有字母表的数组并将所有其他字母大写.任何解决方案
- 为字母表中的所有字母创建链接
- JavaScript 循环字母表与搜索词
- 选择单选按钮时更改字母表
- 如何使用jQuery在屏幕上绘制字母表