0 
  /\
 /  \
/    \



 /\/\
/    \ 

   /\  
/\/  \

 /\
/  \/\


/\/\/\

对于 n=3 对起伏，我有 5 种可能的方式来绘制这些山脉。（我永远不应该低于 x=0 轴）。我有以下长 javascript 代码，当我在浏览器的控制台中打印这些输出时可以正常工作。但是，当我尝试将它们输出为 html 时，起伏没有正确对齐。这是我的代码：

<html>


<script>
F=n=> {
m = n+n
outer:
   for (i=1; i < 1<<m; i+=2)
  {
       o=[]
       l=0;
       p=1;
   for (j = 1; j <1<<m; j+=j,p++)
 {

        if (i&j)
     {
        q=o[n-l]||[]
        q[p]=1;
        o[n-l]=q
        ++l;
     }
      else
       {
         --l;
          if (l<0) continue outer;
          q=o[n-l]||[]
          q[p]=0;
          o[n-l]=q
         }
      }
      if (l==0) 
  {

       console.log(o.join('\n').replace(/,\d?/g,r=>'\\/'[r[1]]||' '));    // WORKS FINE IN CONSOLE AS SHOWN IN ABOVE.
       document.write(o.join('<br>').replace(/,\d?/g,r=>'\\/'[r[1]]||' ')  ) // DOESNT PROPERLY SHOW THEM.

            }
        }
    }


    F(3);

    </script>

</html>

它像这样打印它们：

/\
/ \
/ \

/\/\
/ \

/\
/\/ \

/\
/ \/\


/\/\/\

有人知道我如何正确输出它们吗？

4

1 回答 1

1

你的问题是你使用' '空间作为垃圾空间。HTML 不喜欢文字空间。最好&nbsp;用作

document.write(o.join('<br>').replace(/,\d?/g, r => '\\/' [r[1]] || '&nbsp;'));

另一件事是，使用固定宽度的字体并适当地line-height获得更好的结果。

JSFiddle 示例

于 2017-02-01T21:51:43.490 回答