今天我们只用 一句JS代码，实现随机颜色的生成，首先看一下效果：
每次刷新浏览器背景颜色都不一样
实现此效果的JS函数 ：
let randomColor = () => ...: 定义一个箭头函数randomColor，用于生成一个随机颜色。Math.random(): 生成一个0到1之间的随机数。Math.random() * 0xffffff: 将这个随机数乘以0xffffff（即16777215，这是16进制表示的最大值），得到一个0到16777215之间的随机整数。Math.floor(...): 对上述结果进行向下取整，确保得到的是一个整数。.toString(16): 将这个整数转换为16进制字符串。#${...}: 将16进制字符串包裹在#符号中，形成CSS颜色代码的格式。
document.body.style.backgroundColor = randomColor(): 调用randomColor函数生成一个随机颜色，并将其设置为<body>元素的背景颜色。
实现原理
- 使用JavaScript的
Math.random()函数生成一个0到1之间的随机数。 - 将这个随机数乘以
0xffffff，得到一个0到16777215之间的随机整数。 - 使用
Math.floor()函数将结果向下取整，确保得到的是一个整数。 - 使用
.toString(16)方法将整数转换为16进制字符串。 - 将16进制字符串包裹在
#符号中，形成CSS颜色代码的格式。 - 将生成的随机颜色代码设置为
<body>元素的背景颜色。
完整代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
</head>
<body>
<script>
// 定义一个函数，生成一个随机的颜色
let randomColor = () =>
`#${Math.floor(Math.random()*0xffffff).toString(16)}`
// 将body的背景颜色设置为随机生成的颜色
document.body.style.backgroundColor = randomColor()
</script>
</body>
</html>