Javascript 使用while和setTimeOut重写CSS onclick

我想用javascript onclick更改/覆盖css的.left属性。我已经设法做到了这一点，只是我希望属性分阶段（每1秒）更改，递减5em，直到达到0em。不幸的是，当我点击ID启动函数时，它只是从30em跳到0em。而不是每1秒30,25,20,15,10,5等。有什么想法吗？（请不要用Jquery！）

---

是的，您在while循环中反复递减thisNum。setTimeout是一个在一秒钟内调用的函数，但while循环仍在继续。Doscorl应该递减em值，而不是在外部循环一段时间。这将使用setInterval而不是setTimeout，但两者都可以

var intTimer;

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

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

intTimer = setInterval( doScroll, 1000);

var-intTimer；
函数doscorl（）{
thisNum-=5；
content.style.left=thisNum+“em”；
如果（thisNum您的问题是在调用while循环时，下一个间隔尚未触发，但您的
thisNum
在完成循环后已设置为0。因此，当
doscorl
被触发时，
thisNum
已为0

尝试：

您需要将content.style.left=thisNum+em；更改为content.style.left=thisNum+“em”；否则您将得到一个错误。@杰夫：上面的OP代码已经声明：
var em=“em”
@Khanh to-非常感谢！现在一切都有意义了。：）谢谢@vogomatix-我不得不选择Khanh-to，因为虽然你的答案有效，但我只有在处理了Khanh-to的答案后才能理解。没问题-投票表决有建设性的答案并最终接受你使用的答案是一种良好做法：-）
var intTimer;

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

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

intTimer = setInterval( doScroll, 1000);

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);
    }
}