0

我想通过修改css来旋转两个图像，如下所示：

document.getElementById("id").style.backgroundImage = "url('image2.png')";
document.getElementById("id").style.backgroundImage = "url('image1.png')";

但是，我只需要在函数调用时执行四次。

我试过使用 setTimeout() 方法，但是，它似乎没有完成这项工作。

这是我当前通过单击初始化的代码。

var d = new Date();
var n;
var i;

function flash() {
    n = d.getTime();
    var newTime = d.getTime();
    var called = 0;
    i = 0;
    while ((newTime - n) < 2000) {
        document.getElementById("i_count").innerHTML = i;
        if (!(i % 2) && (!called)) {
            called = 1;
            setTimeout("change_1()", 250);
            i++;
            called = 0;
        } else if ((i % 2) && (!called)) {
            called = 1;
            setTimeout("change_2()", 250);
            i++;
            called = 0;
        }
        newTime = d.getTime();
    }
}

function change_1() {
    document.getElementById("id").style.backgroundImage = "url('image2.png')";
    return;
}
function change_2() {   
    document.getElementById("id").style.backgroundImage = "url('image1.png')";
    return;
}

我试图在while循环中使用计时器而不是计数，但它会阻塞页面并且永远不会加载。当我在 while 循环中使用计数器时，它在没有调用 change_2() 的情况下递增，这意味着计数器刚刚递增超过停止条件。

我想做一个非常（至少听起来像）简单的任务，点击动作旋转图像一段时间然后停止。

...我试过在网上搜索，但在过去的 2 个小时里，我所看到的只是连续旋转。

感谢帮助！

将代码更改为以下，但是，我只得到一个周期。无论 change_1 和 2 是否完成，计数器都会递增。

var i;

function flash() {
    i = 0;
    while (i++ < 10) {
        document.getElementById("i_count").innerHTML = i;
        setTimeout("change_1()", 250);
    }
};

function change_1() {
    document.getElementById("1").style.backgroundImage = "url('images/img_1.png')";
    setTimeout("change_2()", 250);
};

function change_2() {
    document.getElementById("1").style.backgroundImage = "url('images/img_2.png')";
};
4

1 回答 1

1

是的，你甚至没有接近。

您不会在循环中一次又一次地调用超时。change_1 应该设置一个超时来调用 change_2，反之亦然，计数器在四点后停止。

于 2013-01-26T02:10:29.297 回答