Question

我不能为我的生活找出如何在我的代码中添加退出功能。我想要它，以便用户可以点击屏幕上的任何地方以使图像消失。有人可以帮忙吗？

HTML

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

JS

var hidden = false;

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

Answer 1

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

Answer 2

使用jQuery使其变得简单..

Codepen

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

Answer 3

默认值为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">

Answer 4

你可以用它。

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

Answer 5

＆＃13;

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

＆＃13;

<body onclick="myremove()">
<div align="center">
<img id="image" src="http://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon@2.png?v=73d79a89bded&a" height="200" width="200" style="display:block;">
  </div>
</body>

＆＃13;

在计时器代码上显示图像。想要添加近距离功能

5 个答案: