Question

其目的：它应该创建一个div，然后让它慢慢移动到一个随机位置。

问题：我尝试将其粘贴到Inspect Element控制台中。它只创建div然后停止。没有错误，没有任何迹象表明错误。这真让我烦恼。

如果您想查看发生了什么，可以按CTRL + SHIFT + J并将代码粘贴到inspect元素控制台中。

代码：

var l = document.createElement('div'); 
l.style.height = '100px';
l.style.width = '100px';
l.style.position = 'relative';
l.style.backgroundColor = 'orange';
l.id = 'di';
document.body.appendChild(l);
var lef = 0;
var to = 0;
var p = Math.random() * 1000;
var o = Math.random() * 400;
var h = setInterval(function () {
if (lef > p) {
    di.style.top = to + 'px';
    to = to + 1;
    if (to > o) {
        p = Math.random() * 1000;
        o = Math.random() * 400
    }
} else if (to > o) {
    di.style.left = lef + 'px';
    lef = lef + 1;
    if (lef > p) {
        p = Math.random() * 1000;
        o = Math.random() * 400
    } else {
        di.style.left = lef + 'px';
        lef = lef + 1;
        di.style.top = to + 'px';
        to = to + 1;
    }
}
}, 100)

Answer 1

我不知道您使用什么逻辑来生成left元素的top和div，但我制作了一个演示JSFIDDLE div持续改变其位置。代码中的问题是您使用di的方式不正确。相反，你应该喜欢：

var div_element = document.getElementById('di');
//and then using it like
div_element.style.left= some_value+"px";
div_element.style.top= some_value+"px";

以下是我所做的竞争JS代码：

var l = document.createElement('div'); 
l.style.height = '100px';
l.style.width = '100px';
l.style.position = 'relative';
l.style.backgroundColor = 'orange';
l.id = 'di';
document.body.appendChild(l);

var div_elem = document.getElementById(l.id);
//div_elem.style.top = "100px";
//alert(div_elem.id);
var h = setInterval(function () {
   div_elem.style.top = Math.floor((Math.random() * 100) + 1)+"px"; //Math.floor((Math.random() * 100) + 1);  Generates random number between 1 and 100
   div_elem.style.left = Math.floor((Math.random() * 200) + 1)+"px"; //Math.floor((Math.random() * 200) + 1);  Generates random number between 1 and 200
   //console.log('top = '+div_elem.style.top);
   //console.log('left = '+div_elem.style.left); 
}, 100)

希望这有帮助。

你能说出我的代码有什么问题吗？

1 个答案: