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()。您必须选择最适合您需求的一种。

我不会发布实际的解决方案，因为您尚未在这方面真正付出任何努力，但这应该为您指明正确的方向。