設置時間後顯示跨度類

Question

我想要實現的是使用javascript顯示第一個10秒後的第一個和第二個10秒後這些跨度。

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

不確定我將如何實現這個只是使用javascript感謝您的幫助。

Answer 1

使用的setTimeout

這裏，首先我提出兩個跨度到顯示：無，5秒後HTML是完全呈現即時顯示出來第一個div和示出後10秒第二個div

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

 

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

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

 
}

span { 
 
    display: none; 
 
}

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

希望這會有幫助

Answer 2

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; 
 
}

<div id='x' class='fiveSeconds'>Connecting...</div> 
 
<div id='y' class='tenSeconds'>Connected!</div>