JS点击元素后改变位置的方法

Question

我做了一个圆圈，在页面刷新后移动到屏幕上的随机点。但问题是我需要它在不刷新页面且仅在单击圆圈后才能工作。圆圈离开屏幕也有问题。即圆圈有时会出现在屏幕外

我写了以下代码：

let elem = document.querySelector('button');
let randX = Math.random();
let randY = Math.random();
let randXMult = randX * 100;
let randXP = randXMult + "%";
let randYMult = randY * 100;
let randYP = randYMult + "%";

elem.style.left = randYP;
elem.style.top = randXP;

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  border: none;
  box-sizing: border-box;
}

body main html {
  width: 100%;
  height: 100%;
  position: relative;
}

button {
  width: 200px;
  height: 200px;
  border-radius: 100%;
  background: rgb(167, 163, 163);
  position: absolute;
}

<main>
  <button></button>
</main>

Answer 1

试试下面的代码，

1. 点击圈
2. 没有页面刷新
3. 垂直页面边界

    document.querySelector('button').onclick = function() {
     test();
   };
    function test()
    { 
     let elem = document.querySelector('button');
     let randX = Math.random();
     let randY = Math.random();
     let randXMult = randX * 100;
     
     let randXP = randXMult + "%";
     console.log(randXMult / 70 >1);
     if(randXMult / 70 >1)
     {
       randXMult = 1;
       randXP = randXMult + "%";
     }
     let randYMult = randY * 100;
     console.log(randYMult);
     let randYP = randYMult + "%";
     
     elem.style.left = randYP;
     elem.style.top = randXP;
    }

   *,
   *::before,
   *::after {
     margin: 0;
     padding: 0;
     border: none;
     box-sizing: border-box;
   }
   
   
   body main html {
     width: 100%;
     height: 100%;
     position: relative;
   }
   
   button {
     width: 200px;
     height: 200px;
     border-radius: 100%;
     background: rgb(167, 163, 163);
     position: absolute;
   }

   <main>
     <button></button>
   </main>