Question

鉴于数字s，我试图根据该数字打印一个正方形。例如，如果s为4，则方块看起来像这样

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

但我的代码就是这样做

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

当我做html + =＆＃34; ＆＃34;，它没有做它在迭代中应该做的事情。它只增加一个空格。有办法解决这个问题吗？

    var html = ""
    for(var i = 0; i < s; i++)
    {
      for(var j = 0; j < s; j++)
      {
        if(i != 0 && i != s-1)
        {
          if(j == 0)
          {
            html += "*";
          }
          else if(j == s-1)
          {
            html+= "*";
          }
          else 
          {
            //not working
            html += " ";
          }
        }
        else 

          html += "* ";
      }
      html += "<br>";
    }
    html += ""
    document.getElementById("output").innerHTML = html;

Answer 1

使用 代替普通空格。 HTML将多个空间折叠为一个。代表不易碎的空间。

Answer 2

我认为空间( )和*的宽度不一样，所以你可能得不到正确的形状！最好使用固定宽度与css和html元素，如下所示..

var html = "",s = 4;
    for(var i = 0; i < s; i++)
    {
      for(var j = 0; j < s; j++)
      {
        if(i != 0 && i != s-1)
        {
          if(j == 0)
          {
            html += "<span>*</span>";
          }
          else if(j == s-1)
          {
            html+= "<span>*</span>";
          }
          else 
          {
            //not working
            html += "<span></span>";
          }
        }
        else {
          html += "<span>*</span>";
        }
      }
      html += "<br>";
    }
  
    document.getElementById("output").innerHTML = html;

#output {
white-space: pre-wrap;
}
span {
 width:20px;
 display:inline-block;
}

<div id="output"></div>

根据循环打印带边的正方形

2 个答案: