如何用 JavaScript 生成颜色

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

我们将创建一个名为“改变背景颜色”的项目来说明这些概念。你可以在这里看到这个 demo。

在本教程中，我们将：

• 学习计算机如何理解颜色的概念
• 了解十六进制系统及其对计算机的作用
• 学习如何在你的代码中分离关注点
• 探索 JavaScript 中使用的循环、数组和函数的世界
• 使用这些新知识来生成十六进制的颜色
• 介绍 JavaScript 中的事件
• 在 HTML 代码中点击一个按钮来调用函数
• 当按钮被点击时，改变 body 样式的背景颜色

只要你熟悉变量并且知道如何在一种编程语言中创建变量，你应该就能理解这篇文章。

我们将讨论的内容

1. 计算机如何理解颜色
2. 什么是十六进制系统
3. 如何在色彩空间中使用十六进制
4. 如何用十六进制生成颜色

计算机如何理解颜色

计算机显示器使用被称为“像素”的小点，通过混合红、绿、蓝光，来显示颜色。

为了解释和处理颜色，计算机使用被称为“色彩空间”的数学模型。通过将颜色转换为特定的色彩空间，计算机可以在屏幕上显示之前修改和调整它们。

有许多不同类型的色彩空间，每一种都有其代表色彩的方式。下面是一些例子：

1. RGB（Red 红、Green 绿、Blue 蓝），这是计算机图形中最常用的色彩空间，它通过混合不同数量的红色、绿色和蓝色成分来表示颜色。
2. CMYK（Cyan 青色、Magenta 品红、Yellow 黄色、Black 黑色），这是一个用于印刷的色彩空间，通过将不同颜色的点叠加在一起来创造色彩。
3. HSL（Hue 色相、Saturation 饱和度、Lightness 亮度），这种色彩空间根据颜色的色调（它们是哪种颜色）、饱和度（颜色的强度）和亮度（颜色的明暗程度）来表示颜色。
4. LAB（Lightness 亮度、A、B），这种色彩空间用于数字成像，根据颜色的亮度以及它们在两个色轴上的位置来表示颜色：A（从绿色到红色）和 B（从蓝色到黄色）。
5. XYZ，这种色彩空间根据颜色的反射或发射的光量来表示颜色，通常用于色彩匹配应用。

什么是十六进制系统

十六进制是一种基数为 16 的编号系统，通常用于计算机和数字电子学。

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

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

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

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

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

RGB 中的每个分量都可以有一个 0 到 255 的数值，这些数值可以使用十六进制的编号系统被转换为十六进制的符号。

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

如何用十六进制生成颜色

我们在本节的目标是建立演示项目。该演示项目是一个按钮。在点击这个按钮时，会产生一种颜色，改变 HTML 网页的背景。

我们通过 6 个步骤来构建这个项目。我们将逐一进行讲解。

1. 用一个数组表示十六进制

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

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

2. 创建一个函数，从这个数组中提取项目

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() 是引入随机性的方法之一。Math.random() 每次被调用都会给出一个新的结果，范围是 0 到 1。

虽然 Math.random() 函数生成了一个介于 0（包括 0）和 1（不包括 1）之间的随机十进制数，但我们可以通过操作这个值来获得一个介于 0 和 15 之间的随机整数。

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

例如，如果 Math.random() 产生的数值是 0.435，那么用它乘以 16，结果就是 6.96。对这个结果应用 Math.floor() 可以将其四舍五入为 6，这是一个 0 到 15 范围内的随机整数。

Math.floor() 在这里发挥了两个作用：它通过四舍五入帮助我们避免了 RangeError（最大的数字是 15），并确保我们总是返回一个整数。

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 元素添加了一个事件监听器。这个监听器监听按钮上的 click 事件。当被触发时，它执行一个函数，使用 generateNewColor() 函数生成一个新的随机颜色代码。

然后使用 document.body 元素的 style.backgroundColor 属性将得到的颜色代码赋值给网页的背景颜色。这将使整个网页被更新为新的颜色。

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

总结

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

在演示项目中，生成的颜色被作为背景传给了一个 HTML 页面。这就是为什么在点击按钮时，会生成一种新的颜色，并更新页面的背景颜色样式。