1

配列から値を取得し、要素のbackground-positionプロパティに適用する非常に単純なカウントダウン タイマーを js で作成しました (これは、の値に応じて画像の別の部分を表示しますcurS)。

コードは次のとおりです。

window.onload = timer;
        var curS = 5;
        function timer(){
            var bgP = new Array("0 -1px","0 -22px","0 -45px","0 -67px","0 -89px");
            if (curS <= 5){
            document.getElementById("count").style.backgroundPosition = bgP[curS];
            }       
        curS--;
        setTimeout("timer()",1000);
        }

これは FF、Chrome、Opera などでは機能しますが、IE 7/8 では機能しません。私は、IE が古い background-position で少し不安定であることを認識しており、IE がbackground-position-x&を好むことを読みました。background-position-y

そこで、次のコードを IE のみの条件内に配置しました。

window.onload = timer;
        var curS = 5;
        function timer(){
            var bgPx = 0;
            var bgPy = new Array("-1px","-22px","-45px","-67px","-89px");
            if (curS <= 5){
            document.getElementById("count").style.backgroundPositionX = bgPx;
            document.getElementById("count").style.backgroundPositionY = bgPy[curS];
            }       
        curS--;
        setTimeout("timer()",1000);
        }

これも機能しませんでした。カウンターは静的なままです。誰もこの問題に光を当てることができますか? よろしくお願いします。

4

1 に答える 1

2

問題は配列インデックスです。4 から開始する必要がある場所を 5 から開始しています。style.backgroundPosition を未定義に設定しようとすると、Chrome はそれを無視しますが、IE は「無効な引数」をスローします。

私がここにいる間、javascript で関数を文字列として書くことはほとんど問題ないことも指摘したいと思います。タイムアウトはsetTimeout(timer,1000)、文字列ではなく直接関数参照を使用して、 にする必要があります。

于 2011-09-05T10:36:13.843 に答える