console
window.onload = function () {
var totle_num = 8;
//增加外边框
var addDIv = document.getElementById("addDiv");
addDIv.onclick = function () {
var rand = randomNum(7);
var contains = document.createElement("div");
contains.className = "container-" + totle_num;
//console.log("qqq" + contains.className);
var plates = document.createElement("div");
plates.className = "plate";
//document.body.appendChild(contains);
var last = document.body.lastChild.previousSibling;
document.body.insertBefore(contains, last);
contains.appendChild(plates);
//增加header
var myHeader = document.createElement("header");
var rack = document.createElement("span");
rack.innerHTML = "Rack-" + rand;
var cloce = document.createElement("button");
cloce.className = "close";
cloce.innerHTML = "×";
cloce.name = "num-" + totle_num;
//console.log(close.name);
// console.log("111" + close.name);
plates.appendChild(myHeader);
myHeader.appendChild(rack);
myHeader.appendChild(cloce);
//增加section
var mySection = document.createElement("section");
plates.appendChild(mySection);
var myContent, myList, mySpan;
var i, j;
for (i = 0; i < 2; i++)
{
myContent = document.createElement("div");
myContent.className = "content";
mySection.appendChild(myContent);
if (i == 1) {
mySpan = document.createElement("span");
mySpan.innerHTML = rand;
myContent.appendChild(mySpan);
break;
}
for (j = 0; j < 6; j++) {
myList = document.createElement("div");
myList.className = "list";
myContent.appendChild(myList);
if (j < rand) {
myList.style.background = "blue";
myList.style.border = "1px solid blue";
}
}
}
//增加footer
var myFooter = document.createElement("footer");
plates.appendChild(myFooter);
for (i = 0; i < 2; i++) {
mySpan = document.createElement("span");
mySpan.innerHTML = "上海";
myFooter.appendChild(mySpan);
}
totle_num++;
}
//监听页面上所有的点击事件
//document.getElementsByClassName("close").addEventListener('click', function t(event) {
document.addEventListener('click', function t(event) {
// console.log(event.target.name); // 就是这个家伙点的
var button_name = event.target.name;
// console.log(button_name);
var str = button_name.split("-");
var close_str = "container-" + str[1];
//console.log(close_str);
var close_element = document.getElementsByClassName(close_str);
close_element[0].style.display = "none";
}
)
}
//产生随机数
function randomNum(max) {
var result = Math.floor(Math.random()*max);
return result;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<link rel="stylesheet" href="demo.css" type="text/css">
<script src="demo.js"></script>
</head>
<body>
<div class="container-1">
<div class="plate">
<header>
<span>Rack-4</span>
<button class="close" name="num-1">-</button>
</header>
<section>
<div class="content">
<div class="list"></div>
<div class="list"></div>
<div class="list"></div>
<div class="list"></div>
<div class="list"></div>
<div class="list"></div>
</div>
<div class="content">
<span>6</span>
</div>
</section>
<footer>
<span>上海</span>
<span>浦东</span>
</footer>
</div>
</div>
<div class="container-2">
<div class="plate">
<header>
<span >Rack-5</span>
<button class="close" name="num-2">×</button>
</header>
<section>
<div class="content">
<div class="list"></div>
<div class="list"></div>
<div class="list"></div>
<div class="list"></div>
<div class="list"></div>
<div class="list"></div>
</div>
<div class="content">
<span>6</span>
</div>
</section>
<footer>
<span>上海</span>
<span>浦东</span>
</footer>
</div>
</div>
<div class="container-3">
<div class="plate">
<header>
<span >Rack-1</span>
<button class="close" name="num-3">×</button>
</header>
<section>
<div class="content">
<div class="list"></div>
<div class="list"></div>
<div class="list"></div>
<div class="list"></div>
<div class="list"></div>
<div class="list"></div>
</div>
<div class="content">
<span>6</span>
</div>
</section>
<footer>
<span>上海</span>
<span>浦东</span>
</footer>
</div>
</div>
<div class="container-4">
<div class="plate">
<header>
<span >Rack-1</span>
<button class="close" name="num-4">×</button>
</header>
<section>
<div class="content">
<div class="list"></div>
<div class="list"></div>
<div class="list"></div>
<div class="list"></div>
<div class="list"></div>
<div class="list"></div>
</div>
<div class="content">
<span>6</span>
</div>
</section>
<footer>
<span>上海</span>
<span>浦东</span>
</footer>
</div>
</div>
<div class="container-5">
<div class="plate">
<header>
<span >Rack-1</span>
<button class="close" name="num-5">×</button>
</header>
<section>
<div class="content">
<div class="list"></div>
<div class="list"></div>
<div class="list"></div>
<div class="list"></div>
<div class="list"></div>
<div class="list"></div>
</div>
<div class="content">
<span>6</span>
</div>
</section>
<footer>
<span>上海</span>
<span>浦东</span>
</footer>
</div>
</div>
<div class="container-6">
<div class="plate">
<header>
<span >Rack-1</span>
<button class="close" name="num-6">×</button>
</header>
<section>
<div class="content">
<div class="list"></div>
<div class="list"></div>
<div class="list"></div>
<div class="list"></div>
<div class="list"></div>
<div class="list"></div>
</div>
<div class="content">
<span>6</span>
</div>
</section>
<footer>
<span>上海</span>
<span>浦东</span>
</footer>
</div>
</div>
<div class="container-7">
<div class="plate">
<header>
<span >Rack-1</span>
<button class="close" name="num-7">×</button>
</header>
<section>
<div class="content">
<div class="list"></div>
<div class="list"></div>
<div class="list"></div>
<div class="list"></div>
<div class="list"></div>
<div class="list"></div>
</div>
<div class="content">
<span>6</span>
</div>
</section>
<footer>
<span>上海</span>
<span>浦东</span>
</footer>
</div>
</div>
<div class="container-addDiv">
<span id="addDiv">+</span>
</div>
</body>
</html>
* {
margin: 0;
padding: 0;
}
div[class^="container"] {
float: left;
width: 25%;
box-sizing: border-box;
padding: 15px;
}
.plate {
height: 120px;
border: 1px solid #cccccc;
cursor: pointer;
transition: all 0.5s;
}
header {
height: 25px;
border-bottom: 1px solid #cccccc;
display: flex;
justify-content: space-between;
align-items: center;
width: inherit;
}
header span {
display: inline-block;
font-size: 16px;
font-weight: bold;
}
header > span {
width: 90%;
text-align: center;
}
.close {
color: white;
margin-right: 2%;
text-align: center;
width: 12px;
height: 12px;
border-radius: 50%;
background: #ff8080;
border: 1px solid #ff8080;
align-items: center;
}
section {
height: 60px;
display: flex;
justify-content: space-between;
color: grey;
}
footer {
height: 25px;
border-top: 1px solid #cccccc;
display: flex;
justify-content: space-between;
align-items: center;
width: inherit;
color: grey;
padding: 0 10px;
font-size: 12px;
}
.content {
padding: 15px;
}
.list {
float: left;
margin: 3px;
display: block;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: gainsboro;
border: 1px solid gainsboro;
}
.plate:hover {
transform: translate(0, -10px);
box-shadow: 1px 1px 1px gainsboro;
}
#addDiv {
height: 120px;
border: 1px solid #cccccc;
display: block;
margin: 0 auto;
font-size: 5em;
color: green;
text-align: center;
cursor: pointer;
}