Javascript 使用CSS和JS按时间间隔显示文本

我想使用

setInterval（）

JS函数创建一种视觉效果，在角度应用程序中，一次显示一个字符的文本，每个字符的间隔为

100

ms

请注意，这发生在

index.html中的

var divs=['rBox'，'aBox'，'tBox'，'sBox']；
var指数=-1；
函数displayChars（）{
用于（divs容器）{
document.getElementById（container.style.visibility='hidden'；
}
var fun=设置间隔（显示，100）；
}
函数显示（）{
如果（指数<4）{
document.getElementById（divs[++index]）.style.visibility='visible'
}否则{
clearInterval（乐趣）；
}
}
displayChars（）

1.
2.
3.
4.
fun
未全局声明

而
索引
增加太多

对代码的粗略更新：


var divs=['rBox'，'aBox'，'tBox'，'sBox']；
var指数=-1；
var fun
函数displayChars（）{
用于（divs容器）{
document.getElementById（container.style.visibility='hidden'；
}
fun=设置间隔（显示器，100）；
}
函数显示（）{
如果（指数<3）{
document.getElementById（divs[++index]）.style.visibility='visible'
}否则{
clearInterval（乐趣）；
}
}
displayChars（）

1.
2.
3.
4.

var divs=['rBox'，'aBox'，'tBox'，'sBox']；
var指数=0；
var-fun=null；
函数displayChars（）{
用于（divs容器）{
document.getElementById（container.style.visibility='hidden'；
}
fun=设置间隔（显示器，100）；
}
函数显示（）{
如果（指数<4）{
document.getElementById（divs[index]）.style.visibility='visible'
索引++；
}否则{
clearInterval（乐趣）；
}
}
displayChars（）

1.
2.
3.
4.
经过轻微修改后，它开始工作，请参见下文。我将索引更改为从0开始，并与
divs[index++]
一起使用（因此使用然后递增），并将其与
divs.length
进行比较，而不是硬编码的
4
。我还将变量
fun
放在全局级别


var divs=['rBox'，'aBox'，'tBox'，'sBox']；
var指数=0；
var fun=-1；//定时器手柄
函数displayChars（）{
用于（divs容器）{
document.getElementById（container.style.visibility='hidden'；
}
fun=设置间隔（显示器，100）；
}
函数显示（）{
if（索引<分段长度）{
document.getElementById（divs[index++]）.style.visibility='visible'
}否则{
clearInterval（乐趣）；
}
}
displayChars（）

1.
2.
3.
4.

变量
fun
必须是全局变量，否则
display（）
不能
访问它
不要忘记将
容器
作为实际变量声明在
for…of
循环中
您需要经常使用递增
索引



var divs=['rBox'，'aBox'，'tBox'，'sBox']；
var指数=-1；
var fun；
函数displayChars（）{
for（divs的var容器）{
document.getElementById（container.style.visibility='hidden'；
}
fun=设置间隔（显示器，100）；
}
函数显示（）{
如果（指数<3）{
document.getElementById（divs[++index]）.style.visibility='visible'；
}否则{
clearInterval（乐趣）；
}
}
displayChars（）

1.
2.
3.
4.
纯CSS解决方案（如果有选项的话）如下所示：


.rats div>div{
不透明度：0；/*或“可见性：隐藏”*/
动画：不透明度。向前1s；
}
.rats div>div:n个子（2）{动画延迟：.1s}
.rats div>div:n个子（3）{动画延迟：.2s}
.rats div>div:n个子（4）{动画延迟：.3s}
@关键帧不透明度{
至{opacity:1}/*或“可见性：可见/初始”*/
}

1.
2.
3.
4.