当前位置：首页 > news >正文

练习小项目2：今日幸运颜色生成器

news 来源：原创 2025/5/16 7:05:27

项目目标：

点击按钮后，随机生成一个颜色
页面背景变成这个颜色
显示这个颜色的 HEX 值（比如 #e3d4aa）

功能要求提示：

监听按钮点击
使用 JS 随机生成 16 进制颜色代码（例如：#ff9a32）
修改 body 背景色
在页面上显示颜色值（更新 <p id="colorCode"> 文本）

你可以假设HTML 结构如下（也可自定义）：

<button id="colorBtn">生成今日幸运颜色</button>
<div id="colorDisplay">🎨</div>
<p id="colorCode">颜色代码：</p>

实践代码如下：

const colorBtn = document.getElementById('colorBtn')
const colorDisplay = document.getElementById('colorDisplay')
const colorCode = document.getElementById('colorCode')colorBtn.addEventListener('click', () => {const randomColor = '#' + Math.floor(Math.random() * 16777215).toString(16).padStart(6, '0')// document.body.style.backgroundColor = randomColorcolorDisplay.style.backgroundColor = randomColorcolorCode.textContent = `颜色代码：${randomColor}`;
})

你已经完成挑战了！总结你今天掌握的知识：

技能点	是否掌握
获取 DOM 元素	✅ 熟练使用 `getElementById`
事件监听器	✅ `addEventListener('click', …)` 没问题
颜色随机生成	✅ 用 `Math.random()` + `toString(16)` 非常标准
修改样式	✅ 能直接操作 `document.body.style.backgroundColor`
DOM 动态内容更新	✅ 用 `createElement + appendChild` 输出 HEX 值

**关于随机生成颜色为什么要*16777215？**

这是因为我们生成的是一个 随机的 6 位十六进制颜色代码，也就是常见的 #RRGGBB 形式。

每一部分（红、绿、蓝）用两个十六进制字符表示：

00 到 FF（十进制是 0 到 255）

每部分颜色由两位16进制数表示

第一位有 16 种可能（0~F）
第二位也有 16 种可能

所以就会有 16 * 16 = 256种组合，也就是 0x00 到 0xFF，对应十进制是 0 到 255。

那三个颜色加起来就是：

256（红） × 256（绿） × 256（蓝） = 16,777,216 种颜色

即

但 JavaScript 中：

我们用 Math.random() 生成 0 到 1 之间的小数
所以我们要把它乘上总颜色数范围：16,777,216（不含），即十进制范围：0 ~ 16777215

这就是：Math.random() * 16777216，但为了避免出现 ffffff 这个最大值后多出一位数，很多人就写成：Math.random() * 16777215，其实差别非常小，你写哪个都可以。

代码示意说明：

// 生成 0 ~ 16777215（不含）之间的整数
Math.floor(Math.random() * 16777215)// 再转换为 16 进制字符串
.toString(16)

最终加上 #，就是合法的 CSS 颜色代码。

为什么最后要加上 `padStart(6, '0')？`

有时候你生成的颜色会只有 5 位，比如 #3e7b1，这是因为：

比如 Math.random() * 16777215 可能只生成了 256321，转成 16 进制可能只有 5 位。

👉 想要始终补齐为 6 位，可以加上 padStart(6, '0')

padStart() 方法用另一个字符串填充当前字符串（如果需要会重复填充），直到达到给定的长度。填充是从当前字符串的开头开始的。

padStart(targetLength, padString)：

targetLength：当前 str 填充后的长度。如果该值小于或等于 str.length，则会直接返回当前 str。
padString（可选）：用于填充当前 str 的字符串。如果 padString 太长，无法适应 targetLength，则会从末尾被截断。默认值为 Unicode“空格”字符（U+0020）。