Javascript 点点点点点点作为加载？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4639716/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Dot dotdot dotdotdot as loading?
提问by Thew
I wanna create some loading dots, like this:
我想创建一些加载点，如下所示：
At 0000 miliseconds the span content is: .
在 0000 毫秒时，跨度内容为： .
At 0100 miliseconds the span content is: ..
在 0100 毫秒时，跨度内容为： ..
At 0200 miliseconds the span content is: ...
在 0200 毫秒时，跨度内容为： ...
In a loop.
在一个循环中。
What is the best / easiest way to make it?
最好/最简单的制作方法是什么？
回答by Gordon Gustafson
<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>
Or you can get fancy and have them go forward and back:
或者你可以花哨，让它们前进和后退：
<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>
Or you could make them go back and forth randomly:
或者你可以让它们随机来回：
<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>
Or I could get a life and stop posting additional snippets.... :D
或者我可以过上生活并停止发布额外的片段......：D
As Ivo said in the comments, you need to clear the intervalat some point, especially if you are not loading a new page after the waiting is finished. :D
正如Ivo在评论中所说，您需要在某个时候清除间隔，特别是如果您在等待完成后没有加载新页面。:D
回答by Veiko J??ger
Or.. you can do it with CSS ;)
或者..你可以用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;}}
回答by user113716
Example:http://jsfiddle.net/subTZ/
示例：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);
回答by HockChai Lim
This is similar to Veiko J??ger's solution. With this solution, the color of the dots is the same as the text it associates with.
这类似于 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>回答by lukaszkups
Example: https://codepen.io/lukaszkups/pen/NQjeVN
示例：https: //codepen.io/lukaszkups/pen/NQjeVN
You can animate css contenttoo!
您也可以为 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: ''
回答by Plikard
let span = document.querySelector('span');
i = 0;
setInterval(() => {
span.innerText = Array(i = i > 2 ? 0 : i + 1).fill('.').join('');
}, 500)
回答by yckart
In my mind, the easiest way is an if/elsestatement.
在我看来，最简单的方法是if/else语句。
However, a bit math to calculate the dots-length and the famous Array.join-hackto repeat the dot-char, should do the trick too.
然而，计算点长度的一点数学和著名的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);You could improve the readability a bit, by wrapping the "count-up-and-down"-part and "string-repetition" in separate functions.
您可以通过将“向上和向下计数”部分和“字符串重复”包装在单独的函数中来稍微提高可读性。
