需要创建一个显示特定图片的按钮，然后在指定的毫秒持续时间后将其隐藏

Question

不确定如何处理任务或哪些特定代码可以工作，但我认为嵌套函数可能会做到这一点。我只是不知道如何正确实现它。

我可以在 HTML 中创建按钮并让它显示图片，但不确定如何编码/合并 setDuration(我在这里假设(函数部分。 对JS来说有点陌生，所以为一个希望简单的任务寻找最佳实践。衷心感谢任何帮助/投入！

Answer 1

您可以使用单击事件来显示图片并使用setTimeout将其隐藏。

.HTML：

<!-- button -->
<button id="btnId">Hey Click me!</button>
<!-- image to hide and show -->
<img src="img_path_here" alt="" id="imageID" style="display: none" />

爪哇语

    // add click event to button
    document.getElementById("btnId").addEventListener('click', function() {
        //show image
        document.getElementById('imageID').style.display='block';
        // hide image after 1 sec.
        setTimeout(function() {
          document.getElementById('imageID').style.display='none';
        }, 1000);
    });

Answer 2

给你的图片一个 ID 并使用：

setTimeout(()=>{
    document.getElementById("id").remove();
},200)

Answer 3

您可以使用

setTimeout图片消失的时间。它会像这样。

function displayPicture() {
    // code that displays picture
    image.display = "block";
    setTimeout(()=> {
    // code that hides the picture
    image.display = "none";
    // the picture will disappear in 5 seconds
    }, 5000);
}