使用 JavaScript 创建随机颜色生成器的分步指南。
如果您是 JavaScript 新手，您可能已经了解了很多关于数据类型、逻辑、函数等如何工作的知识。 这很好； 有一天要在更复杂的项目中使用 JS，你需要从基础开始。 但是，根据您的注意力范围，您可能很快就会开始强烈希望将您的 JS 技能应用于实际网站。 这样做可能有点复杂（但不像正则表达式那样复杂，amirite），但是您可以从一个更简单的开始，您猜对了，它是一个随机颜色生成器。 在本文中，我将带您完成我自己构建的步骤。
1.添加样板HTML
如果你使用 VS Code，你可以输入 ! 进入空的 HTML 文档，然后按 Enter 添加这部分（不确定其他文本编辑器），如果您还不知道的话。 在样板下方，我添加了指向我用于该项目的 CSS 文档的链接。 我建议将你的 CSS 保存在一个单独的文件中，这样你的 HTML 文件就不会变得太大和复杂。 由于我们要编写的 JavaScript 不是很长，我将直接将其添加到 HTML 文件中的 <script> 标记中，您将在步骤 3 中看到。如果您想要一个单独的 JS 文件 & 将其链接到您的 HTML 文件，您可以这样做：
2. 构建 HTML “骨架”
现在我们已经添加了样板 HTML 并在 <head> 中链接了我们的 CSS 文档，让我们添加正文并构建我们的 HTML。 如您所见，getNewColor() 函数将在页面加载时运行。 在以下步骤中详细了解此功能。
在上图中，我添加了一个 <div>，其中包含几个标题，让用户知道他们在哪里以及要做什么。 然后，我添加另一个 <div>，其中包含一个 <span> 标记，最终将使用 HEX 代码填充该标记，并将在页面上显示为文本。 接下来，我插入一个按钮，用户单击该按钮以生成新的 HEX 代码。 这是由 getNewColor() 函数完成的，我将很快解释。
3.添加JavaScript！
现在我们正处于真正的魔法开始发生的地步。 你兴奋吗？ 我可以告诉。 这是你如何做到的：
对于这样一个相对简单的程序，我们只需要一个函数就可以完成我们需要做的事情，即前面提到的 getNewColor() 函数。对于这个生成器，让我们使用 HEX 代码来确定颜色，但也可以使用 RGB 值。
让我们首先将所有可能的 HEX 字符（整数 0-9 和字母 A-F）以字符串的形式放入一个名为 symbols 的变量中。
然后，让我们用字符串形式的哈希标记初始化颜色变量。这个变量将在下面描述的循环中发生变异。
现在让我们创建一个运行 6 次的循环，因为 HEX 代码中有 6 个值。对于每次循环迭代，符号字符串中的一个随机值被添加到变量颜色中，如果你记得的话，它以字符串形式的 # 开头。此时，每当我们调用 getNewColor() 时，都会得到一个新的 HEX 代码。现在，让我们将该代码应用到我们的 HTML 页面。
根据我的经验，最好将 <script> 标签放在 <body> 标签的末尾。有些人会强烈反对，他们可能有一个观点，但我不打算在本文中讨论这个问题。如果您愿意，请在下面的评论部分进行键盘大战，因为这有利于参与。
4.将JS应用于HTML文件
很酷，我们现在有一个函数可以给我们一个随机的 HEX 代码。然而，除非我们将它应用到我们的 HTML 中，否则这是没有用的。在这种情况下，最好更改整个页面的背景，以便用户可以预览随机颜色，并将 HEX 代码转换为文本格式，以便他们可以复制它。我们首先需要在函数中定义这些行为：
仍然在 getNewColor() 函数内部运行，我们可以使用您在上图中看到的第一行代码访问背景样式属性。 我们也可以使用 backgroundColor，顺便说一下，它可以转换为 CSS 中的背景颜色。 在这一步中，我们将在循环中随机定义的变量color设置为页面的背景颜色。
在第二行代码中，我们通过 id ‘hex’ 访问之前定义的 <span> 标签。 要以文本形式添加变量颜色，我们可以使用我在这里使用的方法 .textContent 或 .innerHTML 方法将颜色附加到 <span> 标记。 请参阅本文末尾的链接，以了解有关它们之间区别的更多信息。 按照我们在上面布局 HTML 的方式，此文本将直接显示在按钮上方，因此用户可以看到显示的确切颜色并根据需要复制它。
总而言之，我们的 JS 看起来像这样：
5.告诉程序何时运行函数
如果我们从不运行它，那么创建一个函数是没有意义的，所以现在让我们告诉我们的程序什么时候应该调用我们的 getNewColor() 函数。 在这种情况下，让我们在页面加载时和单击“获取新颜色！”按钮时运行 getNewColor()。 以下是我们的做法：
6.添加样式
你可以随意做这部分，也可以不做，但这是我在这个项目中使用的样式，左边是 style.css，右边是 responsive.css：
感谢您阅读到这里！ 我希望你觉得它有帮助。 请记住，有时阅读文章和遵循教程是可以的，但您应该这样做只是为了学习概念。 一旦您认为您已经掌握了这些概念，请尝试自己制作程序。 不，您可能不会在第一次就做好所有事情，但是遇到问题并找出如何自己解决问题，使用您学到的概念，是成为更好的编码员的方法。
如果您觉得这篇文章有帮助，我将不胜感激，感谢您的好评或鼓掌，这样我就可以知道人们认为哪些内容有用，这样我以后就可以专注于编写这些内容。