一句JS代码，实现随机颜色的生成

最新推荐文章于 2024-08-17 17:03:17 发布

Blusher1

最新推荐文章于 2024-08-17 17:03:17 发布

阅读量1.1k

点赞数 38

分类专栏：前端练习文章标签： javascript 前端

本文链接：https://blog.csdn.net/Blusher1/article/details/140819877

版权

前端练习专栏收录该内容

4 篇文章 1 订阅

订阅专栏

今天我们只用一句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>