ES6面向?qū)ο笾畯椥孕∏?gif
還不知道ES6繼承的小伙伴可以參考http://www.reibang.com/p/3d09c6fe330e
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ES6面向?qū)ο笾畯椥孕∏?lt;/title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
overflow: hidden;
}
</style>
</head>
<body>
<script type="text/javascript">
function $(id) {
return document.getElementById(id);
}
class Ball{
constructor(domObj,num,width,height,bgColor,left,top,leftInc,topInc,timespace,leftDirection,topDirection) {
let clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
let clientWidth = document.documentElement.clientWidth || document.body.clientWidth;
let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
let scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
this.domObj = domObj;
this.num = num || null;
this.width = width || 100;//寬高顏色
this.height = height || 100;
this.bgColor = bgColor || randomRgbColor();
this.left = left || newRandom(50,clientWidth-scrollLeft-this.width);//當(dāng)前位置
this.top = top || newRandom(50,clientHeight-scrollTop-this.height);
this.leftInc = leftInc || newRandom(2,4);//速度
this.topInc = topInc || newRandom(2,4);
this.timespace = timespace || newRandom(5,20);
this.leftDirection = leftDirection ||newRandom(1,2);//方向
this.topDirection = topDirection || newRandom(1,2);
this.myTimer = null;
}
//小球碰撞彈回
}
class moveBall extends Ball{
constructor(domObj,num,width,height,bgColor,left,top,leftInc,topInc,timespace,leftDirection,topDirection) {
super(domObj,num,width,height,bgColor,left,top,leftInc,topInc,timespace,leftDirection,topDirection)//繼承并調(diào)用父類的參數(shù)
}
go() {
this.myTimer = setInterval(() => {
this.left = this.left + this.leftInc*this.leftDirection;//改變球球當(dāng)前位置
this.top = this.top + this.topInc*this.topDirection;
//網(wǎng)頁(yè)網(wǎng)頁(yè)被卷去的高和左
let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
let scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
//網(wǎng)頁(yè)可視區(qū)域?qū)捀? let clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
let clientWidth = document.documentElement.clientWidth || document.body.clientWidth;
if (this.left-scrollLeft <= 0) {
//碰到左邊緣改變方向
this.leftDirection = 1;
//橫向滾動(dòng)掉的距離>可視區(qū)域的寬度-球球的寬度
//offsetWidth返回元素的padding+border+width屬性之和
}else if(this.left - scrollLeft>=clientWidth - this.domObj.offsetWidth) {
//碰到右邊緣改變方向
this.leftDirection = -1;
}
if (this.top-scrollTop <= 0) {
//碰到上邊緣改變方向
this.topDirection = 1;
//縱向滾動(dòng)掉的距離>可視區(qū)域的高度-球球的高度
}else if(this.top - scrollTop>=clientHeight - this.domObj.offsetHeight) {
//碰到下邊緣改變方向
this.topDirection = -1;
}
//改變小球位置
this.domObj.style.left = this.left + "px";
this.domObj.style.top = this.top + "px";
this.domObj.style.backgroundColor = this.bgColor;
this.domObj.style.width = this.width + "px";
this.domObj.style.height = this.height + "px";
this.domObj.style.position = "absolute";
this.domObj.style.borderRadius = "50%";
},this.timespace);
}
}
window.onload = function() {
let ballnum = (num) => {
let that = num;
console.log(that);
for (let i=0; i<num; i++) {
//創(chuàng)建出小球
let myDiv = document.createElement('div');
myDiv.id = "ball"+i;
document.body.appendChild(myDiv);
let ball = new moveBall($("ball"+i),that);
ball.go();//調(diào)用子類中的方法
}
}
//調(diào)用缝裁，可以傳入多個(gè)球译暂，目前用3個(gè)演示
ballnum(3);
}
function newRandom(x,y) {
//x-y里面的隨機(jī)整數(shù)獲取
let a = Math.floor(Math.random()*(y-x))+x;
return a;
}
function randomRgbColor() {
//生成隨機(jī)RGB顏色
let r = Math.floor(Math.random() * 256);
let g = Math.floor(Math.random() * 256);
let b = Math.floor(Math.random() * 256);
return `rgb(${r}, ${g}, $`;
}
</script>
</body>
</html>
