Сделать квадрат с буквами

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. добавочное присваивание +=, которое берет выражение и добавляет его к левой переменной.

   text += someExpression
   

2. A условный (троичный) оператор ?:, который принимает выражение и проверяет, является ли это истинным (как любое число кроме нуля или NaN, любой непустой строки, объекта или массива, true) или falsy (например, ноль / NaN, '', null , undefined, false).

   Если истинно , оно принимает значение после ?, а если falsy - значение после :.

   Это своего рода краткая форма оператора if с получением выражения.

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

3. Часть условия. Условия связаны с логическим ИЛИ ||, при этом возвращается первое истинное значение или последнее ложное единица.

   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;
}

Answer 2

Вам просто нужно добавить небольшую логику c, чтобы определить, следует ли выводить o или пробел.

По существу, o должно быть выведено, если:

• Это первая или последняя строка или
• это первая или последняя колонка.

См. Фрагмент кода ниже:

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

Вы можете поместить эту среднюю часть в тег и выполнить стилизацию для этого тега.