我想让lightblue广场向右走,橙色广场同时向下走。但他们都是对角线。我知道这里发生了什么,但我不明白它为什么会发生或如何解决。看起来这两个函数调用都影响这两个元素。谢谢!移动元素的javascript函数正在访问比它应该更多的元素。
的jsfiddle:https://jsfiddle.net/8apLsmp7/1/
function moveElem(dir, xPos, yPos, element, index, container){
//Getting width and height of container and item elements
var elem = document.getElementsByClassName(element);
var w = elem[index].offsetWidth;
var h = elem[index].offsetHeight;
var contw = document.getElementById(container).offsetWidth;
var conth = document.getElementById(container).offsetHeight;
var vertEnd = contw - w;
var horiEnd = conth - h;
//clean up variables to make sure they comply with the width and height of the container
if (xPos > vertEnd){
x = vertEnd;
} else if (xPos < 0){
x = 0;
} else {
x = xPos;
}
if (yPos > horiEnd){
y = horiEnd;
} else if (yPos < 0){
y = 0;
} else {
y = yPos;
}
//position the element
elem[index].style.left = x + 'px';
elem[index].style.top = y + 'px';
//set timer, speed and friction
var timer = setInterval(frame, 5);
var spd = 10;
var friction = 0.987;
//what runs every interval
function frame(){
//check if to move right
if (dir === "right"){
if (x >= vertEnd){
clearInterval(timer);
x = vertEnd;
elem[index].style.left = x + 'px';
elem[index].style.top = y + 'px';
} else {
elem[index].style.top = y + 'px';
elem[index].style.left = x + 'px';
x += spd;
spd *= friction;
}
//check if to move left
} else if (dir === "left"){
if (x <= 0){
clearInterval(timer);
x = 0;
elem[index].style.left = x + 'px';
elem[index].style.top = y + 'px';
} else {
elem[index].style.top = y + 'px';
elem[index].style.left = x + 'px';
x -= spd;
spd *= friction;
}
//check if to move up
} else if (dir === "up"){
if (y <= 0){
clearInterval(timer);
y = 0;
elem[index].style.left = x + 'px';
elem[index].style.top = y + 'px';
} else {
elem[index].style.left = x + 'px';
elem[index].style.top = y + 'px';
y -= spd;
spd *= friction;
}
//check if to move down
} else if (dir === "down"){
if (y >= horiEnd){
clearInterval(timer);
y = horiEnd;
elem[index].style.left = x + 'px';
elem[index].style.top = y + 'px';
} else {
elem[index].style.left = x + 'px';
elem[index].style.top = y + 'px';
y += spd;
spd *= friction;
}
}
}
}
moveElem("right", 0, 0, "item", 0, "cont");
moveElem("down", 0, 0, "item", 1, "cont");
您是否尝试过步进/调试/日志记录以查看出错的地方? https://ericlippert.com/2014/03/05/how-to-debug-small-programs/另请参阅:https://stackoverflow.com/help/how-to-ask,因为你不会得到“为我调试我的代码”有很多很好的答案。 – jdv
谢谢!生病尝试那些! –