javascript - 元素未停留在 JavaScript 中定义的区域内

Question

我编写了一个基本程序，用于在 DIV 元素内移动按钮。该按钮没有停留在我预期的区域内。在 HTML 方面，我有使用 id =“page”定义 DIV 的代码。这是js代码。为什么按钮没有停留在 DIV 元素内？

var buttonState = document.getElementById("clickMe");
var maxWidth = document.getElementById("page");
var maxHeight = document.getElementById("page");
var pageWidth = maxWidth.clientWidth;
var pageHeight = maxHeight.clientHeight;
var screenWidth = 0;
var screenHeight = 0;
function moveButton() {
    "use strict";
    // Find max width and height of screen and set variables to random number within parameters
    screenWidth = Math.floor(Math.random() * (pageWidth)) + 1;
    screenHeight = Math.floor(Math.random() * (pageHeight)) + 1;  
    console.log(screenWidth);
    console.log(screenHeight);
    // Button position
    buttonState.style.left = (screenWidth) + "px";
    buttonState.style.top = (screenHeight) + "px";
    // Button size
    buttonState.style.width = buttonSize + "em";
    buttonState.style.height = buttonSize + "em";

Answer 1

在屏幕宽度和屏幕高度的方程式中，您需要考虑按钮的大小。

div 是根据左上角像素定位的，因此如果您最终 Math.random() 返回 1 或非常接近它的值，则按钮将掉出页面，除非您从最大值中减去按钮大小.

var buttonWidthPx = buttonState.offsetWidth;
var buttonHeightPx = buttonState.offsetHeight;

screenWidth = Math.floor(Math.random() * (pageWidth - buttonWidthPx)) + 1;
screenHeight = Math.floor(Math.random() * (pageHeight - buttonHeightPx)) + 1;

还要确保将按钮的位置设置为相对位置，以便它位于 div 内，而不是绝对于文档。