让我们创建一个随机颜色生成器！-js教程-PHP中文网

首页

web前端

js教程

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

Barbara Streisand

Jan 14, 2025 am 09:54 AM

Let’s Create a Random-Color Generator!

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

1. 添加样板 HTML



  <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">

如果您使用的是 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“骨架”

  <div>



<p>Now that we’ve added the boilerplate HTML & linked our CSS documents in the </p>, 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>In the picture above, I add a </p>
<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.

<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 = "#";

</script>

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

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

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

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

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

4.将JS应用到HTML文件

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



  <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">

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

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

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

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

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

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

  <div>



<p>Now that we’ve added the boilerplate HTML & linked our CSS documents in the </p>, 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>In the picture above, I add a </p>
<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.

<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 = "#";

</script>

6.添加样式

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

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

7. 让我们来测试一下！

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

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

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

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

查看此项目的实际应用

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

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

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

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

声明

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

JavaScript是用C编写的吗？检查证据Apr 25, 2025 am 12:15 AM

是的，JavaScript的引擎核心是用C语言编写的。1）C语言提供了高效性能和底层控制，适合JavaScript引擎的开发。2）以V8引擎为例，其核心用C 编写，结合了C的效率和面向对象特性。3）JavaScript引擎的工作原理包括解析、编译和执行，C语言在这些过程中发挥关键作用。

JavaScript的角色：使网络交互和动态Apr 24, 2025 am 12:12 AM

JavaScript是现代网站的核心，因为它增强了网页的交互性和动态性。1)它允许在不刷新页面的情况下改变内容，2)通过DOMAPI操作网页，3)支持复杂的交互效果如动画和拖放，4)优化性能和最佳实践提高用户体验。

C和JavaScript：连接解释Apr 23, 2025 am 12:07 AM

C 和JavaScript通过WebAssembly实现互操作性。1）C 代码编译成WebAssembly模块，引入到JavaScript环境中，增强计算能力。2）在游戏开发中，C 处理物理引擎和图形渲染，JavaScript负责游戏逻辑和用户界面。

从网站到应用程序：JavaScript的不同应用Apr 22, 2025 am 12:02 AM

JavaScript在网站、移动应用、桌面应用和服务器端编程中均有广泛应用。1)在网站开发中，JavaScript与HTML、CSS一起操作DOM，实现动态效果，并支持如jQuery、React等框架。2)通过ReactNative和Ionic，JavaScript用于开发跨平台移动应用。3)Electron框架使JavaScript能构建桌面应用。4)Node.js让JavaScript在服务器端运行，支持高并发请求。

Python vs. JavaScript：比较用例和应用程序Apr 21, 2025 am 12:01 AM

Python更适合数据科学和自动化，JavaScript更适合前端和全栈开发。1.Python在数据科学和机器学习中表现出色，使用NumPy、Pandas等库进行数据处理和建模。2.Python在自动化和脚本编写方面简洁高效。3.JavaScript在前端开发中不可或缺，用于构建动态网页和单页面应用。4.JavaScript通过Node.js在后端开发中发挥作用，支持全栈开发。