製作「*」和空格大小相同

Question

我正在爲正在開發的新手準備一個小項目。它包括一些HTML的東西，他們應該在這裏製作一些類似矩形或三角形的Javascript。這些表格應該由「*」「繪製」。因爲我要介紹的 元素和一些簡單的，如果構建體，我希望他們能夠創建一個矩形，看起來像這樣：

* * * * 
* * * 
* * * * 
* * * 
* * * * 

不同大小

。

我能想象一個代碼看起來像這樣：

for (j = 0; j < 10; j++) { 
 
    for (i = 1; i <= 20; i++) { 
 
    if (j % 2 == 1) { 
 
     if (i % 2 == 1) { 
 
     document.write("*"); 
 
     } else { 
 
     document.write("&nbsp;"); 
 
     } 
 
    } else { 
 
     if (i % 2 != 1) { 
 
     document.write("*"); 
 
     } else { 
 
     document.write("&nbsp;"); 
 
     } 
 
    } 
 
    } 
 
    document.write("<br/>"); 
 
}

因爲我剛剛嘗試過了，我想知道，在HTML中的「*」和空格不不具有相同的尺寸。現在我正在尋找使其尺寸相同的命令（因爲我知道有一個），但我找不到它。

Answer 1

這不是javascript問題。

您必須使用monospace字體。基本上這組字體對於每個字符具有相同的像素寬度。

此處詳細瞭解：https://en.wikipedia.org/wiki/Monospaced_font

Answer 2

試試這個，

for (j = 0; j < 10; j++) { 
 
     for (i = 1; i <= 20; i++) { 
 
      if (j % 2 == 1) { 
 
       if (i % 2 == 1) { 
 
        document.write("*"); 
 
       } else { 
 
        document.write("<span class='space'></span>"); 
 
       } 
 
      } else { 
 
       if (i % 2 != 1) { 
 
        document.write("*"); 
 
       } else { 
 
        document.write("<span class='space'></span>"); 
 
       } 
 
      } 
 
     } 
 
     document.write("<br/>");}

.space { 
 
margin-left: 10px; // change this as you require 
 
}