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

你可以提高程序的可读性一点，通过包装在不同的功能“计数向上和向下”双组分和“串重复”。