qianran 🌐前端 2021-02-25

50行代码实现随机取色表

也是2019年实训的无聊产物，顺手发上来叭

å¨è¿éæå¥å¾çæè¿°

&lt;!DOCTYPE html&gt;
&lt;html&gt;
	&lt;head&gt;
		&lt;meta charset="utf-8"&gt;
		&lt;title&gt;&lt;/title&gt;
		&lt;style type="text/css"&gt;
			*{
				margin: 0px;
			}
			#content div{
				float:left;
				line-height: 200px;
				text-align: center;
				color: #fff;
				border: 1px #fff solid;
			}
			#content div:hover{
				border: 1px #000000 solid;
			}
			
			
			#title{
				font-size: 50px;
				text-align: center;
				height: 188px;
				line-height: 188px;
			}
		&lt;/style&gt;
	&lt;/head&gt;
	&lt;body&gt;
		&lt;div id="title"&gt;
			随机100色表
		&lt;/div&gt;
		&lt;div id="content"&gt;
			
		&lt;/div&gt;
	&lt;/body&gt;
	&lt;script type="text/javascript"&gt;
		var body = document.getElementById('content');
		for(var i=0;i&lt;100;i++){
			let color = bg1();
			body.innerHTML+="&lt;div style='width:19.8%;height: 190px;background-color:"+color+" ;' onclick='c(this)'&gt;"+color+"&lt;/div&gt;";
			}
		
		function c(a){
			alert(a.innerText);
		}
		
		   function bg1(){
             var r=Math.floor(Math.random()*256);
             var g=Math.floor(Math.random()*256);
             var b=Math.floor(Math.random()*256);
             return "rgb("+r+','+g+','+b+")";//所有方法的拼接都可以用ES6新特性`其他字符串{$变量名}`替换
         }
	&lt;/script&gt;
&lt;/html&gt;

<!DOCTYPE html>

<html>

<head>

margin: 0px;

}

#content div{

float:left;

line-height: 200px;

text-align: center;

color: #fff;

border: 1px #fff solid;

}

#content div:hover{

border: 1px #000000 solid;

}

#title{

font-size: 50px;

text-align: center;

height: 188px;

line-height: 188px;

}

</style>

</head>

<body>

随机100色表

</div>

</div>

</body>

var body = document.getElementById('content');

for(var i=0;i<100;i++){

let color = bg1();

body.innerHTML+="<div style='width:19.8%;height: 190px;background-color:"+color+" ;' onclick='c(this)'>"+color+"</div>";

}

function c(a){

alert(a.innerText);

}

function bg1(){

var r=Math.floor(Math.random()*256);

var g=Math.floor(Math.random()*256);

var b=Math.floor(Math.random()*256);

return "rgb("+r+','+g+','+b+")";//所有方法的拼接都可以用ES6新特性`其他字符串{$变量名}`替换

}

</script>

</html>

欢迎转载，请尊重作者劳动成果，保留原站链接
老念博客🌈 » 50行代码实现随机取色表

qianran 普通

分享到：

qianran 普通

相关推荐

简单课程表 - 小念的个人博客