千锋教育-做有情怀、有良心、有品质的职业教育机构

手机站
千锋教育

千锋学习站 | 随时随地免费学

千锋教育

扫一扫进入千锋手机站

领取全套视频
千锋教育

关注千锋学习站小程序
随时随地免费学习课程

【热点话题】 零基础学IT IT学习教程 IT学习笔记 IT技术干货 IT培训机构 IT应聘面试 IT职场就业 Java培训机构哪些好
当前位置:首页  >  关于学院  >  技术干货  > 如何创建一个随机颜色生成器

如何创建一个随机颜色生成器

来源:千锋教育
发布人:syq
时间: 2022-09-23 16:43:14 1663922594

  有关使用JavaScript创建随机颜色生成器的分步指南。

  如果你是JavaScript的新手,你可能已经学到了很多关于数据类型、逻辑、函数等如何工作的知识。这很好;要有朝一日在更复杂的项目中使用JS,你需要从基础开始。但是,根据您的注意力范围,您可能很快就会开始强烈希望将您的JS技能用于实际网站。这样做可能有点复杂(但不像正则表达式,amirite那么复杂),但是你可以从更简单的一个开始,你猜对了,一个随机颜色生成器。在本文中,我将向您介绍我自己构建一个步骤。

如何创建一个随机颜色生成器

  1. 添加样板 HTML

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

  样板 HTML,链接样式表

  如果您使用的是 VS Code,则可以在空的 HTML 文档中键入 ! ,然后按 Enter 添加此部分(不确定其他文本编辑器),如果您还不知道这一点。在样板下方,我添加了指向用于此项目的CSS文档的链接。我建议将CSS保存在一个单独的文件中,这样你的HTML文件就不会变得太大/太复杂。由于我们将编写的 JavaScript 不是很长,因此我将直接将其添加到 标记内的 HTML 文件中,您将在步骤 3 中看到。如果你想有一个单独的JS文件并将其链接到你的HTML文件,你可以这样做:

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

  链接一个单独的 JS 文件,主.js

  2. 构建 HTML“骨架”

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

  构建 HTML“骨架”

  现在我们已经添加了样板 HTML > 链接了 CSS 文档,让我们添加正文 & 构建我们的 HTML。如您所见,该函数将在页面加载时运行。有关此功能的详细信息,请参阅以下步骤。getNewColor()

  在上图中,我添加了一个 ,其中包含几个标头,让用户知道他们在哪里&做什么。然后,我添加另一个 ,其中包含一个标记,该标记最终将填充十六进制代码,并将在页面上显示为文本。接下来,我插入一个按钮,用户单击该按钮以生成新的十六进制代码。这是由函数完成的,我很快就会解释。

  3. 添加脚本!

  现在我们正处在真正的魔法开始发生的地步。你兴奋吗?我看得出来。这是你如何做到这一点:

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

  将 JS 添加到文档

  对于像这样相对简单的程序,我们只需要一个函数即可完成所需的操作,即上述函数。对于此生成器,让我们使用十六进制代码来确定颜色,但也可以使用 RGB 值。getNewColor()

  让我们首先将所有可能的十六进制字符(整数 0–9 和字母 A-F)以字符串的形式放入名为 的变量中。symbols

  然后,让我们使用字符串形式的哈希标记初始化变量。此变量将在下面描述的循环中发生突变。color

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

  4. 将 JS 应用于

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

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

  仍然在函数内部运行,我们可以使用您在上图中看到的第一行代码访问 styling 属性。我们也可以使用 ,顺便说一句,它可以在CSS中翻译。在此步骤中,我们将变量(我们在循环中随机定义)设置为页面的背景色。getNewColor()backgroundbackgroundColorbackground-colorcolor

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

  总而言之,我们的 JS 如下所示:

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

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

  如果我们从不运行函数,那么创建函数是没有意义的,所以现在让我们告诉我们的程序什么时候应该调用我们的函数。在这种情况下,让我们在页面加载时运行,然后单击“获取新颜色!”按钮。我们是这样做的:getNewColor()getNewColor()

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

  加载页面时运行函数

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

  单击按钮时运行函数

  6. 添加样式

  您可以按照自己的意愿或根本不做这部分,但这是我在此项目中使用的样式,左侧为样式.css为响应式.css右侧:

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

声明:本站稿件版权均属千锋教育所有,未经许可不得擅自转载。

10年以上业内强师集结,手把手带你蜕变精英

请您保持通讯畅通,专属学习老师24小时内将与您1V1沟通

免费领取

今日已有369人领取成功

刘同学 138****2860 刚刚成功领取
王同学 131****2015 刚刚成功领取
张同学 133****4652 刚刚成功领取
李同学 135****8607 刚刚成功领取
杨同学 132****5667 刚刚成功领取
岳同学 134****6652 刚刚成功领取
梁同学 157****2950 刚刚成功领取
刘同学 189****1015 刚刚成功领取
张同学 155****4678 刚刚成功领取
邹同学 139****2907 刚刚成功领取
董同学 138****2867 刚刚成功领取
周同学 136****3602 刚刚成功领取

推荐阅读

最新文章

开班信息
北京校区
  • 北京校区
  • 大连校区
  • 广州校区
  • 成都校区
  • 杭州校区
  • 长沙校区
  • 合肥校区
  • 南京校区
  • 上海校区
  • 深圳校区
  • 武汉校区
  • 郑州校区
  • 西安校区
  • 青岛校区
  • 重庆校区
  • 太原校区
  • 沈阳校区