Question

我正在使用jquery，在完成加载的HTML文档中，我需要在我的div标签中显示一个10x10矩形的“＃”字符，其ID为“artArea”。我似乎无法弄明白。任何帮助都会很精彩！

以下是我目前的进展：我不确定我的function (retangle)是完全错误还是我错误地调用了该功能。 https://jsfiddle.net/7u1ao2d9/

Answer 1

您的代码存在很多问题。首先，坚持在您想要矩形的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“＃”，然后外循环将一个“\ n”添加到字符串的末尾。 10“＃”。 “\ n”被称为换行符，并在文本中引起换行符。要确保在您的html中显示此换行符，请将以下代码添加到您的css文件中：

#artArea {
    white-space: pre;
}

嵌套循环完成运行后，我们有一个包含10x10网格“＃”的字符串。现在剩下的就是选择我们想要显示网格的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);

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

Answer 2

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

$(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>

Answer 3

每10个计数插入换行符，最多可计数100。使用该函数生成输出并在所需的任何元素上使用它。

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>

您可以使用Developer Tools调试脚本。

Answer 4

此版本创建一个由Rows x Cols单元格组成的表格，在每个单元格中放置一个＃（或您设置的任何Char字符），并通过使用id = r（行号）c为您留下可以修改的内容（ col号）。我将这个块放在文档的头部。

正如其他人所建议的那样，应该进行某种输入验证，以确保人们不会放置一系列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上尝试过，但还没有制作文件。

Answer 5

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

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

您希望像@btwebste所提到的那样，使用white-space声明来确保呈现换行符。

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

https://jsfiddle.net/rgjy50e5/

如何制作一个10x10的“＃”字符矩形？

5 个答案: