怎么打印空心星星和实心星js

打印空心星星和实心星的JavaScript方法

打印空心星星和实心星的JavaScript方法主要包括：使用嵌套循环构建图形、判断条件填充星星和空格、使用字符串拼接输出结果。 其中，使用嵌套循环构建图形是核心方法。以下将详细介绍如何使用JavaScript实现这两个图形。

一、构建实心星星

实心星星的构建相对简单，只需要使用嵌套循环将每个位置都填充上星星即可。

1、使用嵌套循环打印实心星星

实心星星的打印可以通过两个嵌套的for循环来实现。外层循环控制行数，内层循环控制每行的字符数。

function printSolidStars(size) {
    for (let i = 0; i < size; i++) {
        let row = '';
        for (let j = 0; j < size; j++) {
            row += '* ';
        }
        console.log(row);
    }
}

在上面的代码中，size代表星星图形的边长，外层循环遍历每一行，内层循环遍历每一列，将每个位置都填充上星星。

二、构建空心星星

空心星星的构建稍微复杂一些，需要在特定的位置填充星星，而其他位置则填充空格。

1、使用嵌套循环和条件判断打印空心星星

打印空心星星时，需要判断当前的位置是否在边界上，如果在边界上则填充星星，否则填充空格。

function printHollowStars(size) {
    for (let i = 0; i < size; i++) {
        let row = '';
        for (let j = 0; j < size; j++) {
            if (i === 0 || i === size - 1 || j === 0 || j === size - 1) {
                row += '* ';
            } else {
                row += '  ';
            }
        }
        console.log(row);
    }
}

在这段代码中，if条件语句用于判断当前的位置是否在边界上（即第一行、最后一行、第一列或最后一列），如果是则填充星星，否则填充空格。

三、使用函数参数控制图形的大小

上述两个函数都使用了size参数，可以轻松地控制图形的大小。调用时只需要传入一个整数即可。例如：

printSolidStars(5);
printHollowStars(5);

四、将结果输出到网页中

在实际应用中，我们可能需要将结果显示在网页上而不是控制台中。可以使用JavaScript DOM操作将结果插入到网页中。

function displaySolidStars(size) {
    let container = document.getElementById('solidStars');
    for (let i = 0; i < size; i++) {
        let row = '';
        for (let j = 0; j < size; j++) {
            row += '* ';
        }
        let rowElement = document.createElement('div');
        rowElement.textContent = row;
        container.appendChild(rowElement);
    }
}
function displayHollowStars(size) {
    let container = document.getElementById('hollowStars');
    for (let i = 0; i < size; i++) {
        let row = '';
        for (let j = 0; j < size; j++) {
            if (i === 0 || i === size - 1 || j === 0 || j === size - 1) {
                row += '* ';
            } else {
                row += '  ';
            }
        }
        let rowElement = document.createElement('div');
        rowElement.textContent = row;
        container.appendChild(rowElement);
    }
}

在HTML中需要有两个容器来展示结果：

<div id="solidStars"></div>
<div id="hollowStars"></div>

调用时：

displaySolidStars(5);
displayHollowStars(5);

五、总结

通过使用嵌套循环构建图形，我们可以轻松地在JavaScript中打印出实心星星和空心星星。判断条件填充星星和空格是打印空心星星的关键。可以通过字符串拼接输出结果，并使用DOM操作将结果显示在网页上。这个方法不仅适用于星星图形，还可以扩展到其他字符图形的打印。

参考示例

以下是一个完整的示例代码，包括打印实心星星和空心星星，并将结果显示在网页上：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Star Patterns</title>
    <style>
        #solidStars, #hollowStars {
            margin: 20px;
            font-family: monospace;
        }
    </style>
</head>
<body>
    <div id="solidStars"></div>
    <div id="hollowStars"></div>
    <script>
        function displaySolidStars(size) {
            let container = document.getElementById('solidStars');
            for (let i = 0; i < size; i++) {
                let row = '';
                for (let j = 0; j < size; j++) {
                    row += '* ';
                }
                let rowElement = document.createElement('div');
                rowElement.textContent = row;
                container.appendChild(rowElement);
            }
        }
        function displayHollowStars(size) {
            let container = document.getElementById('hollowStars');
            for (let i = 0; i < size; i++) {
                let row = '';
                for (let j = 0; j < size; j++) {
                    if (i === 0 || i === size - 1 || j === 0 || j === size - 1) {
                        row += '* ';
                    } else {
                        row += '  ';
                    }
                }
                let rowElement = document.createElement('div');
                rowElement.textContent = row;
                container.appendChild(rowElement);
            }
        }
        displaySolidStars(5);
        displayHollowStars(5);
    </script>
</body>
</html>

通过上述方法，可以灵活地控制星星图形的大小，并将结果显示在网页上，适用于各种前端开发需求。