Javascript 在设定的时间后显示“跨度”类

我试图实现的是使用javascript显示这两个跨度，第一个跨度为5秒，第二个跨度为10秒

<span class="5-seconds">Connecting...</span>
<span class="10-seconds">Connection Established<span>

正在连接。。。
建立连接

不确定如何使用javascript实现这一点，谢谢您的帮助。

使用SetTimeout

在这里，最初我做了两个跨度来显示：无，在html完全呈现后5秒显示第一个div，10秒后显示第二个div

window.onload=function（）{
显示跨度（'第一'，5）；
显示跨度（'秒'，10）；
}
函数ShowSpans（类名、时间）{
setTimeout（函数（）{
document.getElementsByClassName（classname）[0].style.display=“block”；
}，时间*1000）；
}

span{
显示：无；
}

正在连接。。。
已建立连接

setTimeout（函数（）{
document.getElementById（“x”）.className=“隐藏”；
document.getElementById（'y'）.style.display='block'；
}, 5000);
setTimeout（函数（）{
document.getElementById（'y'）.style.display='none'；
}, 10000);
.5秒{
背景颜色：浅蓝色；
}
.tenSeconds{
背景颜色：浅绿色；
显示：无；
}
.隐藏{
显示：无；
}
正在连接。。。
连接请阅读。关键短语：“搜索、研究”和“解释……任何阻碍你自己解决问题的困难”。我认为我的解决方案更好，看看吧！