Javascript 如何使用setTimeout和setInterval显示HTML内容？

如何显示图像几秒钟，然后隐藏它并显示rest HTML部分

最初，我想显示图像2秒钟，并隐藏DIV直到时间。2秒钟后，隐藏图像并仅显示div

我试着用js做什么

setTimeout（（）=>document.getElementById（'Image'）.style.display='block'，2000）；
setInterval（（）=>document.getElementById（'Item'）.style.display='none'，2000）

时间：
加载
时，需要显示
图像
并隐藏
项
。在
setTimeout
回调中，隐藏
图像
并显示
项
，如下所示

仅供参考，
setTimeout
回调仅在
timeout
之后调用一次，但是
setInterval
回调是根据第二个参数中提到的
time
定期调用的


document.getElementById（'Image'）.style.display='block'；
document.getElementById（'Item'）.style.display='none'；
设置超时（（）=>{
document.getElementById（'Image'）.style.display='none'；
document.getElementById（'Item'）.style.display='block'；
}, 2000);

时间：
您可以将变量处理为当前显示的组件的布尔状态。然后在
setInterval
中，使用变量显示每次调用所需的元素。像这样：


var-imageShow=true；
document.getElementById（'Item'）.style.display='none'；
document.getElementById（'Image'）.style.display='block'；
设置间隔（（）=>{
document.getElementById（'Image'）.style.display=imageShow？'none'：'block'；
document.getElementById（'Item'）.style.display=imageShow'block'：'none'；
imageShow=！imageShow；
}, 2000);

时间：

Codepen=>
将图像显示设置为：“块”，将项目显示设置为：“无”，然后在2000毫秒后将两者都更改

const item = document.getElementById('Item');
item.style.display = 'none';

const image = document.getElementById('Image');
image.style.display = 'block';

setTimeout(() => {
  item.style.display = 'block';
  image.style.display = 'none';
}
 ,2000);

使用和的切换（）：


const wait=ms=>newpromise（fn=>setTimeout（fn，ms））；
const toggle_content=（）=>{
document.querySelector（“#Image”）.classList.toggle（“u-none”）；
document.querySelector（“#Item”）.classList.toggle（“u-none”）；
};
等待（2000）。然后（切换内容）
/*实用程序类*/
无{
显示：无；
}

您好
那么您为什么要对代码执行相反的操作？2秒钟后，显示图像并隐藏html
const item = document.getElementById('Item');
item.style.display = 'none';

const image = document.getElementById('Image');
image.style.display = 'block';

setTimeout(() => {
  item.style.display = 'block';
  image.style.display = 'none';
}
 ,2000);