Question

我想用javascript onclick更改/覆盖我的css的.left属性。这是我设法做到的，只是我希望属性分阶段（每1秒）改变5em，直到达到0em。不幸的是，当我点击ID启动该功能时，它只是从30em跳到0em。每1秒代替30,25,20,15,10,5等。有任何想法吗？（请不要Jquery！）

window.onload = function(){
   document.getElementById("objection1").onclick = firstScroll;
}

function firstScroll(){

var content = document.getElementById("intB");
var thisNum = 30;
var em = "em";

function doScroll(){
    content.style.left = thisNum+em;
}

while(thisNum > 0){
    setTimeout(doScroll, 1000);
    thisNum -= 5;
}

}

Answer 1

是的，你在while循环中反复递减thisNum。 setTimeout是一秒钟内调用的函数，但是while循环继续运行。 doScroll应该递减em值，而不是外部的while循环。这使用setInterval而不是setTimeout，但是要么会这样做..

var intTimer;

function doScroll(){
    thisNum -= 5;
    content.style.left = thisNum+"em";

    if (thisNum <= 0){
        window.clearInterval(intTimer);
    }
}

intTimer = setInterval( doScroll, 1000);

Answer 2

问题是当你调用while循环时，下一个间隔还没有被触发，但是你的thisNum在完成循环后已经设置为0。因此，当doScroll被触发时，thisNum已经为0。

尝试：

window.onload = function(){
    document.getElementById("objection1").onclick = firstScroll;
}

var thisNum = 30;
var em = "em";

function firstScroll(){
   setTimeout(doScroll, 1000);
}

function doScroll(){
    thisNum -= 5;
    var content = document.getElementById("intB");
    content.style.left = thisNum+em;
    if (thisNum > 0){
         setTimeout(doScroll, 1000);
    }
}

使用while和setTimeOut覆盖CSS onclick

2 个答案: