在x秒后顯示一個div，並在y秒后顯示另一個div

Question

我對此很陌生，但我嘗試在1秒后顯示div1，並在5秒后顯示div2。 目前，僅div2在1秒后顯示。 請幫助我修復JavaScript。

我還想知道在顯示div2之后如何隱藏div1。

我的代碼：

<div id="div1" style="visibility: hidden">Reveal Div 1 after 1 second</div>
<div id="div2" style="visibility: hidden">Reveal Div 2 after 5 seconds</div>

<script type="text/javascript">
function showIt() {
  document.getElementById("div1").style.visibility = "visible";
}
setTimeout("showIt()", 1000); // after 1 sec

function showIt() {
  document.getElementById("div2").style.visibility = "visible";
}
setTimeout("showIt()", 5000); // after 5 secs
</script>

Answer 1

您不能有兩個具有相同名稱的功能。 將第二部分更改為

function showIt2() {
  document.getElementById("div2").style.visibility = "visible";
}
setTimeout("showIt2()", 5000); // after 5 secs

演示： http ： //jsfiddle.net/W9YU5/

Answer 2

兩個問題。

1. 每個函數必須有一個不同的名稱。
2. 您可以在setTimeout中調用一個函數，如setTimeout(showIt, 5000); // after 5 secs setTimeout(showIt, 5000); // after 5 secs

jsFiddle示例