Dot dotdot dotdotdot as loading？

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

由於伊沃在評論中說，你需要clear the interval在某些時候，特別是如果你不加載了新的一頁等待完成後。 ：d

Answer 2

例子：http://jsfiddle.net/subTZ/

var span = document.getElementById('myspan'); 

var int = setInterval(function() { 
    if ((span.innerHTML += '.').length == 4) 
     span.innerHTML = ''; 
    //clearInterval(int); // at some point, clear the setInterval 
}, 100); 

Answer 3

我使用這個：

var dotspan = document.getElementById("loading-dot-dot-dot"); 
var dotdotdot = setInterval(function() { 
    if(dotspan.innerHTML.length == 3) { 
     dotspan.innerHTML = ""; 
    } else { 
     dotspan.innerHTML += "."; 
    } 
}, 250); 

//When loading finished, disable "dotting" 
clearInterval(dotdotdot); 

Answer 4

或..你可以用CSS做;）

<p class="loading">Loading</p> 

.loading:after { 
    content: ' .'; 
    animation: dots 1s steps(5, end) infinite; 
} 

@keyframes dots { 
    0%, 20% { 
    color: rgba(0,0,0,0); 
    text-shadow: 
     .25em 0 0 rgba(0,0,0,0), 
     .5em 0 0 rgba(0,0,0,0);} 
    40% { 
    color: white; 
    text-shadow: 
     .25em 0 0 rgba(0,0,0,0), 
     .5em 0 0 rgba(0,0,0,0);} 
    60% { 
    text-shadow: 
     .25em 0 0 white, 
     .5em 0 0 rgba(0,0,0,0);} 
    80%, 100% { 
    text-shadow: 
     .25em 0 0 white, 
     .5em 0 0 white;}} 

Codepen sample

Answer 5

在我看來，最簡單的方法是一個if/else聲明。

然而，位數學計算點長和著名的Array.join - 破解重複點炭，應該做的伎倆。

function dotdotdot(cursor, times, string) { 
 
    return Array(times - Math.abs(cursor % (times * 2) - times) + 1).join(string); 
 
} 
 

 
var cursor = 0; 
 
setInterval(function() { 
 
    document.body.innerHTML = dotdotdot(cursor++, 3, '.') 
 
}, 100);

你可以提高程序的可讀性一點，通過包裝在不同的功能「計數向上和向下」雙組分和「串重複」。