javascript - 如何让 img 在页面加载后出现并在时间后消失？

Question

愚蠢或基本的问题，但我正在学习 HTML/CSS/JS，但我缺少 JS 部分。

我需要一些帮助，让 img 在页面加载后出现(比方说)延迟 3 秒，保持可见 4 秒然后消失。可能只有 JS 才有可​​能，而 JS 中的“我什至没有基础”。

设法让它在 4 秒后隐藏，但需要先延迟它

<div>
<img src="images/browsetip.png" class="browse-tip" id="imgHideShow">
</div>



<script>
  function doHide(){
    document.getElementById( "imgHideShow" ).style.display = "none" ;
}
  function hideImage(){
    setTimeout( "doHide()", 4000 ) ;
}
</script>

Image for more coherency

Answer 1

希望这对你有帮助。在初始阶段，你可以使用 cssand 隐藏图像，在加载所有 dom 内容后，你可以在 3 秒后显示图像。然后在显示图像后，你可以在 4 秒后隐藏它延迟。

<style>
    .browse-tip{
      display:none;
    }
  </style>
<div>
<img src="/image/3Hj95.png" class="browse-tip" id="imgHideShow">
</div>



<script>
  document.addEventListener("DOMContentLoaded", function(){
    setTimeout(function(){
      showImage();
      setInterval(hideImage, 4000);
    },3000);
  });
  function hideImage(){
    document.getElementById( "imgHideShow" ).style.display = "none" ;
  }
  function showImage(){
    document.getElementById( "imgHideShow" ).style.display = "block" ;
  }
</script>