原生JS七（随机色）

最新推荐文章于 2022-10-27 00:55:22 发布

CSDN_GMC

最新推荐文章于 2022-10-27 00:55:22 发布

阅读量199

点赞数

分类专栏：原生js 文章标签： javascript html html5 前端

本文链接：https://blog.csdn.net/CSDN_GMC/article/details/105350426

版权

原生js 专栏收录该内容

21 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>随机色</title>
			<style>
				
				.box{
					width: 100px;
					height: 100px;
					/*颜色的赋值: 
					  1.  通过英文名称
					  2.  通过rgb三原色调配比例，来赋值
					  3.  通过16进制位数，来匹配对应的颜色
					 * */
					/*background-color: rgb(140,230,120);*/
					
					/*
					 * opacity 透明度
					 * 取值范围  0~1    
					 * 1 为不透明，  0为完全透明
					 * */
					/*background: red;*/
					/*opacity: 0.5;*/
					
					/*rgba():  4个参数   r g b a 
					 a	:  透明度
					 
					 必须要四个参数，一个都不能少
					 * */
					/*background-color: rgba(200,100,10,0.6);*/
				}
				
			</style>
	</head>
	<body>
		
		<div class="box"></div>
		<div style="width: 100px; height: 100px; background: red;"></div>
		
		
		
		<script type="text/javascript">
			
			var box = document.getElementsByClassName("box")[0];
			
			function c(){
				return  Math.floor(Math.random()*255);
			}
			
			//通过使用 rgb三原色 来完成随机颜色的赋值
			box.style.backgroundColor = 'rgb(' + c() + ',' + c() + ','+ c()+ ')';
			
			
			
			
		</script>
	</body>
</html>