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

今天我们只用 一句JS代码,实现随机颜色的生成,首先看一下效果:

每次刷新浏览器背景颜色都不一样

实现此效果的JS函数 :

  1. let randomColor = () => ...: 定义一个箭头函数randomColor,用于生成一个随机颜色。
    • Math.random(): 生成一个0到1之间的随机数。
    • Math.random() * 0xffffff: 将这个随机数乘以0xffffff(即16777215,这是16进制表示的最大值),得到一个0到16777215之间的随机整数。
    • Math.floor(...): 对上述结果进行向下取整,确保得到的是一个整数。
    • .toString(16): 将这个整数转换为16进制字符串。
    • #${...}: 将16进制字符串包裹在#符号中,形成CSS颜色代码的格式。
  2. 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>
相关推荐
用户4099322502124 分钟前
FastAPI的查询白名单和安全沙箱机制如何确保你的API坚不可摧?
前端·后端·github
前端小巷子12 分钟前
深入 npm 模块安装机制
前端·javascript·面试
深职第一突破口喜羊羊1 小时前
记一次electron开发插件市场遇到的问题
javascript·electron
cypking1 小时前
electron中IPC 渲染进程与主进程通信方法解析
前端·javascript·electron
西陵1 小时前
Nx带来极致的前端开发体验——借助playground开发提效
前端·javascript·架构
江城开朗的豌豆2 小时前
Element UI动态组件样式修改小妙招,轻松拿捏!
前端·javascript·vue.js
float_六七2 小时前
JavaScript:现代Web开发的核心动力
开发语言·前端·javascript
zhaoyang03012 小时前
vue3笔记(2)自用
前端·javascript·笔记
UrbanJazzerati3 小时前
JavaScript Promise完整指南
javascript
德育处主任Pro3 小时前
# JsSIP 从入门到实战:构建你的第一个 Web 电话
前端