用字母做一个正方形

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

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

本质上，如果满足以下条件，则应输出 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 2

如果其中一个索引为零或加一等于正方形的所需位置，您可以添加，然后取一个边框字符或 space。

基本上是这一行

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

包含三个部分：

一个 addition assignment +=，它接受一个表达式并将其添加到左侧变量。
```
text += someExpression
```
A conditional (ternary) operator ?: which takes an expression and checks if this is truthy (like any number except zero or NaN, any non empty string, an object or array, true) or falsy（如零/NaN、''、null、undefined、false） .

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

它是一种带有获取表达式的if语句的简写形式。
```
expression ? alternative1 : alternative2 // code
truthy   ->  alternative1                // result
falsy    ->                 alternative2
```
条件部分。条件与 logical OR || 相关联，此 returns 第一个 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 3

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

Answer 4

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

用字母做一个正方形

Make a square with letters

javascript

html

ascii-art