Question

我想通过修改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')";
};

Answer 1

是的，你甚至都不亲近。

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

通过修改css来旋转图像

1 个答案: