JS随机生成颜色

此代码片段可以让你用js随机生成颜色。

var randomColor = Math.floor(Math.random()*16777215).toString(16);

完整示例源码:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<link rel="stylesheet" href="">
	<style>
		body {
			height: 100vh;
			margin: 0;
			padding: 1rem;
			display: grid;
			place-items: center;
			font-family: system-ui;
		}
		h1 {
			background: white;
			padding: 1rem 2rem;
			text-align: center;
		}
		span {
			display: block;
			padding: 1rem;
			font-size: 1rem;
			font-weight: normal;
			font-family: monospace;
		}
	</style>
</head>
<body>
	<h1>
		<button id="genNew">生成颜色</button>
		<span id="color"></span>
	</h1>
	<script>
		var setBg = () => {
			var randomColor = Math.floor(Math.random()*16777215).toString(16);
			document.body.style.backgroundColor = "#" + randomColor;
			color.innerHTML = "#" + randomColor;
		}
		genNew.addEventListener("click", setBg);
		setBg();
	</script>
</body>

运行效果如下:


代码原理

实际上利用了js随机数,然后将随机出来的数字转换为字符串的原理。

人已赞赏
实用片段

html让按钮中的文字换行

2020-4-25 14:29:40

实用片段

css悬停特效

2020-4-25 17:37:39

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索