Таймер Javascript с использованием style.backgroundPosition Работает нормально в ff & chrome, не так удачно в IE - PullRequest
1 голос
/ 05 сентября 2011

Я сделал очень простой таймер обратного отсчета в js, который берет значения из массива и применяет их к свойству background-position элементов (это отображает другую часть изображения в зависимости от значения 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 и прочитал, что он предпочитает 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);
        }

Это тоже не сработало, счетчик остается статичным, кто-нибудь может пролить свет на эту проблему? Большое спасибо заранее.

1 Ответ

2 голосов
/ 05 сентября 2011

Ваша проблема в индексах массива: вы начинаете с 5, где вы должны начинать с 4. Chrome игнорирует его, когда вы пытаетесь установить style.backgroundPosition в значение undefined, но IE выдает «Недопустимый аргумент».

Пока я здесь, я хотел бы также отметить, что писать функции в виде строк в javascript практически невозможно.Ваше время ожидания должно быть setTimeout(timer,1000), используя прямую ссылку на функцию, а не строку.

...