我如何使用html表格单元显示字母作为彩色像素？ [英] How can I display letters using html table cells as colored pixels?

问题描述

假设我有一个带有黄色背景的html表格（50 x 50个单元格）。我想使用jQuery在动画循环中使用单元格的背景颜色来打印字母（A-Z）（例如一些单元格为蓝色，大多数单元格为黄色）。我可以创建一个表格和一个指针，它可以遍历表格的所有单元格，从而可以将特定单元格（x，y）的背景颜色更改为不同的颜色。但是，我不明白要突出显示哪些单元格以形成特定的字母。例如，要在50 x 50网格上显示字母A，哪些单元格需要更改为新的背景颜色，以便使单元格在屏幕上显示字母A，以此类推其他信件。这是否有任何模式？

解决方案

使用循环创建单元格，例如：

<$ p $ （var i = 65; i <= 90; i ++）{
console.log（String.fromCharCode（i））;



$ b $ 65 $是 A的字符代码 code>，90代表 Z ）。
在循环中，将id与char相加。像charA，charB。
如果您只知道50x50中的（x，y），那么您可以访问搜索id<char+ letter>的字段。 p



grid，计算它与哪一个字母：



  String.fromCharCode（65 + y * 50 + x）; 
  

或者从elment本身获取它的价值



  $（this）.val（）; 
  

或者从属性中附加到它：



  $（this）.attr（'letter'）
  




Let's say I have an html table (50 x 50 cells) with a yellow background. I would like to use the background colors of the cells to print letters (A-Z) (e.g. some cells blue and most cells yellow) in an animated loop, using jQuery. I can create a table and a pointer which can loop through all the cells of the table such that it can change the background color of a particular cell (x,y) to different color. However, I don't understand which cells to highlight to form a particular letter. For example, to display the letter "A" on the 50 x 50 grid, which cells do I need to change to a new background color such that I get the letter A displayed on the screen with the cells, and so on for all the other letters. Is there any pattern for this?

解决方案

Create the cells with a loop such as:

for(var i=65;i<=90;i++) {
    console.log(String.fromCharCode(i));
 }

(65 is the char code for A, 90 for Z). in the loop, attach id with the char. something like "charA", "charB". Than you can access the fields searching the id <"char" + letter>.

if you know only the (x,y) in the 50x50 grid, calculate which letter it is with:

String.fromCharCode(65+y*50+x);

Or take the value of it from the elment itself

$(this).val();

Or from attribute you attach to it:

$(this).attr('letter')

这篇关于我如何使用html表格单元显示字母作为彩色像素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！