Question

这是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>

这是javascript文件

// showHide.js
//   Illustrates visibility control of elements

// The event handler function to toggle the visibility 
//    of the images of Saturn 

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";
}

我想在三秒钟内单击一次按钮两次，然后图像消失，当您单击按钮一次时，图像将出现在屏幕上。我意识到我必须使用切换功能并将其与计时器合并，但我不知道该怎么做。

Answer 1

第一次点击时的setTimeout和第二次点击时的clearTimeout。

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>

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

1 个答案: