js构造函数声明对象的问题
哪里错了？<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title></title><styletyp...
哪里错了？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin:0px;padding:0px;
}
#move{
width:150px;
height:150px;
background:orange;
border-radius:50%;
position:absolute;
}
#move2{
width:120px;
height:120px;
background:skyblue;
border-radius:50%;
position:absolute;
}
</style>
</head>
<div id="move"></div>
<div id="move2"></div>
<div id="move3"></div>
<body>
<script type="text/javascript">
function Ball(stepX,stepY,divId){
this.stepX = stepX;
this.stepY = stepY;
this.divId= divId;
this.obj =document.getElementById(this.divId);
// console.log(this.obj);
this.func=function(){
var l =(this.obj).offsetLeft;
var t =(this.obj).offsetTop;
var newL =l+stepX;
var newT =t+stepY;
var maxLeft = document.documentElement.clientWidth-(this.obj).offsetWidth-10;
var maxTop = document.documentElement.clientHeight-(this.obj).offsetHeight-10;
//console.log(maxTop);
if(newL >=maxLeft ||newL <=0){
stepX *=-1;
}
if(newT >maxTop ||newT <=0){
stepY *=-1;
}
(this.obj).style.left =newL +'px';
(this.obj).style.top =newT+'px';
}
setInterval(this.func,24);
}
var myball =new Ball(3,5,"move");
// var myball2 =new ball(4,2,"move2");
/*this.obj =document.getElementById("move");
console.log(this.obj);*/
</script>
</body>
</html> 展开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin:0px;padding:0px;
}
#move{
width:150px;
height:150px;
background:orange;
border-radius:50%;
position:absolute;
}
#move2{
width:120px;
height:120px;
background:skyblue;
border-radius:50%;
position:absolute;
}
</style>
</head>
<div id="move"></div>
<div id="move2"></div>
<div id="move3"></div>
<body>
<script type="text/javascript">
function Ball(stepX,stepY,divId){
this.stepX = stepX;
this.stepY = stepY;
this.divId= divId;
this.obj =document.getElementById(this.divId);
// console.log(this.obj);
this.func=function(){
var l =(this.obj).offsetLeft;
var t =(this.obj).offsetTop;
var newL =l+stepX;
var newT =t+stepY;
var maxLeft = document.documentElement.clientWidth-(this.obj).offsetWidth-10;
var maxTop = document.documentElement.clientHeight-(this.obj).offsetHeight-10;
//console.log(maxTop);
if(newL >=maxLeft ||newL <=0){
stepX *=-1;
}
if(newT >maxTop ||newT <=0){
stepY *=-1;
}
(this.obj).style.left =newL +'px';
(this.obj).style.top =newT+'px';
}
setInterval(this.func,24);
}
var myball =new Ball(3,5,"move");
// var myball2 =new ball(4,2,"move2");
/*this.obj =document.getElementById("move");
console.log(this.obj);*/
</script>
</body>
</html> 展开
2个回答
展开全部
setInterval里面的func没有参数，导致(this.obj).offsetTop;这个地方报错。。
主要还是this的作用域改变了。setInterval执行之后，func里面的this都指向了window，而不是Ball
主要还是this的作用域改变了。setInterval执行之后，func里面的this都指向了window，而不是Ball
追问
该怎么改呢 神
追答
直接这么写吧。。
<script type="text/javascript">
function Ball(stepX,stepY,divId){
this.stepX = stepX;
this.stepY = stepY;
this.divId= divId;
var obj =document.getElementById(this.divId);
// console.log(this.obj);
function func(){
var l =obj.offsetLeft;
var t =obj.offsetTop;
var newL =l+stepX;
var newT =t+stepY;
var maxLeft = document.documentElement.clientWidth-obj.offsetWidth-10;
var maxTop = document.documentElement.clientHeight-obj.offsetHeight-10;
//console.log(maxTop);
if(newL >=maxLeft ||newL <=0){
stepX *=-1;
}
if(newT >maxTop ||newT <=0){
stepY *=-1;
}
obj.style.left =newL +'px';
obj.style.top =newT+'px';
}
var _this = this;
setInterval(func,24);
}
var myball =new Ball(3,5,"move");
var myball2 =new Ball(4,2,"move2");
/*this.obj =document.getElementById("move");
console.log(this.obj);*/
</script>
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
