做淘宝客网站域名是别人的中国万网官方网站
项目目标：
-
点击按钮后，随机生成一个颜色
-
页面背景变成这个颜色
-
显示这个颜色的 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）。