在 html/javascript 中刷新页面时，如何更改图像的位置？

Question

I need this one image to be in a random position on the screen every time i refresh the page, i found a javascript code that could work but i just don't know how to make it work.每次刷新页面时，我都需要这张图片在屏幕上的随机位置，我发现了一个可以工作的 javascript 代码，但我只是不知道如何使它工作。

this is my html这是我的 html

  <body>
    <p>
      find rufus
    </p>
    <img src="molerat.jpg" id="molerat"></img>
  </body>

javascript: javascript:

console.log();
function onloadFunction() {
  var amount = 10;
  var arrayIDs = "molerat"; 

  for (i=1;i<=amount;i++) {

   var element = document.getElementById(arrayIDs[i-1]);
   var positionInfo = element.getBoundingClientRect();
   var imgHeight = positionInfo.height;
   var imgWidth = positionInfo.width;


   var screenWidth = window.innerWidth;
   var screenHeight = window.innerHeight;

   var imgLeft = Math.floor(Math.random() * (screenWidth - imgWidth));
   var imgTop= Math.floor(Math.random() * (screenHeight - imgHeight));

   document.getElementById(arrayIDs[i-1]).style.top = imgTop+"px";
   document.getElementById(arrayIDs[i-1]).style.left = imgLeft+"px";
  }
}

css: css：

body{
  background-color:white;
  font-family: monospace;
  font-size: 50px;
}

img {
  position: absolute;
}

Answer 1

arrayIDs is not an array. arrayIDs 不是数组。

var arrayIDs = "molerat"; needs to be var arrayIDs = ["molerat"];需要是var arrayIDs = ["molerat"];

Also you only have 1 image so the amount needs to be set to 1此外，您只有 1 张图像，因此数量需要设置为 1

 function onloadFunction() { var amount = 1; var arrayIDs = ["molerat"]; for (i=1;i<=amount;i++) { var element = document.getElementById(arrayIDs[i-1]); var positionInfo = element.getBoundingClientRect(); var imgHeight = positionInfo.height; var imgWidth = positionInfo.width; var screenWidth = window.innerWidth; var screenHeight = window.innerHeight; var imgLeft = Math.floor(Math.random() * (screenWidth - imgWidth)); var imgTop= Math.floor(Math.random() * (screenHeight - imgHeight)); document.getElementById(arrayIDs[i-1]).style.top = imgTop+"px"; document.getElementById(arrayIDs[i-1]).style.left = imgLeft+"px"; } } onloadFunction();

 body{ background-color: white; font-family: monospace; font-size: 50px; } img { position: absolute; }

 <p> find rufus </p> <img src="https://picsum.photos/200" id="molerat" />

Answer 2

Your onloadFunction needs to be invoked, when the page loads.当页面加载时，您的onloadFunction需要被调用。 If you're using jQuery in your project, then $(document).ready(...) is the way to go:如果您在项目中使用jQuery ，那么$(document).ready(...)是您的最佳选择：

$(onloadFunction)

Otherwise you might want to check this question for pure JavaScript $(document).ready(...) alternatives.否则你可能想检查这个问题是否有纯 JavaScript $(document).ready(...)替代方案。

在 html/javascript 中刷新页面时，如何更改图像的位置？

问题描述

2 个解决方案

解决方案1
0 已采纳 2020-09-16 08:51:15

解决方案2
0 2020-09-16 09:21:56

在 html/javascript 中刷新页面时，如何更改图像的位置？

问题描述

2 个解决方案

解决方案1 0 已采纳 2020-09-16 08:51:15

解决方案2 0 2020-09-16 09:21:56

解决方案1
0 已采纳 2020-09-16 08:51:15

解决方案2
0 2020-09-16 09:21:56