老师为什么我的实现出来时一卡一卡的
来源：6-2 上升到面向对象-炫彩小球小案例
摩苏尔
2021-04-22 00:20:52
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
background-color: black;
}
.box {
position: relative;
border-radius: 50%;
}
</style>
</head>
<body>
<script>
//定义小球类
function Ball(x, y) {
//这里的X和Y用于表示圆心的坐标
this.x = x;
this.y = y;
//Math.random()是随机0~1之间的数
//这里有可能会出现两个都为0的现象，这样小球就会在原地不动了
//所以要使用do-while语句，先执行后判断
do {
this.dx = parseInt(Math.random() * 20) - 10;
this.dy = parseInt(Math.random() * 20) - 10;
} while (this.dx == 0 && this.dy == 0);
//半径
this.r = 20;
//设置小球的透明度
this.opacity=1;
//小球的颜色,随机选取颜色数组中的一个颜色
this.color = colorArr[parseInt(Math.random()*colorArr.length)];
//初始化
this.init();
//这里没创建出一个实例都推入数组中
ballArr.push(this);
}
Ball.prototype.init = function () {
//创建dom对象
this.dom = document.createElement('div');
this.dom.className = 'box';
//设置小球的宽高,宽和高的半径的两倍
this.dom.style.width = this.r * 2 + 'px';
this.dom.style.height = this.r * 2 + 'px';
//设置小球的圆心坐标
this.dom.style.left = this.x - this.r + 'px';
this.dom.style.top = this.y - this.r + 'px';
//设置背景色
this.dom.style.backgroundColor = this.color;
//上树
document.body.appendChild(this.dom);
}
//更新小球的圆心坐标，使小球位置发生变化
Ball.prototype.update = function () {
// //这里虽然可以实现坐标的变化，但是不是随机的
// this.x--;
// this.y++;
this.x -= this.dx;
this.y -= this.dy;
//半径改变
this.r+=0.2;
//这里我们虽然更新的圆心额坐标的值，但是我们还没有更改css样式
//更新小球的宽高,宽和高的半径的两倍
this.dom.style.width = this.r * 2 + 'px';
this.dom.style.height = this.r * 2 + 'px';
//更新小球的圆心坐标
this.dom.style.left = this.x - this.r + 'px';
this.dom.style.top = this.y - this.r + 'px';
//让小球的透明度逐渐降低，使小球消失
this.opacity-=0.01
this.dom.style.opacity=this.opacity;
//当小球完全消失时，将该实例移除数组和删除该DOM
if(this.opacity<0){
for(var i=0;i<ballArr.length;i++){
//将该实例移除数组
if(ballArr[i]==this){
ballArr.splice(i,1);
}
}
//删除该dom
document.body.removeChild(this.dom);
}
}
//定义一个数组，让新创建的实例推入数组中
var ballArr=[];
//定义初始颜色数组
var colorArr=['#66CCCC', '#CCFF66', '#FF99CC', '#FF6666',
'#CC3399', '#FF6600'];
//设置一个定时器，用于更新小球
setInterval(function () {
//遍历数组，每边里一个就调用update方法
for(var i=0;i<ballArr.length;i++){
ballArr[i].update();
}
}, 20);
//监听鼠标的移动事件
document.onmousemove=function(e){
var x=e.clientX;
var y=e.clientY;
new Ball(x,y);
}
</script>
</body>
</html>
2回答
-
好帮手慕星星
2021-04-22
同学你好，自己能够找到问题并解决是很棒的哦，祝学习愉快~
0 -
摩苏尔
提问者
2021-04-22
老师我已经解决了，我爸小球定成相对定位了
0
相似问题