使用 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-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 设置为 undefined 时，Chrome 会忽略它，但 IE 会抛出“无效参数”。

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