0

次のように、css を変更して 2 つの画像を回転させたい:

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

ただし、関数呼び出しで 4 回だけ実行する必要があります。

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時間くらい連続回転しか見られませんでした。

助けてくれてありがとう！

コードを次のように変更しましたが、1 サイクルしか取得できません。カウンタは、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 を呼び出すためのタイムアウトを設定する必要があり、その逆も同様であり、カウンターは 4 後に停止する必要があります。

于 2013-01-26T02:10:29.297 に答える