javascript - 只有一个跨度有效

Question

这段代码提供了一个点效果，就像一个加载栏(“正在加载., 正在加载.., 正在加载...”)，但问题是，只有一个 span id 有效，第二个不会，我不知道为什么... 请帮帮我，伙计们

<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
function showProgressDots(numberOfDots) {

    var progress = document.getElementById('progressDots');

    switch(numberOfDots) {
        case 1:
            progress.innerHTML = '.';
            timerHandle = setTimeout('showProgressDots(2)',200);
            break;
        case 2:
            progress.innerHTML = '..';
            timerHandle = setTimeout('showProgressDots(3)',200);
            break;
        case 3:
            progress.innerHTML = '...';
            timerHandle = setTimeout('showProgressDots(1)',200);
            break;
    }
}
window.setTimeout('showProgressDots(1)',100);
//-->
</SCRIPT>

Loading<span id="progressDots" style="position:absolute;"></span>
SecondLoading<span id="progressDots" style="position:absolute;"></span>

Answer 1

如果您需要，这里有一个简短的解决方案。

HTML:

Loading<span id="progressDots1"></span>
SecondLoading<span id="progressDots2"></span>

JavaScript:

function loading(id) {
    var el = document.getElementById(id),
        i = 0,
        dots = "...";

    setInterval(function() {
        el.innerHTML = dots.substring(0, ++i);
        if (i % 3 == 0) i = 0;
    }, 500);
}

loading("progressDots1");
loading("progressDots2");​

演示: http://jsfiddle.net/dzFL3/