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

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" />

Javascript

    // 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);
}