Question

我正在制作一个点击游戏来学习和练习JavaScript，但我遇到了问题。下面的功能应该在随机位置显示图片，但它不起作用。评论的部分是没有用的东西。

window.setInterval(function(){
if (clicks >= 10){
var zed = Math.floor(Math.random() * 10) + 1;
if (zed === 10){
    /*function pos(){
    var x = Math.floor(Math.random() * (500 - 270) ) + 270;
    var y = Math.floor(Math.random() * (500 - 120) ) + 120;
    var g = document.getElementById("gold");
    g.style.left = x + "px";
    g.style.top = y + "px";
    g.style = "visibility:visible";
    };*/
    document.getElementById("gold").style="visibility:visible";  
    alert ("gold");
    setTimeout(function(){
     document.getElementById("gold").style="visibility:hidden";   
    },10000);
}
}
},50000);

有谁知道我做错了什么？

修改：HTML

<div id="big" onclick="feed();counter(1);">
<div id="gold" style="visibility:hidden"><img src="gold.png"  onclick="lucky()"></div>

CSS

#big{
position: absolute;
left: 270px;
top: 120px;
width: 80%;
height: 600px;
margin: 2px;
background-image: url(big.png); background-repeat: no-repeat;
background-position: center;
border: 3px dashed #5dade2;
}

Answer 1

这至少可以做些什么 - 不确定它为什么不会向下移动

function pos() {
  var x = Math.floor(Math.random() * (500 - 270)) + 270;
  var y = Math.floor(Math.random() * (500 - 120)) + 120;
  var g = document.getElementById("gold");
  g.style.left = y + "px";
  g.style.top = x + "px";
  g.style = "visibility:visible";
  g.innerHTML+=".";
  console.log(x,y)
}

var clicks = 0;
window.onload = function() {
  document.getElementById("gold").onclick = function() {
    clicks++;
    pos();    
  }
  window.setInterval(function() {
    if (clicks >= 10) {
      clicks = 0;
      var zed = Math.floor(Math.random() * 10) + 1;
      if (zed === 10) {
        console.log("gold");
        setTimeout(function() {
          document.getElementById("gold").style = "visibility:hidden";
        }, 1000);
      }
    }
  }, 5000);
}

#container {
    position: relative;
    height:500px;
    width:500px;
    margin: 10px;
    background-color: grey
}

div > div {
    position: absolute;
    top: 20px;
    right: 10px;
    margin: 0;
    background: gold
}

<div id="container" class="relative">
  <div id="gold" class="absolute">Gold</div>
</div>

随机图像位置

1 个答案: