点点dotdotdotdot作为加载? [英] Dot dotdot dotdotdot as loading?

问题描述

我想创建一些加载点，如下所示:

I wanna create some loading dots, like this:

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

At 0000 miliseconds the span content is: .

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

At 0100 miliseconds the span content is: ..

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

At 0200 miliseconds the span content is: ...

循环播放.

什么是最好的/最简单的方法?

What is the best / easiest way to make it?

推荐答案

<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>

---

或者您可以幻想一下，让它们前进和后退:

---

Or you can get fancy and have them go forward and back:

<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>

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

Or you could make them go back and forth randomly:

<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

Or I could get a life and stop posting additional snippets.... :D

正如Ivo在评论中所说，您需要在某个时候清除时间间隔，尤其是在等待完成后，您将不会加载新页面. :D

As Ivo said in the comments, you need to clear the interval at some point, especially if you are not loading a new page after the waiting is finished. :D

这篇关于点点dotdotdotdot作为加载?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！