JS的一些有趣用法 随机颜色

1、有时我们可能需要对网站背景，或者按钮、盒子边框等等添加颜色，日复一日的background-color: red;、border: solid black 1px;，久而久之新鲜感是否就没有了呢，有时就想玩一些花活儿，怎么办呢？我们何不生成随机颜色呢

直接上代码

const generateRandomColor = () => `#${Math.floor(Math.random() * 0xffffff).toString(16)}`
console.log(generateRandomColor())

这不就是我们熟悉的十六进制颜色吗

2、现在颜色生成了，怎么应用到实际中呢，直接上代码吧

const generateRandomColor = () => `#${Math.floor(Math.random() * 0xffffff).toString(16)}`;
const body = document.querySelector('body');
body.style.backgroundColor = generateRandomColor();

先看看我们谷歌原来的样子

运行代码，浏览器变色

3、这样好像也还是不够有趣，我们来加一个定时器吧

const generateRandomColor = () => `#${Math.floor(Math.random() * 0xffffff).toString(16)}`;
const body = document.querySelector('body');
setInterval(()=>{
    body.style.backgroundColor = generateRandomColor();
},1000)

这时我们的网页背景颜色就会每隔1秒变换一个随机颜色了

4、解析一下

0xffffff是什么？

0xffffff或者#ffffff 表示白色，和RGB(255,255,255)一样，0x表示16进制。

为什么要这样算？

在RGB颜色空间中，每个颜色分量的取值范围是 0 到 255，可以用一个 8 位二进制数来表示。而一个 8 位二进制数的最大值是 2^8-1=255，因此每个分量的取值范围是 0 到 255。一个完整的RGB颜色代码由三个分量组成，分别表示红、绿、蓝三个颜色分量的取值。因此，一个RGB颜色代码的取值范围是0x000000到0xffffff，其中0x000000表示黑色，0xffffff表示白色。在这段代码中，0xffffff被用来作为一个上限值，确保生成的随机数不而保证生成的颜色代码是有效的。