javascript - 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元素的属性将允许您操作其中的内容。

至于在特定时间间隔内更改 span 的内容，请查看setInterval()and setTimeout()。您必须选择最适合您需求的那个。

我不会发布一个实际的解决方案，因为你并没有真正在这个问题上表现出任何努力，但这应该为你指明正确的方向。