用字母做一个正方形

Question

我有这个：

ooooo
ooooo
ooooo
ooooo
ooooo

把o放在除中间以外的所有东西上，这样它就变成了：

ooooo
o   o
o   o
o   o
ooooo 

无论如何我可以在 Javascript 中做到这一点吗？ 我目前的代码是： HTML：

<input type = 'text' id = 'box' placeholder = 'Enter n'  onkeyup = 'bigbox();'/>
        <br><br>

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

脚本：

 function bigbox() { 

            number = document.getElementById('box').value;
            display = document.getElementById("output");

        for(let j = 0; j<number; j++) {
            for(let i = 0; i<number; i++) 
            text += "o";
            text += "<br>";

            }


        display.innerHTML = text;

Answer 1

如果索引之一为零或加一等于正方形的所需位置，则可以添加，然后使用边框字符或空格。

基本上就是这一行

text += i === 0 || i + 1 === size || j === 0 || j + 1 === size ? "o": " ";

包含三个部分：

1. addition assignment +=，它接受一个表达式并将其添加到左侧变量中。

   text += someExpression
   

2. 一个conditional (ternary) operator ?:，它接受一个表达式并检查它是否是truthy（就像除零或NaN之外的任何数字，任何非空字符串，对象或数组，true）或falsy（如零/NaN, '', null, undefined, false)。

   如果truthy，取?之后的值，如果falsy取:之后的值。

   它是if 语句的一种简短形式，带有一个表达式。

   expression ? alternative1 : alternative2 // code
   truthy   ->  alternative1                // result
   falsy    ->                 alternative2
   

3. 条件部分。条件是与logical OR || 连接，这将返回第一个 truthy 值，或最后一个 falsy 值。

   condition1 || condition2 || condition3 || ...
   

   条件检查索引，如果为零或最大的有效值，那么你打了一个边界，否则你在正方形内。

function bigbox(size) {
    var display = document.getElementById("output"),
        text = "";

    size = +size;
    for (let j = 0; j < size; j++) {
        for (let i = 0; i < size; i++) {
            text += i === 0 || i + 1 === size || j === 0 || j + 1 === size ? "o": " ";
        }
        text += "<br>";
    }
    display.innerHTML = text;
}

<input type="text" id="box" onchange="bigbox(this.value)">
<pre id="output"></pre>

Answer 2

您只需要添加一点逻辑来确定应该输出o 还是空格。

基本上，o 应该在以下情况下输出：

• 这是第一行或最后一行，或者
• 它是第一列或最后一列。

参见下面的示例 sn-p：

function bigbox() { 
  number = document.getElementById('box').value;
  display = document.getElementById("output");
  var text = '';
  
  for(let j = 0; j < number; j++) {
    for(let i = 0; i < number; i++) {
      if (j == 0 || j == number - 1 || i == 0 || i == number - 1) {
        text += "o";
      } else {
        text += '&nbsp;';
      }
    }
    text += "<br>";
  }
  display.innerHTML = text;
}

bigbox();

#output {
  font-family: "Courier New", Courier, "Lucida Sans Typewriter", "Lucida Typewriter", monospace;
}

<input id="box" value="5" />
<div id="output"></div>

Answer 3

function bigbox() { 

        number = document.getElementById('box').value;
        display = document.getElementById("output");
    text="";
    for(let j = 0; j<number; j++) {
        for(let i = 0; i<number; i++)
        if(j != 0 && j != number - 1)
            if(i==0)
                    text += "o";
            else if(i == number-1){
                text += "o";
                text += "<br/>";
            }else
            text += "&nbsp;&nbsp;"
        else{
            text += "o";
        }
        text += "<br/>";            

        }

    display.style.lineHeight = 0.5;
    display.innerHTML = text;
}

Answer 4

您可以将中间部分放在标签中并对该标签进行样式设置。