Question

很抱歉，如果标题没有多大意义，那就是我甚至不知道我的问题是开始尝试解决它。这段代码意味着每秒执行一次函数10次，添加一个div元素，给它一个类，给它一个左起始位置并开始向左移动。我已经成功创建了div，给它一个类并附加它但问题出在哪里让它向左移动。

我想通过一个跟踪div left属性的变量来移动它，从该变量中减去并始终将divs left属性设置为等于该变量，但它似乎没有工作正确，因为所有创建的div都遵循该位置跟踪变量之一。

setInterval(function() {

    var Count = 0;
    var createddiv = document.createElement("div");
    var divX = 1000;

    if (Count < 1000) {

        Count = Count + 100;
        createddiv.classList.add("NewDiv");
        createddiv.style.left = divX + "px";
        document.body.appendChild(createddiv);

        divX = divX - 100;
        createddiv.style.left = divX + "px";

    }

}, 1000)

Answer 1

根据我的理解，你想在10秒内从右到左移动div

JS

(function() {

    var Count = 0;
    var divX = 1000;
    var createddiv;

        var intervalRef = setInterval(function() {
        if (Count < 1000) {
        if(createddiv !== undefined) {
            createddiv.parentNode.removeChild(createddiv);  
        }
        createddiv = document.createElement("div");
        Count = Count + 100;
        createddiv.classList.add("NewDiv");
        createddiv.style.left = divX + "px";
        document.body.appendChild(createddiv);

        divX = divX - 100;
        createddiv.style.left = divX + "px";

        } else {
        clearInterval(intervalRef);
      }
    }, 1000);

})();

CSS

.NewDiv {
  height: 100px;
  width: 100px;
  background-color: red;
  position: relative;
}

以下是jsfiddle

中的工作演示

建议而不是每次都创建新div，添加一个div并更改它的左侧属性。

如何为每个变量分配一个伙伴变量？

1 个答案: