实训练习,通过GRB随机色加入到DIV中,通过事件绑定弹出颜色代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
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>
<div id="title">
随机100色表
</div>
<div id="content">
</div>
</body>
<script type="text/javascript">
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>