使“*”和空间大小相同

Question

我正在为刚接触开发的人准备一个小项目。它包含一些HTML内容，他们应该用Javascript制作一些形状，如矩形或三角形。表格应该由“*”“绘制”。由于我将介绍 元素和一些简单的for和if-constructs，我希望它们创建一个如下所示的矩形：

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

以不同的大小。

我可以想象一个看起来像这样的代码：

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
}