Onclick() 事件：图像随机出现答案

【问题标题】：Onclick() event: random appearance of imageOnclick() 事件：图像随机出现
【发布时间】：2023-03-28 18:40:02
【问题描述】：

我的代码在网页的中心显示了一张图片，如果点击是在图片外部或内部，则会执行 2 种不同的操作。我想在每个 onclick() 事件中随机更改图像的位置（无论点击是进还是出），同时保持在页面初始大小内。

这两个动作都正确完成了，但是图像没有改变位置。谁能告诉我应该改变什么？

<html>
  <head>
    <title>random position</title>
  </head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js">
   $(window).height();
   $(window).width(); 
  </script>

  <body>

    <style>

    #myImage { position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    margin:auto;  }
    </style>

    <script>
function moveImg() {
  var img = document.getElementById("myImage");

  var width = $(img).width();
  var height = $(img).height();


  document.addEventListener("click", function(e) {
    var offset = $(img).offset();
    if (e.target === img) {
      action 1;
    } 
    else {
     action 2;
    }
    // GENERATE RANDOM LOCATION IN BOTH CASES
    img.offset.left = Math.floor(Math.random() * (window.width()- 0) + 0);
    img.offset.top = Math.floor(Math.random() * (window.height()- 0) + 0);


  }, false);
}
    </script>
      <img id="myImage"  src="img.gif" onclick="moveImg()">
  </body>
</html>

【问题讨论】：

action 1; 和 action 2; 是什么意思？我的猜测是执行此代码时会出现 JS 错误。您还会在每次点击时不断添加越来越多的事件侦听器...
不，如果我在没有随机位置部分的情况下运行相同的代码可以正常工作。在我使用另一种方法生成 rondom 位置之前（如下）。它有效，但并不完全正确： /* var x = Math.floor(Math.random() * (max - min) + min); var y = Math.floor(Math.random() * (max - min) + min); img.style.top = x + "px"; img.style.left = y + "px";*/
对不起，这是我用来改变位置的代码： var x = Math.floor(Math.random() * 400); var y = Math.floor(Math.random() * 400); img.style.top = x + "px"; img.style.left = y + "px";

标签： javascript jquery html random onclick

【解决方案1】：

这里有一些问题。当用户单击时，您正在调用一个函数，但在该函数中，您为单击该图像分配了一个事件侦听器。在每次点击时不断添加越来越多的事件侦听器没有多大意义。我更改了下面的代码来演示一次添加事件侦听器，而不是每次点击。

其次，action 1 和 action 2 没有任何意义。我将这些注释掉了，因为我不确定您要在那里完成什么。

您还错误地尝试更改图像的顶部和左侧属性。我更正了它以使用 css() 函数。

以下代码显示了 javascript 中的更改。或者你可以click here

$(document).ready(function() {

  var img = document.getElementById("myImage");

  var width = $(img).width();
  var height = $(img).height();


  document.addEventListener("click", function(e) {
    var offset = $(img).offset();
    if (e.target === img) {
      //action 1;
    } 
    else {
     //action 2;
    }
    // GENERATE RANDOM LOCATION IN BOTH CASES
    $(img).css({
    top: Math.floor(Math.random() * $(window).height()),
    left: Math.floor(Math.random() * $(window).width())});
  }, false);
});

【讨论】：

嗨 Sam，是的，动作 1 和动作 2 只是我在 if-else 语句中所做的事情的名称。感谢您调整事件侦听器，但您的代码仍然不能解决我在初始页面大小内（随机）移动图像的主要问题。我怎么能这样做？
如果我使用下面的代码，图像总是显示在屏幕的右侧，而我希望图像以相同的概率出现在屏幕的任何部分左侧：Math.floor( Math.random() * ($(window).width()- width) + 0)，顶部：Math.floor(Math.random() * ($(window).height()- height) + 0)} );
@Gigi “屏幕右侧”是什么意思。我刚刚检查过，它应该确实有效。 Math.random() 返回一个介于 0 和 1 之间的数字，因此将其乘以窗口宽度/高度会选择窗口内的随机位置。我刚刚测试了它，它似乎工作。我附上了一个应该证明它工作的小提琴
我的意思是图像最初显示在屏幕的中心，每当我点击它时，它总是停留在初始中心位置的右侧和下方。因此，我认为我分配新的顶部和左侧值的方式有误？我希望这对你有意义..
我认为您的页面大小会增加，因为您交换了顶部和左侧（当使用高度和宽度作为最大尺寸时）？