前端学习笔记之使用面相对象实现图形自由移动并随机切换颜色
作者：互联网
<!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>
标签：node,return,color,top,笔记,width,随机,面相,left 来源： https://www.cnblogs.com/Yangyecool/p/13171644.html