如何制作一个10x10的矩形“#"字符

How to make a 10x10 rectangle of "#" characters?

本文关键字：quot 字符 何制作 10x10 一个      更新时间：2023-09-26

我正在使用jquery，在HTML文档完成加载后，我需要在我的div标记中显示一个10x10的"#"字符矩形，其ID为"artArea"。我似乎想不通。任何帮助都将是美妙的！

以下是我目前的进展：我不确定我的function (retangle)是否完全错误，或者我是否错误地调用了函数。https://jsfiddle.net/7u1ao2d9/

您可以尝试查找给定#字符的宽度。以下代码用于查找#字符的尺寸并计算容器的尺寸。请确保目标div和字符计算div都具有相同的行高和字体大小。请确保将#charWidthdiv放在视线之外。

$(document).ready(function() {
  $('#charWidth').html('#');
  var charWidth = $('#charWidth').width();
  var charHeight = $('#charWidth').height();
  var target = document.getElementById('target');
  target.style.width = 10 * charWidth + 'px';
  target.style.height = 10 * charHeight + 'px';
  console.log(10 * charWidth);
  console.log(10 * charHeight);
  for (var i = 0; i != 100; i++) {
    if ((i % 10) == 0) target.innerHTML += '<br>';
    target.innerText += '#';
  }
});
#charWidth {
  position: absolute;
  top: 5000000000000vh;
  opacity: 0;
  display: table;
  /*be sure that it has the same line height and font size as your target div*/
  font-size: 16px;
  line-height: 16px;
}
#target {
  font-size: 16px;
  line-height: 16px;
  white-space: pre-wrap;
  overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="charWidth"></div>
<div id="target"></div>

最多计数100，同时每10次计数插入一个换行符。使用函数生成输出，并将其用于所需的任何元素。

function rectangle(){
        var r = "";
        //Go about 10x10=100 counts
        for (var i = 1; i <= 100; i++){
            if (i % 10 === 0)       //Insert line break every 10 counts
               r += "'n"
            else
               r += "#";           
        }
        return r;
    }
$('#artArea').val() = rectangle();

还要考虑这个典型的脚本模式

<html>
   <head>
      <script>
         $(document).ready(...)
      </script> 
   </head>
   <body>
      ...
   </body> 
</html>

您可以使用开发人员工具来调试脚本。

您的代码有很多问题。首先，将绘制"#"矩形的script标记粘贴在div中想要矩形所在的位置不是一个好主意。将脚本标记与其他脚本标记一起放在文档底部是一种更好的做法。在这种情况下，由于您使用的是jQuery，请确保将矩形绘图脚本标记放在加载jQuery库的脚本标记下方。

现在，如果您的脚本标记位于正确的位置，以下内容应该适用于您：

<script>
    function drawRect(){
        var rect = "";
        for (var i = 0; i < 10; i +=1){
            for (var j = 0; j < 10; j += 1){
                rect += "#"
            }
            rect += "'n"
        }
        return rect;
    }
    document.getElementById("artArea").innerHTML = drawRect();
</script>

上述函数所做的一切都是使用嵌套的for循环来构建一个文本字符串。对于每运行一次外循环，内循环将运行十次，所以函数使用内循环向字符串添加10个"#"，然后外循环向10个"#s"的末尾添加一个"''n"。"''n"被称为换行符，并在文本中造成换行。为了确保这个换行符在html中呈现，请将以下代码添加到css文件中：

#artArea {
    white-space: pre;
}

一旦嵌套循环完成运行，我们就有了一个包含10x10网格的"#"s的字符串。现在剩下的就是选择要显示网格的HTML元素，并将该字符串插入其中。这就是document.querySelector("#artArea").innerHTML = drawRect();行所做的。

从你的问题中并不是很明显，但看看你的代码，你似乎希望这个矩形函数能够根据用户输入绘制由不同字符组成的不同网格。如果是这样的话，那么您会想要获取输入并将其作为参数传递给您的函数，如下所示：

var rows= parseInt($("#numRows").val(), 10);
var cols= parseInt($("#numCols").val(), 10);
var char= ("#drawChar").val();
function drawRect(rows,cols,char){
            var rect = "";
            for (var i = 0; i < rows; i +=1){
                for (var j = 0; j < cols; j += 1){
                    rect += char;
                }
                rect += "'n"
            }
            return rect;
        }
drawRect(rows,cols,char);

请注意，以这种方式编写函数会根据用户输入打开可能出现错误甚至安全漏洞的大门。例如，如果用户没有在行或列字段中输入数字，就会破坏代码。因此，如果你走这条路，你需要做更多的错误检查、字符转义等。

此版本创建一个由Rows x Cols单元格组成的表，在每个单元格内放置一个#（或您将Char设置为的任何值），并为您留下一些可以使用id=r（行号）c（行号）进行修改的内容。我把这个方块放在文件的头里面。

正如其他人所建议的那样，应该有某种类型的输入验证，以确保人们不会放置一系列javascript代码或类似代码。

设置表格和单元格的样式，使您的输出符合您的要求。

<script type="text/javascript">
function rectangle()
{
    /**
     * 
     */
    var Rows = parseInt($("input#numRows").val(), 10);
    var Cols = parseInt($("input#numCols").val(), 10);
    var Char = $("input#drawChar").val());
    var artArea = document.getElementById("artArea")
    if (document.getElementById("artTable"))
    {
        //  assuming we made it
        artArea.removeChild(document.getElementById("artTable"))
    }
    var my_table = document.createElement("TABLE");
    my_table.id = "artTable"
    artArea.appendChild(my_table);
    for (var i=0; i < Rows; i++)
    {
        var this_row = document.createElement("TR")
        this_row.id = "r" + i;
        for ( var j=0; j < Cols; j++)
        {
                var this_cell = document.createElement("TD");
                this_cell.id = this_row.id + "c" + j;
                var my_text = document.createTextNode(Char);
                this_cell.appendChild(my_text);
                this_row.appendChild(this_cell);
        }
        my_table.appendChild(this_row);
    }
}
$( document ).ready(function() { rectangle(); });
</script>

在jsfiddle上尝试过，但尚未制作文档。

这是一个单行，不包括docready:

$(document).ready(
    $('#artArea').html("#".repeat(10).concat("'n").repeat(10))
);

就像前面提到的@btwebsite一样，您需要使用white-space声明来确保换行符被呈现。

#artArea {
    text-align: center;
    white-space: pre;
}

https://jsfiddle.net/rgjy50e5/

相关文章：