使用 style.backgroundPosition 的 Javascript 计时器在 ff 和 chrome 中工作正常，在 IE 中就没那么幸运了

Question

我在 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);
        }

这也不起作用，计数器保持静止，任何人都可以阐明这个问题吗？非常感谢。

Answer 1

您的问题是数组索引:您从 5 开始，而您应该从 4 开始。当您尝试将 style.backgroundPosition 设置为未定义时，Chrome 会忽略它，但 IE 会抛出“无效参数”。

虽然我在这里，但我还想指出，在 javascript 中将函数编写为字符串几乎是行不通的。您的超时应该是 setTimeout(timer,1000)，使用直接函数引用而不是字符串。