javascript - 使用大写字母绘制矩形

Question

我想用大写字母制作矩形。例如，当我们输入 是“A”，然后显示

A 

如果“B”，则

BBB
BAB
BBB

如果“C”，则

CCCCC 
CBBBC
CBABC
CBBBC
CCCCC

图案将像这样直到Z。我已经设法制作了矩形，但它始终是相同的字母，如下所示:

BBB
BBB
BBB

这是我的代码:

$('#click').click(function () {
    $('#output').html('');
    var input = $('#input').val();
    var validpattern = new RegExp('^[A-Z\d&Ñ]+$');
    if (input.length > 1) {
        $('#output').append('invalid output');
    } else if (!input.match(validpattern)) {
        $('#output').append('invalid output');
    } else {
        var string = String.fromCharCode(input.charCodeAt(0));
        var stringa = 65;
        var inputascii = string.charCodeAt();
        var inputasciiawal = inputascii;
        var jarak = inputascii - stringa;
        jarak = jarak * 2;
        var kiri = 0;
        console.log(jarak);

        for (kiri; kiri <= jarak; kiri++) {
            $('#output').append('<br>');
            for (var isi = 0; isi <= jarak; isi++) {
               $('#output').append(String.fromCharCode(inputascii));
            }
        }
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="input">
<button id="click">click</button>
<br><br>
<span id="output"></span>

Answer 1

您可以计算字母“A”的代码与输入的第一个字母之间的距离。然后，您可以构建一个边长等于的正方形

var side = (2*distance)+1;

这是因为您为中心字母保留了一个单元格，并为每侧周围的字母保留了距离单元格。

然后你可以做一个双循环(一个用于行，一个用于列)，计算距中心的距离，然后输出正确的字母。这是应用程序的核心(显然您可以在其之前添加输入检查，以验证输入数据)

var input = "D"; // the first letter of input
var value = input.charCodeAt(0);
var stringa = 65;
var distance = value-stringa;
var side = (2*distance)+1;
console.log(distance);

for(i=0;i<side;i++)
{
    for(j=0;j<side;j++)
    {
        var absi = Math.abs(i-distance);
        var absj = Math.abs(j-distance);
        var max = Math.max(absi,absj);
        var letter = String.fromCharCode(stringa + max)
        $('#output').append(letter + '&nbsp;&nbsp;&nbsp;');      
    }

    $('#output').append('<br/>');  
}

Fiddle

也许这不是最有效的解决方案，但它完成了工作(实际上，我不认为在这种情况下效率会代表问题)。