先看效果图
上代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.d1{
width:20px;
height:20px;
border: 1px solid red;
margin: 5px;
display: inline-block;
}
</style>
</head>
<script type="text/javascript">
//这里是一个生成随机数的算法
//如sum(a,b) 生成a~b的随机数
function sum (m,n){
var num = Math.floor(Math.random()*(m - n) + n);
return num;
}
function myfn(){
var d1=document.getElementById("d1");
for(var i=1;i<10;i++){
for(var j=0;j<i;j++){
d1.innerHTML+="<div class='d1'
style='background:rgb("+sum(0,255)+","+sum(0,255)+","+sum(0,255)+")'></div>";
}
d1.innerHTML+="<br>";
}
}
</script>
<body>
<input type="button" value="添加" "myfn()">
<div id="d1" align="center"></div>
</body>
</html>