javascript - 如何在不打开另一个窗口的情况下在屏幕上弹出图像

因此，我做了一个简单的游戏，在屏幕上有一堆图片，当您单击它们时，您就会明白。这是该代码：

<script>
$(document).ready(function(){
  $("p").click(function(){
    $(this).hide();
    picturesRemoved++;
  });
});
</script>

然后我在代码后面也会有这个：

var picturesRemoved = 0;

这是图片：

<br><p><img src="test.jpg" border="0" width="1001" height="159"></p>

我要的是使图片一直弹出在屏幕上，直到您单击一定数量的图片为止。一定数量应该是20。我可以使用CSS或JavaScript，或者HTML或jQuery。 （或全部。）

谢谢！

最佳答案

HTML示例：

<div class="cut_oak_tree">
  <img src="http://www.pbpixels.com/x/images/oak.png" onclick="myFunction(this)" />
  <img src="http://www.pbpixels.com/x/images/oak.png" onclick="myFunction(this)" />
  <img src="http://www.pbpixels.com/x/images/oak.png" onclick="myFunction(this)" />
</div>
<div id='countervalue'>0</div>

和Javascript：

var inter;

$(document).ready(function(){
    inter  = setInterval(function(){
        $('.cut_oak_tree').append('<img src="http://www.pbpixels.com/x/images/oak.png"onclick="myFunction(this)">');
    },1000);
});

var counter = 0;

function myFunction(img) {
    counter++;
    document.getElementById('countervalue').innerHTML = counter;
    img.onclick = null;
    img.remove();
    if(counter === 20){
        clearInterval(inter);
    }
}

更新

尝试这个：

http://jsfiddle.net/nd2w3/2/

关于javascript - 如何在不打开另一个窗口的情况下在屏幕上弹出图像，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/21755585/