設定時間後に表示スパンクラス

Question

私が達成しようとしているのは、最初の1秒間に5秒、2回目に10秒間の両方のこれらのスパンを表示することです。

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

これを実現する方法については、javascriptを使用していただきありがとうございます。

Answer 1

setTimeoutを使用

ここ

は、最初に私は、ディスプレイの両方のスパンを作った：なし、5秒HTMLは完全に示すIMをレンダリングされた後の最初の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>