迹忆客 专注技术分享

在本文中，我们将使用 JavaScript 构建一个随机颜色生成器。 在此过程中，我们将探索编程中的一般主题，如函数和随机化。

在本篇文章中，我们将：

• 了解计算机如何理解颜色的概念
• 了解十六进制系统及其对计算机的用处
• 了解如何分离代码中的关注点
• 探索 JavaScript 中使用的循环、数组和函数的世界
• 使用这个新知识以十六进制生成颜色
• 在 JavaScript 中引入事件
• 单击我们的 HTML 代码中的按钮来调用我们的函数
• 单击按钮时更改正文样式背景颜色
• 任何熟悉变量以及如何使用任何编程语言创建变量的人都应该可以阅读本文。

计算机如何理解颜色

计算机显示器使用称为像素的微小点通过混合红、绿和蓝来显示颜色。

为了解释和操纵颜色，计算机使用称为颜色空间的数学模型。 通过将颜色转换为特定的颜色空间，计算机可以在将它们显示在屏幕上之前对其进行修改和调整。

有许多不同类型的颜色空间，每种颜色空间都有自己的表示颜色的方式。 这里有些例子：

• RGB（红、绿、蓝）：这是计算机图形学中最常用的颜色空间，它通过混合不同数量的红、绿、蓝成分来表示颜色。
• CMYK（青色、品红色、黄色、黑色）：这是用于印刷的色彩空间，其中通过将不同颜色的点叠加在一起来创建颜色。
• HSL（色调、饱和度、亮度）：此色彩空间根据色调（它们是什么颜色）、饱和度（颜色的强度）和亮度（颜色的亮或暗）来表示颜色。
• LAB（亮度，A，B）：此色彩空间用于数字成像，并根据亮度以及它们在两个颜色轴上的位置来表示颜色：A（从绿色到红色）和 B（从蓝色到黄色） 。
• XYZ：此颜色空间根据颜色反射或发射的光量来表示颜色，通常用于颜色匹配应用程序。

什么是十六进制？

十六进制（或简称为“十六进制”）是一种以 16 为基数的编号系统，常用于计算和数字电子产品中。

在这个系统中，数字使用 16 位数字表示：常规的十进制数字 0 到 9，加上代表值 10 到 15 的字母 A 到 F。

[0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F]

十六进制经常用于计算，因为它提供了一种紧凑且易于阅读的方式来表示二进制数。 每个十六进制数字对应四个二进制数字或位，这意味着两个十六进制数字可以表示一个数据字节（8 位）。

如何在颜色空间中使用十六进制

十六进制通常用于表示各种颜色空间中的颜色，特别是在数字媒体中。

RGB 中的每个分量都可以具有 0 到 255 之间的值，并且可以使用 base-16 编号系统将这些值转换为十六进制表示法。

在 RGB 十六进制表示法中，每个分量由一个两位十六进制数表示，范围从 00 到 FF。

例如，

COLOR | RGB | 16进制表示 黑色 | 0,0,0 | #000000 蓝绿色 | 0,186,186 | #00BABA 绿色 | 17,235,17 | #11EB11 芥末黄 | 250,194,134 |#FAC286 白色 | 255,255,255 | #FFFFFF

如何用十六进制生成颜色

我们在本节中的目标是构建演示项目。 演示项目是一个按钮。 单击此按钮时，会生成一种颜色来更改 HTML 网页的背景。

构建项目有 6 个步骤。 我们将一一介绍。

1.用数组表示十六进制

const hexCharacters = [0,1,2,3,4,5,6,7,8,9,"A","B","C","D","E","F"]

第一步是将我们的角色保存在一个结构中。 为了简单起见，我选择了一个数组。 数组在 JavaScript 中的工作方式允许我们通过提供索引来选择任何项目。

2.创建一个函数来从这个arra中提取项目

const hexCharacters = [0,1,2,3,4,5,6,7,8,9,"A","B","C","D","E","F"]

function getCharacter(index) {
    return hexCharacters[index]
}

函数 getCharacter 将获取索引并返回存储在该位置的十六进制字符。 这有助于我们选择颜色。

3.使用提取的值表示颜色

RGB 的十六进制表示以 # 开头，后跟从我们的数组中选择的 6 个字符。 因此，函数 getCharacters 将被调用 6 次。 我们可以使用 for 循环来更快地调用我们的函数。

const hexCharacters = [0,1,2,3,4,5,6,7,8,9,"A","B","C","D","E","F"]


function getCharacter(index) {
    return hexCharacters[index]
}

function generateJustOneColor(){
    
    let hexColorRep = "#"

    for (let position = 0; position < 6; position++){
        hexColorRep += getCharacter( position )
    }
    
    return hexColorRep

}

console.log( generateJustOneColor() )

generateJustOneColor() 生成表示为字符串的随机十六进制颜色代码。

该函数首先声明一个名为 hexColorRep 的变量，并使用 # 字符对其进行初始化。

接下来，该函数使用 for 循环生成颜色代码的下六个字符。 循环运行六次，因为每个颜色代码由六个十六进制数字表示。

在循环中，该函数调用另一个名为 getCharacter() 的函数来为颜色代码的每个位置生成一个十六进制数字。 position 参数被传递给 getCharacter() 函数以指示正在生成哪个数字。

一旦生成了所有六位颜色代码，该函数将以字符串形式返回完整的颜色代码。

上面的代码将在我们的 for 循环给定相同 position 的情况下返回相同的结果/颜色。 所以我们需要引入随机性。 这意味着我们对角色的选择必须具有惊喜的元素。

4.改进我们的代码以生成随机颜色

在 JavaScript 中，Math.random() 是引入随机性的方法之一。 每次在 0 到 1 的范围内调用 ath.random() 都会给出一个新结果。

虽然 Math.random() 函数生成一个介于 0（含）和 1（不含）之间的随机十进制数，但我们可以操纵该值以获得 0 到 15 之间的随机整数。

这是通过将随机小数乘以所需的整数范围（在本例中为 16），然后应用 Math.floor() 方法将结果向下舍入到最接近的整数来完成的。 这将确保输出在所需的整数范围内。

例如，如果 Math.random() 生成值 0.435，则将其乘以 16 将得到 6.96。 然后将 Math.floor() 应用于此结果会将其向下舍入为 6，这是 0 到 15 范围内的随机整数。

Math.floor() 在这里执行两个角色：它通过向下舍入极端值（最大数字为 15）帮助我们避免 RangeError 并确保我们始终返回一个整数。

const randomNumber = Math.floor ( Math.random() * hexCharacters.length ) 

我们拥有生成颜色所需的所有成分，所以现在我们可以将它们组合在一起。 每个十六进制颜色必须以 # 开头，后跟 6 个字符。

const hexCharacters = [0,1,2,3,4,5,6,7,8,9,"A","B","C","D","E","F"]



function getCharacter(index) {
    return hexCharacters[index]
}

function generateNewColor() {
    let hexColorRep = "#"

    for (let index = 0; index < 6; index++){
        const randomPosition = Math.floor ( Math.random() * hexCharacters.length ) 
        hexColorRep += getCharacter( randomPosition )
    }
    
    return hexColorRep
}

console.log( generateNewColor() ) 

generateNewColor() 函数是生成随机十六进制颜色代码的程序的主要函数。 它首先用“#”字符初始化一个名为“hexColorRep”的字符串变量，因为所有十六进制颜色代码都以此字符开头。

接下来，该函数使用 for 循环为颜色代码生成六个随机字符。 在循环中，该函数使用 Math.random() 函数和 hexCharacters 数组的长度在“hexCharacters”数组的范围内生成一个随机位置。 然后使用 getCharacter() 函数使用此随机位置从 hexCharacters 数组中获取随机字符。 生成的字符附加到 hexColorRep 字符串变量。

最后，generateNewColor() 函数返回以字符串表示的完整十六进制颜色代码。

5. 创建一个界面来展示我们的代码

我们需要一个界面，以便用户可以与我们的代码交互并看到我们创造的功能。

我们将有一个带有指令列表和按钮的 HTML 页面。 元素 button 和 span 被赋予了 id 属性，因此在我们的 JavaScript 代码中更容易找到它们。

6.使用事件将按钮连接到函数

我们的目标是更改此 HTML 页面的背景颜色样式。

let btn = document.getElementById('b')
let bgColor = document.getElementById('s')

btn.addEventListener("click", (event) => {
        
    const newColor = generateNewColor()

    document.body.style.backgroundColor  = newColor
    bgColor.textContent = newColor 
        
})

该程序在单击按钮时将网页的背景颜色设置为随机生成的十六进制颜色代码。

该程序首先使用 document.getElementById() 方法定义两个变量。 btn 变量代表网页上 ID 为 b 的按钮元素，而 bgColor 变量代表网页上 ID 为 s 的文本元素。

接下来，程序使用 addEventListener() 方法将事件侦听器附加到 btn 元素。 此侦听器侦听按钮上的单击事件。 触发后，它会执行一个函数，该函数使用 generateNewColor() 函数生成新的随机颜色代码。

然后使用 document.body 元素的 style.backgroundColor 属性将生成的颜色代码分配给网页的背景颜色。 这会导致整个网页更新为新颜色。

最后，颜色代码也使用 textContent 属性显示在网页上的 bgColor 元素中。

总结

在本文中，我们展示了如何在 JavaScript 中生成随机颜色。 我们使用了 Math 类中的 random 和 floor 方法，并展示了 for 循环的基本用法。