前端学习笔记之使用面相对象实现图形自由移动并随机切换颜色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 160px;
height: 160px;
border-radius: 50%;
position: absolute;
left: 0;
top: 0;
background: repeating-linear-gradient(135deg, #fff 0, #fff 10px, green 10px, green 20px);
}
.box2 {
width: 80px;
height: 40px;
border-radius: 15px;
background-color: #fff;
position: absolute;
left: 40px;
top: 60px;
z-index: 1;
}
h1 {
position: absolute;
text-align: center;
line-height: 40px;
top: -22px;
left: 10px;
z-index: 11;
}
</style>
</head>
<body>
<div class="box">
<div class="box2">
<h1>520</h1>
</div>
</div>
<script>
class Box {
constructor(selector) {
this.node = document.querySelector("div");
}
get width() {
return this.node.offsetWidth;
}
set width(v) {
this.node.style.width = v + "px"
}
get height() {
return this.node.offsetHeight;
}
set width(v) {
this.node.style.height = v + "px"
}
get left() {
return this.node.offsetLeft;
}
set left(v) {
this.node.style.left = v + "px"
}
get top() {
return this.node.offsetTop;
}
set top(v) {
this.node.style.top = v + "px"
}
// get color() {
// return getComputedStyle(this.node).color;
// }
// set color(v) {
// this.node.style.color = v
// }
}
const b1 = new Box(".box");
setInterval(() => {
b1.left += 3;
b1.top += 1;
b1.width += 1;
b1.height += 1;
}, 150);
function changeColor() {
let color = "#f00|#0f0|#00f|#880|#808|#088|yellow|green|blue|gray";
color = color.split("|");
let c = document.getElementsByTagName("h1");
for (let i = 0; i < c.length; i++) {
c[i].style.color = color[parseInt(Math.random() * color.length)];
}
}
setInterval("changeColor()", 50);
function random(min, max) {
if (arguments.length === 0) {
return 0;
} else if (arguments.length === 1) {
max = min;
min = 0;
} else {
if (max < min) {
[min, max] = [max, min]
}
}
return parseInt(Math.random() * (max - min)) + min;
}
</script>
</body>
</html>
