<!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;
width: ${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>
