标点符号加载“动画”，javascript？ [英] Punctuation loading "animation", javascript?

问题描述

我正在寻找一种显示标点加载动画的好方法。

I'm looking for a good way to display some punctuation loading "animation".

我想要的是这样的：

This will display at second 1: "Waiting for your input."
This will display at second 2: "Waiting for your input.."
This will display at second 3: "Waiting for your input..."
This will display at second 4: "Waiting for your input...."
This will display at second 5: "Waiting for your input."
This will display at second 6: "Waiting for your input.."
This will display at second 7: "Waiting for your input..."
This will display at second 8: "Waiting for your input...."

等等。

我开始围绕 spans 中的点，并认为我可以使用jquery循环遍历它们并再显示一个，多一个，然后再多一个，然后重置为1.但代码变得非常笨拙，所以我想知道你会怎么做？

I started by surrounding the dots in spans and thought I could loop through them with jquery and display one more, one more, one more, then reset to 1. But the code got very clumsy, so I wonder how you would do this?

推荐答案

制作一个点串是制作稀疏数组，然后连接所有具有所需字符的元素。

The trick to making a string of dots is to make a sparse Array and then join all the elements with the desired character.

var count = 0;
setInterval(function(){
    count++;
    var dots = new Array(count % 10).join('.');
    document.getElementById('loadingtext').innerHTML = "Waiting for your input." + dots;
  }, 1000);

这是一个现场演示。

这篇关于标点符号加载“动画”，javascript？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！