的Javascript「...」等待圓點間隔

Question

循環而不是使用GIF動畫的，我想，而不是在一個跨度文本：

1. 等待
2. 等待。
3. 等待..
4. 等待...

我想通過每個循環，然後返回到第一個無限循環。我也想控制時間間隔來加速或減慢速度。我希望我的HTML是：

<p>Waiting<span id="dots"></span></p> 

並簡單地循環跨度innerHTML。謝謝！

Answer 1

這可能會讓你在正確的方向。我認爲代碼應該解釋自己。

function iterateDots(){ 
    var el = document.getElementById("dots"); 
    var dotsStr = el.innerHTML; 
    var dotsLen = dotsStr.length; 

    var maxDots = 3; 
    el.innerHTML = (dotsLen < maxDots ? dotsStr + '.' : ''); 
} 

function startLoading(){ 
    var intervalMs = 300; 

    var interval = setInterval("iterateDots()", intervalMs); 
}  

Answer 2

dots = document.getElementById('dots');將獲得您想要放入點的DOM元素，並且該元素的innerHTML屬性將允許您操作其中的內容。

至於在特定間隔內更改量程的內容，請參閱setInterval()和setTimeout()。你必須選擇最適合你需求的那個。

我不打算髮佈一個實際的解決方案，因爲你沒有在這方面做出任何努力，但是這應該指向正確的方向。