点点点点点点作为加载？
Posted
技术标签:
【中文标题】点点点点点点作为加载？【英文标题】：Dot dotdot dotdotdot as loading? 【发布时间】：2011-06-06 02:22:39 【问题描述】：我想创建一些加载点，像这样：
在 0000 毫秒处，span 内容为：.
在 0100 毫秒时，span 内容为：..
在 0200 毫秒时，span 内容为：...
在循环中。
最好/最简单的方法是什么？
【问题讨论】：
如果你只添加“.”跨度内容每 100 毫秒，它不起作用吗？ span.innerhtml += "."; 我喜欢这个直观的标题。 优秀的标题！！！ 【参考方案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>
或者我可以得到生命并停止发布额外的 sn-ps.... :D
正如 Ivo 在 cmets 中所说，您有时需要 clear the interval，尤其是在等待完成后您没有加载新页面的情况下。 :D
【讨论】：
现在在 3 个点之后让间隔永远持续下去有什么意义？ ;) @Ivo: Errm...当有三个点时，它会回到零。等等。对于加载动画左右。 @thejh 嗯？啊...对另一个答案有更新评论，总是喜欢不完整/措辞错误的问题。 有什么方法可以在 React 应用中使用它？ 最好的办法是用css，看下一个答案【参考方案2】：或者..你可以用 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
【讨论】：
兼容旧浏览器吗？ @BabuJames “什么”是旧的？ IE8之类的？不，很遗憾没有！ developer.mozilla.org/docs/Web/CSS/animation 如何让它更快？ 非常干净整洁的方式 @MoneceSolis 将1s 更改为 0.5s 以使其运行更快【参考方案3】：
示例：https://codepen.io/lukaszkups/pen/NQjeVN
您也可以为 css content 制作动画！
// HTML
<p>Loading<span></span></p>
// CSS (nested SASS)
p
span
&:before
animation: dots 2s linear infinite
content: ''
@keyframes dots
0%, 20%
content: '.'
40%
content: '..'
60%
content: '...'
90%, 100%
content: ''
【讨论】：
这是一个简单有效的 IMO 解决方案。 谢谢！我什至写了一篇关于它的博客文章：D lukaszkups.net/notes/… ***.blog/2014/09/16/…【参考方案4】：示例： 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);
【讨论】：
是的，但这会在一段时间后产生 ...................................跨度长。 3个点后如何清除？ @Thew：每次只测试innerHTML的length，然后使用我包含的clearInterval。我不知道你只想要 3 个。
***.blog/2014/09/16/…【参考方案5】：
这类似于 Veiko Jääger 的解决方案。使用此解决方案，点的颜色与其关联的文本相同。
<html>
<head>
<style>
.appendMovingDots:after
content: ' .';
animation: dots 3s steps(1, end) infinite;
@keyframes dots
0%, 12.5%
opacity: 0;
25%
opacity: 1;
37.5%
text-shadow: .5em 0;
50%
text-shadow: .5em 0, 1em 0;
62.5%
text-shadow: .5em 0, 1em 0, 1.5em 0;
75%
text-shadow: .5em 0, 1em 0, 1.5em 0, 2em 0;
87.5%, 100%
text-shadow: .5em 0, 1em 0, 1.5em 0, 2em 0, 2.5em;
</style>
</head>
<body>
<span class="appendMovingDots" style="font-size:20px">This is a test</span>
</body>
</html>【讨论】：
【参考方案6】：
let span = document.querySelector('span');
i = 0;
setInterval(() =>
span.innerText = Array(i = i > 2 ? 0 : i + 1).fill('.').join('');
, 500)loading<span></span>【讨论】：
***.blog/2014/09/16/…【参考方案7】：在我看来，最简单的方法是if/else 声明。
但是，计算点长度和著名的 Array.join-hack 来重复点字符的一些数学运算也应该可以解决问题。
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);您可以通过将“count-up-and-down”部分和“string-repetition”包装在单独的函数中来稍微提高可读性。
【讨论】：
【参考方案8】：使用String.prototype.repeat()，您可以：
var element = document.querySelector(...);
var counter = 0;
var intervalId = window.setInterval(function()
counter += 1
element.innerHTML = '.'.repeat(1 + counter % 3)
, 350);
// Use the following to clear the interval
window.clearInterval(intervalId)
注意：String.prototype.repeat()
【讨论】：
以上是关于点点点点点点作为加载？的主要内容，如果未能解决你的问题，请参考以下文章