Javascript 从x时间到x时间显示文本（下一个文本将继续显示），如演示文稿

我试着像演示文稿一样显示文本。我试过这个密码

setTimeout(fade_out, 2000);

function fade_out() {
$("#msg").fadeOut().empty();
}

及

John（首次出现）
能源部（第二次出现）

但这只是显示，然后隐藏了这个词

如何使文本连续出现和消失（比如函数在x时间出现和消失在y时间），因为我对Javascript知之甚少

例如：

---

这里有一个简单的解决方案，使用setInterval和clearInterval方法，当“幻灯片放映”完成时，它将停止

let text=[
“嗨！”，
“我们正在为你安排”，
“文本3”
]
var i=0；
var timer=setInterval（函数（）{
document.getElementsByTagName（'container'）[0].innerHTML=text[i]；
++一,；
if（i==text.length）{
窗口清除间隔（计时器）；
document.getElementById（“text_“+i）.style.cssText=“动画：1s淡入淡出；不透明度：1；”
}
}，1500）

正文{
背景：黑色；
颜色：白色；
字体系列：无衬线；
保证金：0
}
*{
-webkit框大小：边框框；
框大小：边框框
}
容器{
显示器：flex；
证明内容：中心；
对齐项目：居中；
宽度：100vw；
高度：100vh；
}
.文本{
字号：2rem；
不透明度：0；
动画：1.5s fadeIn轻松
}
@关键帧淡入淡出{
0%{不透明度：0}
50%{不透明度：1}
100%{不透明度：0}
}
@关键帧淡入淡出{
从{opacity:0}
到{opacity:1}
}

您可以使用和。更改值时，可以使用

fadeIn（）

请检查下面的代码片段

函数setText（）{
$（'#msg span'）.fadeOut（函数（）{
$（this）.text（新日期（）.toLocaleString（））
}).fadeIn（）；
setTimeout（函数（）{
setText（）；
}, 2000);
}
setTimeout（函数（）{
setText（）；
}, 2000);
.msg{display:flex；justify content:center；align items:center；width:100%；height:122px}body{background:#000；color:#fff；字体系列：无衬线；边距：0}

日期时间更改从每2秒开始
您也可以单独使用CSS来实现此效果

这是一种完全合法的方法，因为CSS负责web文档中的表示层

工作示例：


正文{
字体系列：arial、helvetica、无衬线字体；
颜色：rgb（255、255、255）；
背景色：rgb（0,0,0）；
}
.幻灯片{
位置：绝对位置；
排名：0；
左：0；
显示器：flex；
证明内容：中心；
对齐项目：居中；
宽度：100%；
身高：70%；
字体大小：6vw；
不透明度：0；
}
.幻灯片-1{
动画：放映幻灯片3s；
}
.幻灯片-2{
动画：放映幻灯片3s线性3s；
}
.幻灯片-3{
动画：放映幻灯片3s线性6s；
}
.幻灯片-4{
动画：放映幻灯片3s线性9s；
}
.幻灯片-5{
动画：放映幻灯片3s线性12s；
}
@关键帧显示幻灯片{
0%{不透明度：0；}
20%{不透明度：1；}
80%{不透明度：1；}
100%{不透明度：0；}
}
你好

我们正在为您做准备
到达那里
再多一点

谢谢您的耐心。

听起来您可能想退房。谢谢，效果很好，我不仅可以制作幻灯片，还可以设置计时器，非常感谢。如果你也能对这个答案投赞成票，我将非常感激。谢谢你，@PalgunoWicaksono。

<div id="msg"> John (First appear)</div>
<div id="msg"> Doe (Second appear)</div>