<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> body { height: 1200px; } </style> </head> <body> </body> </html> <script> // 面向对象的思想： //1、有哪些类：就只有一个弹力球类。 //2、步骤 // 定义类（弹力球类）：构造函数 function Ball( size, left1, top1, color, step, directionLeft, directionTop, timeSpace) { // 属性:(把面向过程中的全局变量变成属性) this.dom = null; //球球的大小 this.size = size; // 位置 this.left1 = left1; this.top1 = top1; //颜色 this.color = color; // 步长 this.step = step; this.timeSpace = timeSpace; // 方向 this.directionLeft = directionLeft; this.directionTop = directionTop; // 创建dom this.createDom = function(){ this.dom = document.createElement("div"); this.dom.style.cssText = ` position: absolute; left: ${this.left1}px; top: ${this.top1}px; ${this.size}px; height: ${this.size}px; border-radius: 50%; background-color:${this.color}; `; document.body.appendChild(this.dom); } // 球球开始谈 this.go = function () { setInterval(() => { this.left1 = this.left1 + this.directionLeft * this.step; this.top1 = this.top1 + this.directionTop * this.step; // 边界判断 // 1)、纵向 let clientHeigth = document.documentElement.clientHeight || document.body.clientHeight; let scrollTop = document.documentElement.scrollTop || document.body.scrollTop; if (this.top1 + this.size > clientHeigth + scrollTop) { // 下边界 this.top1 = clientHeigth + scrollTop - this.size; this.directionTop = -1; } else if (this.top1 < scrollTop) { //上边界 this.top1 = scrollTop; this.directionTop = 1; } //2)、横向 let clientWidth = document.documentElement.clientWidth || document.body.clientWidth; let scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft; if (this.left1 + this.size > clientWidth + scrollLeft) { // 右边界 this.left1 = clientWidth + scrollLeft - this.size; this.directionLeft = -1; } else if (this.left1 < scrollLeft) { //左边界 this.left1 = scrollLeft; this.directionLeft = 1; } this.dom.style.left = this.left1 + "px"; this.dom.style.top = this.top1 + "px"; }, this.timeSpace); } this.createDom(); this.go(); } window.onload = function () { for(var i=0;i<200;i++){ // 1、随机大小(10-100) let size = parseInt(Math.random()*91)+10; // 2、随机位置；(横向：10-1000，纵向：10-600) let left1 = parseInt(Math.random()*991)+10; let top1 = parseInt(Math.random()*591)+10; // 3、随机颜色 let color = getColor(); // 4、随机步长(1-10) let step = parseInt(Math.random()*11)+1; // 5、随机方向 let directionLeft = parseInt(Math.random()*2)==0?-1:1; //0和1 let directionTop = parseInt(Math.random()*2)==0?-1:1; //0和1 // 6、随机时间间隔(5-100) let timeSpace = parseInt(Math.random()*96)+5; let b1 = new Ball( size, left1, top1, color, step, directionLeft, directionTop, timeSpace); } } function getColor(){ var str = "#"; for(var i=0;i<6;i++){ str += parseInt(Math.random()*16).toString(16); } return str; } </script>