只有一个跨度有效

Question

这段代码提供了一个点效果,就像一个加载栏("Loading.,Loading ..,Loading ..."),但问题是,只有一个单独的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/