设置时间后显示跨度类

问题描述：

我想要实现的是使用javascript显示第一个10秒后的第一个和第二个10秒后这些跨度。设置时间后显示跨度类

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

不确定我将如何实现这个只是使用javascript感谢您的帮助。

请阅读[问]。重要短语：“搜索和研究”和“解释......阻止你自己解决它的任何困难”。 –

我认为我的解决方案更好，请查看！ –

答

使用的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>

希望这会有帮助

答

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>

设置时间后显示跨度类

相关推荐