顯示/隱藏圖像按鈕3秒延遲

這是html部分。我在這裏做的是當用戶點擊一次按鈕時，會調用showIMG函數來顯示圖像。顯示/隱藏圖像按鈕3秒延遲

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

我想點擊一個按鈕三秒鐘，然後圖像消失，並在兩次當你點擊一次按鈕，圖像出現在屏幕上。我意識到我必須使用切換功能，並將其與計時器合併，但我不知道如何這樣做。

來源

2014-05-21 djbingbing

setTimeout on first click and clearTimeout on second click。

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>

來源

2014-05-21 02:21:49 PitaJ

我不明白你在說什麼。我在哪裏添加這個？ – djbingbing

用'checkClick（）'替換'onclick'按鈕中的'flipImag（）'。將上面的代碼添加到您的Javascript文件中，該文件中包含「flipImag」代碼。 – PitaJ

我得到了第二部分仍然丟失的第一部分。是否有可能更多地解釋第二部分？ – djbingbing

顯示/隱藏圖像按鈕3秒延遲

回答

相關問題