堆栈内存溢出
  繁体   English   中英

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

[英]How to make a 10x10 rectangle of “#” characters?

 原文  2015-11-29 03:20:25  1   5    javascript

问题描述

我正在使用jquery，并且在HTML文档完成加载后，我需要在ID为“ artArea”的div标签中显示10x10矩形的“＃”字符。 我似乎无法弄清楚。 任何帮助都将是美好的！

这是我当前的进度：我不确定我的function (retangle)是否完全错误或我是否错误地调用了该函数。 https://jsfiddle.net/7u1ao2d9/

5 个解决方案

解决方案1
 0  2015-11-29 04:44:31

您的代码有很多问题。 首先，将script标签粘贴到div中您想要的矩形所在的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);

请注意，以这种方式编写函数会为可能的错误打开大门，甚至取决于用户输入的安全性。 例如，如果用户未在行或列字段中输入数字，则会破坏代码。 因此，如果您走这条路线，则需要执行更多的错误检查，字符转义等操作。

解决方案2
 0  2015-11-29 05:08:39

您可以尝试找到给定#字符的宽度。 这是用于查找#字符的尺寸并计算容器尺寸的代码。 确保目标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>

解决方案3
 0  2015-11-29 05:13:00

每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>

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

解决方案4
 0  2015-11-29 06:04:39

这个版本创建了一个由Rows x Cols单元格组成的表格，在每个单元格内放置一个＃（或您将Char设置为的值），并为您提供了可以通过使用id = r（row number）c（col number）进行修改的内容。 。 我将此块放在文档的头部。

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

解决方案5
 0  2015-11-29 12:43:08

这是单行代码，不包括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/

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 创建一个 10x10 字段的字段 创建一个10x10的单元格字段 制作具有 10x10 单元格的表格，每个单元格的内部编号从 1 到 100 JS：如何创建一个10x10的填充矩形网格？ 为什么我的程序创建10x9网格而不是10x10网格？ 使用easyl.js创建10x10图像网格，图像交叉随机溶解 HTML / CSS：具有相等边距的10x10 div框，但是由于某种原因，高度长于宽度 需要有关HTML / JS方法的帮助，从此处开始构建10x10乘法表，此表应稍后在动态 Minimax Alpha Beta修剪算法花费太多时间来解决井字游戏（10x10电路板） 在前 10 个字符后用 X 替换接下来的 14 个字符
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM