javascript - 点点点点点点作为加载？

Question

我想创建一些加载点，像这样:

在 0000 毫秒时，跨度内容为:。

在 0100 毫秒时，跨度内容为:..

在 0200 毫秒处，跨度内容为:...

在循环中。

最好/最简单的制作方法是什么？

Answer 1

<span id="wait">.</span>

<script>
var dots = window.setInterval( function() {
    var wait = document.getElementById("wait");
    if ( wait.innerHTML.length > 3 ) 
        wait.innerHTML = "";
    else 
        wait.innerHTML += ".";
    }, 100);
</script>

---

或者你可以花点心思让它们前后移动:

<span id="wait">.</span>

<script>
    window.dotsGoingUp = true;
    var dots = window.setInterval( function() {
        var wait = document.getElementById("wait");
        if ( window.dotsGoingUp ) 
            wait.innerHTML += ".";
        else {
            wait.innerHTML = wait.innerHTML.substring(1, wait.innerHTML.length);
            if ( wait.innerHTML === "")
                window.dotsGoingUp = true;
        }
        if ( wait.innerHTML.length > 9 )
            window.dotsGoingUp = false;



        }, 100);
    </script>

或者你可以让它们随机地来回移动:

<span id="wait">.</span>

<script type="text/javascript">
    var dots = window.setInterval( function() {
        var wait = document.getElementById("wait");
        if ( Math.random() < .7 )
            wait.innerHTML += ".";
        else
            wait.innerHTML = wait.innerHTML.substring(1, wait.innerHTML.length);
        }, 100);
</script>

或者我可以获得生活并停止发布额外的片段....:D

正如 Ivo 在评论中所说，您需要 clear the interval在某些时候，特别是如果您在等待完成后没有加载新页面。 :D