在设定时间后显示跨度类

Question

我想要实现的是使用javascript显示这些跨度，第一个为5秒，第二个为10秒。

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

不确定如何使用javascript感谢你的帮助。

Answer 1

使用SetTimeout

在这里，我最初制作两个跨度：none，html完全渲染后5秒显示第一个div，10秒后显示第二个div

＆＃13;

＆＃13;

window.onload = function() {
  ShowSpans('first', 5);
  ShowSpans('second', 10);
}


function ShowSpans(classname, time) {
  setTimeout(function() {

    document.getElementsByClassName(classname)[0].style.display = "block";
  }, time * 1000);

}

＆＃13;

span {
  display: none;
}

＆＃13;

<span class="first">Connecting...</span>
<span class="second">Connection Established<span>

＆＃13;

＆＃13;

＆＃13;

希望这有帮助

Answer 2

users

setTimeout(function() {
  document.getElementById("x").className = "hidden";
  document.getElementById('y').style.display = 'block';
}, 5000);
setTimeout(function() {
  document.getElementById('y').style.display = 'none';
}, 10000);

.fiveSeconds {
  background-color: lightblue;
}
.tenSeconds {
  background-color: lightgreen;
  display: none;
}
.hidden {
  display: none;
}