<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
header {
width: 800px;
height: 500px;
background-color: blueviolet;
}
</style>
</head>
<body>
<header></header>
</body>
</html>
<script>
// 抽象对象
function Cube(width, height, bacolor, top, left) {
this.width = width;
this.height = height;
this.bacolor = bacolor;
this.top = top;
this.left = left;
}
var block1 = new Cube(10, 10, "red", 20, 40);
var block2 = new Cube(10, 10, "green", 20, 60);
console.log(block1);
function render(fatherDom, son) {
fatherDom.style.position = "relative";
var div = document.createElement("div");
div.style.width = son.width + "px";
div.style.height = son.height + "px";
div.style.background = son.bacolor;
div.style.position = "absolute";
div.style.top = son.top + "px";
div.style.left = son.left + "px";
fatherDom.appendChild(div);
}
render(document.querySelector("header"), block1);
render(document.querySelector("header"), block2);
</script>
随机小方块
最新推荐文章于 2022-03-08 13:07:53 发布