让我们创建一个随机颜色生成器！
如果您是 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中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
Python vs. JavaScript：学习曲线和易用性
Apr 16, 2025 am 12:12 AM
Python更适合初学者，学习曲线平缓，语法简洁；JavaScript适合前端开发，学习曲线较陡，语法灵活。1.Python语法直观，适用于数据科学和后端开发。2.JavaScript灵活，广泛用于前端和服务器端编程。
JavaScript和Web：核心功能和用例
Apr 18, 2025 am 12:19 AM
JavaScript在Web开发中的主要用途包括客户端交互、表单验证和异步通信。1)通过DOM操作实现动态内容更新和用户交互；2)在用户提交数据前进行客户端验证，提高用户体验；3)通过AJAX技术实现与服务器的无刷新通信。
JavaScript在行动中：现实世界中的示例和项目
Apr 19, 2025 am 12:13 AM
JavaScript在现实世界中的应用包括前端和后端开发。1)通过构建TODO列表应用展示前端应用，涉及DOM操作和事件处理。2)通过Node.js和Express构建RESTfulAPI展示后端应用。
了解JavaScript引擎：实施详细信息
Apr 17, 2025 am 12:05 AM
理解JavaScript引擎内部工作原理对开发者重要，因为它能帮助编写更高效的代码并理解性能瓶颈和优化策略。1)引擎的工作流程包括解析、编译和执行三个阶段；2)执行过程中，引擎会进行动态优化，如内联缓存和隐藏类；3)最佳实践包括避免全局变量、优化循环、使用const和let，以及避免过度使用闭包。
Python vs. JavaScript：社区，图书馆和资源
Apr 15, 2025 am 12:16 AM
Python和JavaScript在社区、库和资源方面的对比各有优劣。1)Python社区友好，适合初学者，但前端开发资源不如JavaScript丰富。2)Python在数据科学和机器学习库方面强大，JavaScript则在前端开发库和框架上更胜一筹。3)两者的学习资源都丰富，但Python适合从官方文档开始，JavaScript则以MDNWebDocs为佳。选择应基于项目需求和个人兴趣。
Python vs. JavaScript：开发环境和工具
Apr 26, 2025 am 12:09 AM
Python和JavaScript在开发环境上的选择都很重要。1)Python的开发环境包括PyCharm、JupyterNotebook和Anaconda，适合数据科学和快速原型开发。2)JavaScript的开发环境包括Node.js、VSCode和Webpack，适用于前端和后端开发。根据项目需求选择合适的工具可以提高开发效率和项目成功率。
C/C在JavaScript口译员和编译器中的作用
Apr 20, 2025 am 12:01 AM
C和C 在JavaScript引擎中扮演了至关重要的角色，主要用于实现解释器和JIT编译器。 1）C 用于解析JavaScript源码并生成抽象语法树。 2）C 负责生成和执行字节码。 3）C 实现JIT编译器，在运行时优化和编译热点代码，显着提高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在后端开发中发挥作用，支持全栈开发。
