用javascript打印一个空心正方形

2024-12-19 04:25:57 JS 976

要用 JavaScript 打印一个空心正方形，可以通过控制台输出或者在 HTML 页面上绘制一个空心正方形。以下是两种方式的示例：

在控制台输出空心正方形

javascript
function printHollowSquare(size) {
    if (size <= 0) {
        console.log("Size must be a positive integer.");
        return;
    }

    // 打印第一行
    let firstLastRow = "";
    for (let i = 0; i < size; i++) {
        firstLastRow += "* ";
    }
    console.log(firstLastRow);

    // 打印中间行
    for (let i = 1; i < size - 1; i++) {
        let middleRow = "* ";
        for (let j = 1; j < size - 1; j++) {
            middleRow += (j === size - 2) ? "* " : "  "; // 第一列和最后一列输出"*"，其他列输出空格
        }
        console.log(middleRow);
    }

    // 打印最后一行
    console.log(firstLastRow);
}

// 测试打印一个空心正方形
printHollowSquare(5);

在 HTML 页面上绘制空心正方形

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hollow Square</title>
    <style>
        .square {
            display: inline-block;
            font-size: 20px;
            line-height: 20px;
        }
        .square .row {
            white-space: pre; /* 保留空格 */
        }
    </style>
</head>
<body>
    <div id="hollowSquare"></div>

    <script>
        function drawHollowSquare(size) {
            if (size <= 0) {
                console.log("Size must be a positive integer.");
                return;
            }

            let squareHTML = "";
            // 绘制每一行
            for (let i = 0; i < size; i++) {
                let row = "";
                if (i === 0 || i === size - 1) {
                    // 第一行和最后一行打印满星号
                    for (let j = 0; j < size; j++) {
                        row += "* ";
                    }
                } else {
                    // 中间行，只有第一个和最后一个位置打印星号
                    row += "* ";
                    for (let j = 1; j < size - 1; j++) {
                        row += (j === size - 2) ? "* " : "  "; // 第一列和最后一列输出"*"，其他列输出空格
                    }
                }
                squareHTML += `<div class="row">${row}</div>`;
            }

            document.getElementById("hollowSquare").innerHTML = `<div class="square">${squareHTML}</div>`;
        }

        // 测试在 HTML 页面上绘制一个空心正方形
        drawHollowSquare(5);
    </script>
</body>
</html>

总结

通过上述 JavaScript 代码示例，可以在控制台或者 HTML 页面上打印出一个空心正方形。在控制台输出的方法适合简单的输出需求，而在 HTML 页面上绘制的方法可以实现更灵活的显示和样式控制。