正文

学会JS轻松打印星星图案，创意编程教程！

/0 浏览量
0804

在编程的世界里，星星图案是一个经典且易于上手的例子，它可以帮助初学者更好地理解循环、条件判断等基础概念。今天，我们就来一起用JavaScript来绘制一个漂亮的星星图案。准备好了吗？让我们一起开启这段创意编程之旅吧！

星星图案原理

星星图案通常由多个等腰三角形组成，我们可以通过控制字符的位置来绘制这些三角形，从而形成星星的形状。

准备工作

在开始之前，请确保你的电脑上安装了JavaScript环境。如果你是初学者，可以使用在线的JavaScript编辑器，比如CodePen或JSFiddle。

步骤详解

1. 创建HTML文件

首先，我们需要创建一个HTML文件，并在其中引入JavaScript代码。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>JavaScript星星图案教程</title>
</head>
<body>
    <div id="star-container"></div>
    <script src="star.js"></script>
</body>
</html>

2. 编写JavaScript代码

接下来，我们将在名为star.js的JavaScript文件中编写代码。

function drawStar(size) {
    let starContainer = document.getElementById('star-container');
    let starHTML = '';

    for (let i = 0; i < size; i++) {
        for (let j = 0; j < size * 2 - 1; j++) {
            let condition = Math.abs(i - size / 2) + Math.abs(j - size) < size / 2;
            starHTML += condition ? '*' : ' ';
        }
        starHTML += '<br>';
    }

    starContainer.innerHTML = starHTML;
}

drawStar(10);

3. 解释代码

  • drawStar(size) 函数接受一个参数 size，表示星星的大小。
  • 使用两层循环来遍历星星的每一行和每一列。
  • condition 变量用于判断当前位置是否应该绘制星星（*）还是空白（）。
  • starHTML 变量用于构建星星的HTML字符串。
  • 最后，将构建好的HTML字符串赋值给 star-container 元素的 innerHTML 属性，从而在页面上显示星星图案。

实践与拓展

  • 尝试调整 drawStar 函数中的 size 参数，看看星星的大小如何变化。
  • 尝试修改条件判断，绘制不同形状的图案。
  • 将星星图案绘制成一个动态效果，比如旋转或闪烁。

结语

通过这个简单的例子，我们学会了如何使用JavaScript来绘制星星图案。星星图案不仅美观，而且可以帮助我们更好地理解编程基础。希望这篇文章能激发你对编程的兴趣，继续探索这个充满创造力的领域。加油！

-- 展开阅读全文 --