Javascript 显示/隐藏图像按钮3秒延迟_Javascript_Html

Javascript 显示/隐藏图像按钮3秒延迟

javascript html

Javascript 显示/隐藏图像按钮3秒延迟,javascript,html,Javascript,Html,这是html部分。我在这里所做的是，当用户单击按钮一次时，会调用showIMG函数来显示图像 <!DOCTYPE html>  <html lang = "en"> <head> <title> Visibility contro

这是html部分。我在这里所做的是，当用户单击按钮一次时，会调用showIMG函数来显示图像

<!DOCTYPE html>
<!-- showHide.html
      Uses showHide.js
      Illustrates visibility control of elements
     -->
<html lang = "en">
  <head>
    <title> Visibility control </title>
    <meta charset = "utf-8" />
    <script type = "text/javascript"  src = "showHide.js" >
    </script>
  </head>
  <body>
    <form action = "">
      <div id = "saturn"  style = "position: relative; 
           visibility: visible;">
        <img src = "../images/saturn.png" 
             alt = "(Pictures of Saturn)" />
      </div>
      <p>
        <br />
        <input type = "button"  value = "Toggle Saturn"
               onclick = "flipImag()" />
      </p>
    </form>
  </body>
</html>

我想在三秒内点击一个按钮两次，然后图像消失，当你点击一次按钮时，图像就会出现在屏幕上。

我意识到我必须使用切换功能，并将其与计时器结合起来，但我不知道如何操作。

第一次单击时设置超时，第二次单击时清除超时

function checkClick(){
    if(window.flippingimage) clearTimeout(window.flippingimage);
    else window.flippingimage = setTimeout(3000, flipImag);
}

然后将此函数放在按钮的onclick事件上

编辑

将您的代码更改为此代码：

function flipImag() {
  dom = document.getElementById("saturn").style;  

// Flip the visibility adjective to whatever it is not now 
 if (dom.visibility == "visible")
   dom.visibility = "hidden";
 else
   dom.visibility = "visible";
}

function checkClick(){
    if(window.flippingimage) clearTimeout(window.flippingimage);
    else window.flippingimage = setTimeout(3000, flipImag);
}

以及HTML：

<html lang = "en">
  <head>
    <title> Visibility control </title>
    <meta charset = "utf-8" />
    <script type = "text/javascript"  src = "showHide.js" >
    </script>
  </head>
  <body>
    <form action = "">
      <div id = "saturn"  style = "position: relative; 
           visibility: visible;">
        <img src = "../images/saturn.png" 
             alt = "(Pictures of Saturn)" />
      </div>
      <p>
        <br />
        <input type = "button"  value = "Toggle Saturn"
               onclick = "checkClick()" />
      </p>
    </form>
  </body>
</html>


能见度控制

我不明白你在说什么。在何处添加此项？将按钮的

onclick

中的

flipImag（）

替换为

checkClick（）

。将上述代码添加到包含

flipImag

代码的Javascript文件中。我得到的第一部分在第二部分仍然丢失。第二部分可以再解释一下吗？

<html lang = "en">
  <head>
    <title> Visibility control </title>
    <meta charset = "utf-8" />
    <script type = "text/javascript"  src = "showHide.js" >
    </script>
  </head>
  <body>
    <form action = "">
      <div id = "saturn"  style = "position: relative; 
           visibility: visible;">
        <img src = "../images/saturn.png" 
             alt = "(Pictures of Saturn)" />
      </div>
      <p>
        <br />
        <input type = "button"  value = "Toggle Saturn"
               onclick = "checkClick()" />
      </p>
    </form>
  </body>
</html>