时间戳

首页 > 解决方案 > 如何打印星号矩形

jquery - 如何打印星号矩形

问题描述

如何使用 jQuery 打印一个星号矩形？我有两个输入字段，用于获取输入值，两个绘制一个星号矩形。

$(document).ready(function() {
  $("#new").click(function() {
    var firstnum = document.getElementById("column").value;
    var secondnum = document.getElementById("rows").value;
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1 style="text-align: center;">To Print Asterisks</h1>
<label>Enter Column</label>
<input type="text" id="column" placeholder="Enter The Column Number"><br>
<label>Enter Rows</label>
<input type="text" id="rows" placeholder="Enter The Rows Value"><br>
<button id="new">Submit</button>

该按钮用于将我们在输入字段中给出的两个值相乘，然后创建矩形的行和列。输出应该在提交按钮下方，但我没有解决方案。

标签： jqueryhtml

解决方案

你可以尝试这样的事情：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script language="javascript">
    $(document).ready(function() {
        $("#new").click(function() {
            var firstnum = document.getElementById("column").value;
            var secondnum = document.getElementById("rows").value;
            var row = "";
            for(var i = 0; i < firstnum; i++) {
                row += "*";
            }
            row += "<br/>"; // Or "\n" if you want non-html markup result
            var rectangle = "";
            for(var i = 0; i < secondnum; i++) {
                rectangle += row;
            }
            $("#output").html(rectangle);
        });
    });
</script>

<h1 style="text-align: center;">To Print Asterisks</h1>
<label>Enter Column</label>
<input type="text" id="column" placeholder="Enter The Column Number"><br>
<label>Enter Rows</label>
<input type="text" id="rows" placeholder="Enter The Rows Value"><br>
<button id="new">Submit</button>
<div id="output"></div>

推荐阅读