在計時器代碼上顯示圖像。想添加關閉功能

我不能爲我的生活弄清楚如何添加退出功能到我的代碼。我想要它，所以用戶可以點擊屏幕上的任何位置以使圖像消失。有人可以幫忙嗎？在計時器代碼上顯示圖像。想添加關閉功能

HTML

<body> 
<div align="center"> 
<img id="image" src="image1.png" height="200" width="200">

var hidden = false; 

setInterval(function(){ 
document.getElementById("image").style.visibility= hidden ? "visible" : ""; 
hidden = !hidden; 
},2000);

來源

2016-12-02 Charie Burns

你能不能解釋清楚什麼是你要實現的，什麼是你目前的問題？ – maheshiv

我想要它，當圖像出現時，它保持。直到用戶（我網站上的用戶）點擊它（屏幕上的任何位置）。@maheshiv –

默認爲visible。當你想隱藏它時，你需要設置爲hidden。

而且您需要綁定click事件中的代碼。

var hidden = false; 
 
window.document.addEventListener('click', function() { 
 
    document.getElementById("image").style.visibility = hidden ? "" : "hidden"; 
 
    hidden = !hidden; // comment out this line if you do not want to show again on click 
 
}, false);

<img id="image" src="https://dummyimage.com/200x200" height="200" width="200">

更新2，如果你想超時碼2秒後，顯示的圖像（在評論提到的），然後當你點擊無處可藏它永遠使用

var image = document.getElementById("image"); 
 

 
setTimeout(function() { 
 
    image.style.visibility = 'visible'; 
 
    window.document.addEventListener('click', function() { 
 
    image.style.visibility = 'hidden'; 
 
    }, false); 
 
}, 2000);

#image { 
 
    visibility: hidden; 
 
}

<img id="image" src="https://dummyimage.com/200x200" height="200" width="200">

來源

2016-12-02 11:06:44

這很棒，只有我需要定時器.. –

@CharieBurns添加了使用超時的更新，並且點擊只是改變'hidden'值。 –

對不起，我不確定我們是否在同一頁面上。我想在X時間這樣，圖像就會出現。然後，當用戶點擊它時，保持隱藏狀態。（直到頁面刷新。） –

<div align="center"> 
<img id="image" src="image1.png" height="200" width="200"> 
</div> 

<script>  
var hidden = false; 

setInterval(function(){ 
    document.getElementById("image").style.visibility = "visible" ? "hidden" : "visible"; 
},2000); 
</script>

來源

2016-12-02 11:05:29

使用jQuery使它簡單..

Codepen

$(document).ready(function(){ 
    $('body').click(function(){ 
    $('#image').hide(); 
    }) 
})

來源

2016-12-02 11:06:32

你可以使用這個。

 $(window).click(function() { 
    //Hide the menus if visible 
document.getElementById("image").hide(); 
     });

來源

2016-12-02 11:10:36

var hidden = false; 
 

 
setInterval(function(){ 
 
document.getElementById("image").style.visibility= hidden ? "visible" : ""; 
 
hidden = !hidden; 
 
},2000); 
 

 
function myremove(){ 
 
    document.getElementById("image").style.display = "none"; 
 
}

<body onclick="myremove()"> 
 
<div align="center"> 
 
<img id="image" src="http://cdn.sstatic.net/Sites/stackoverflow/img/[email protected]?v=73d79a89bded&a" height="200" width="200" style="display:block;"> 
 
    </div> 
 
</body>

來源

2016-12-02 11:11:51 alifallahi

在計時器代碼上顯示圖像。想添加關閉功能

回答

相關問題