点击div随机变色

清砾

于 2020-08-05 19:09:34 发布

阅读量930

点赞数 2

CC 4.0 BY-SA版权

分类专栏：技术小妙招文章标签： javascript

本文链接：https://blog.youkuaiyun.com/m0_46690660/article/details/107822731

技术小妙招专栏收录该内容

20 篇文章

订阅专栏

本文介绍两种方法实现网页元素背景色随机变化。方法一使用数组存储预设颜色，方法二通过生成随机RGB值。推荐使用方法二，避免颜色重复，提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

方法一（数组）颜色重复率高，不建议使用

// 获取div对象
		var div1=document.getElementById("div");
		// 绑定点击事件
		div1.onclick=function () {
			// 定义存放颜色的数组
			var arr_color=["red","yellow","blue","green","cyvn","hotpink","#H2B99FF","orange","black"];
			// 随机取出数组中的颜色
			var index=Math.round(Math.random()*9);
			// 改变div颜色
			this.style.backgroundColor=arr_color[index];
		};

方法二（rgb直接赋值）建议使用

// 获取div对象
		var div1=document.getElementById("div");
		// 绑定点击事件
		div1.onclick = function () {
			// 0-255之间随机数取整
			var r = Math.round(Math.random()*255);
			var g = Math.round(Math.random()*255);
			var b = Math.round(Math.random()*255);
			// 改变div背景颜色
			this.style.backgroundColor="rgb("+r+","+g+","+b+")";
		};

其他相关代码

<body>
		<div id="div"></div>
	</body>

<style type="text/css">
			div{
				width: 500px;
				height: 500px;
				border: 1px solid red;
				margin: 20px auto;
			}
		</style>