首页 >web前端 >js教程 >让我们创建一个随机颜色生成器！

让我们创建一个随机颜色生成器！

Barbara Streisand原创: 2025-01-14 09:54:42442浏览

Let’s Create a Random-Color Generator!

如果您是 JavaScript 新手，您可能已经了解了很多关于数据类型、逻辑、函数等如何工作的知识。这很好；有一天，要在更复杂的项目中使用 JS，您需要从基础知识开始。然而，根据您的注意力持续时间，您可能很快就会开始强烈渴望将您的 JS 技能运用到实际的网站上。这样做可能有点复杂（但不像正则表达式、amirite 那么复杂），但你可以从一个更简单的开始，你猜对了，随机颜色生成器。在这篇文章中，我将带您完成我自己构建一个的步骤。

1. 添加样板 HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA=Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Random-Color Generator</title>

  <!--Link stylesheets-->
  <link rel="stylesheet" href="./styling.css">
  <link rel="stylesheet" href="./responsive.css">
</head>

如果您使用的是 VS Code，则可以输入“!”到空的 HTML 文档中，然后按“Enter”添加此部分（不确定其他文本编辑器是否如此）（如果您还不知道的话）。在样板文件下方，我添加了用于该项目的 CSS 文档的链接。我建议将 CSS 保存在单独的文件中，这样您的 HTML 文件就不会变得太大和复杂。由于我们要编写的 JavaScript 不是很长，因此我将其直接添加到 <script> 内的 HTML 文件中。标签，您将在步骤 3 中看到该标签。如果您想要一个单独的 JS 文件并将其链接到您的 HTML 文件，您可以这样做：<br> </script>

<script type="text/javascript" src="main.js"></script>

2. 构建 HTML“骨架”

<body onload="getNewColor()">
  <div>



<p>Now that we’ve added the boilerplate HTML & linked our CSS documents in the <head>, let’s add the body & build out our HTML. As you can see, the getNewColor() function will run whenever the page loads. More on this function in the following steps.</p>

<p>In the picture above, I add a <div>, which contains a couple of headers, letting the user know where they are & what to do. I then add another <div>, which contains a <span> tag, which will eventually be populated with a HEX code and will display as text on the page. Next, I insert a button that the user clicks to generate a new HEX code. This is done by the getNewColor() function, which I will explain soon.</p>

<h2>
  
  
  3. Add JavaScript!
</h2>

<p>Now we are at the point where the real magic starts to happen. Are you excited? I can tell. Here’s how you do that:<br>
</p>

<pre class="brush:php;toolbar:false"><script>
  function getNewColor() {
    let symbols = "0123456789ABCDEF";
    let color = "#";

对于像这样相对简单的程序，我们只需使用一个函数即可完成我们需要的工作，即前面提到的 getNewColor() 函数。对于这个生成器，我们使用十六进制代码来确定颜色，但使用 RGB 值也是可以的。

我们首先将所有可能的十六进制字符（整数 0-9 和字母 A-F）以字符串的形式放入一个名为“symbols”的变量中。

然后，让我们用字符串形式的哈希标记来初始化颜色变量。该变量将在下面描述的循环中发生变化。

现在让我们创建一个运行 6 次的循环，因为十六进制代码中有 6 个值。对于每次循环迭代，符号字符串中的单个随机值都会添加到变量 color 中，如果您还记得的话，该值以字符串形式以 # 开头。此时，每当我们调用 getNewColor() 时，我们都会得到一个新的十六进制代码。现在，让我们将该代码应用到 HTML 页面。

根据我的经验，最好将 <script> 放在<body> 末尾的标签标签。有些人会强烈反对，他们可能有道理，但我不打算在本文中讨论这一点。如果您愿意，请在下面的评论部分进行键盘大战，因为这有利于参与。</script>

4.将JS应用到HTML文件

酷，我们现在有一个函数可以为我们提供随机的十六进制代码。然而，除非我们将其应用到 HTML 中，否则这是没有用的。在这种情况下，最好更改整个页面的背景，以便用户可以预览随机颜色，并将十六进制代码放入文本格式，以便他们可以复制它。我们首先需要在函数中定义这些行为：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA=Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Random-Color Generator</title>

  <!--Link stylesheets-->
  <link rel="stylesheet" href="./styling.css">
  <link rel="stylesheet" href="./responsive.css">
</head>

仍然在 getNewColor() 函数内操作，我们可以使用上图中看到的第一行代码来访问背景样式属性。我们还可以使用backgroundColor，顺便说一下，它在CSS 中转换为背景颜色。在此步骤中，我们将在循环中随机定义的变量颜色设置为页面的背景颜色。

在第二行代码中，我们访问之前定义的按其 ID“十六进制”标记。要以文本形式添加可变颜色，我们可以使用我在这里使用的方法 .textContent 或 .innerHTML 方法，将颜色附加到中。标签。请参阅本文末尾的链接，了解有关它们之间差异的更多信息。按照我们上面布置 HTML 的方式，此文本将直接显示在按钮上方，以便用户可以看到显示的确切颜色并根据需要复制它。

总而言之，我们的 JS 看起来像这样：

<script type="text/javascript" src="main.js"></script>

5.告诉程序何时运行该函数

如果我们从不运行一个函数，那么它就没有意义，所以现在让我们告诉我们的程序何时应该调用 getNewColor() 函数。在本例中，每当页面加载以及单击“获取新颜色！”按钮时，我们就运行 getNewColor()。我们是这样做的：

<body onload="getNewColor()">
  <div>



<p>Now that we’ve added the boilerplate HTML & linked our CSS documents in the <head>, let’s add the body & build out our HTML. As you can see, the getNewColor() function will run whenever the page loads. More on this function in the following steps.</p>

<p>In the picture above, I add a <div>, which contains a couple of headers, letting the user know where they are & what to do. I then add another <div>, which contains a <span> tag, which will eventually be populated with a HEX code and will display as text on the page. Next, I insert a button that the user clicks to generate a new HEX code. This is done by the getNewColor() function, which I will explain soon.</p>

<h2>
  
  
  3. Add JavaScript!
</h2>

<p>Now we are at the point where the real magic starts to happen. Are you excited? I can tell. Here’s how you do that:<br>
</p>

<pre class="brush:php;toolbar:false"><script>
  function getNewColor() {
    let symbols = "0123456789ABCDEF";
    let color = "#";

6.添加样式

您可以按照自己的意愿执行此部分，也可以根本不执行此部分，但这是我在此项目中使用的样式：

// continuing getRandomColor()...
    document.body.style.background = color;
    document.getElementByID("hex").textContent = color;
  </script>
</body>
</html>

7. 让我们来测试一下！

如果您正确地执行了上述步骤，则当页面加载以及单击按钮时，将会生成随机颜色。页面背景将设置为随机颜色，用户可以复制十六进制代码。

感谢您阅读本文！我希望你觉得它有帮助。请记住，有时阅读文章和遵循教程是可以的，但您应该这样做只是为了学习概念。一旦您认为自己已经掌握了这些概念，就可以尝试自己编写程序。不，你可能不会第一次就把所有事情都做对，但是遇到问题并使用你学到的概念自己弄清楚如何解决它，是成为更好的编码员的方法。

如果您觉得这篇文章有帮助，我会很感激一个好的评论或一些鼓掌，这样我就可以知道人们觉得哪些内容有用，这样我就可以在将来专注于编写这些内容。

一如既往，祝您编码愉快！

查看此项目的实际应用

指向此项目的 GitHub 存储库的链接

有关 .innerHTML 和 .textContent 之间差异的文章的链接

最初于 2022 年 8 月 15 日以简单英语在 Medium for JavaScript 上发布

以上是让我们创建一个随机颜色生成器！的详细内容。更多信息请关注PHP中文网其他相关文章！

JavaScript css html String define if for format try using Property append copy JS function this innerHTML background github everything Access Other

声明：

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：Daily JavaScript Challenge #JS- Count the Frequency of Every Unique Element in an Array下一篇：Building Static HTML Pages with JSX Server-Side Rendering

查看更多