javascript - 如何在网站上制作一个随机传送的按钮onclick

Question

目前我想创建一个按钮，可以在我的网站上随机来回传送。由于我对 JavaScript 很陌生，所以我没有做对。这就是为什么我没有代码。我发现了这个问题，但它对我没有帮助。

这是我使用的代码：

document.getElementById("button").style.margin = Math.floor(Math.random() * 100);

<button id="button">Teleport</button>

你有什么想法我可以用 HTML、CSS 和 JavaScript 做到这一点吗？

提前致谢！

Answer 1

无需过多介绍：

addEventListener('load', ()=>{ // load
const but = document.getElementById('button'), bS = but.style, bod = document.body;
but.onclick = function(){
  let m = bod.getBoundingClientRect(), mw = m.width, mh = m.height, b = this.getBoundingClientRect(), x = Math.floor(Math.random()*mw);
  let y = Math.floor(Math.random()*mh), w = b.width, h = b.height, xw = mw-w, yh = mh-h;
  bS.top = (y > yh ? yh : y)+'px';
  bS.left = (x > xw ? xw : x)+'px';
}
});// end load

*{
  box-sizing:border-box;
}
html,body{
  width:100%; height:100%; margin:0; padding:0;
}
body{
  position:relative;
}
body>*{
  position:absolute;
}
#button{
  margin:0;
}

<button id='button'>Teleport</button>

Answer 2

document.addEventListener("DOMContentLoaded", function(){

  var rnd = Math.random()
  var button = document.getElementById('magic');
      
  if (rnd > .25) {

    
    button.style.display = 'block'
    button.style.top = Math.random() * 100 + '%'
    button.style.left = Math.random() * 100 + '%'
  }else{
    button.style.display='none'
  }
 
});
  

body {
  position: relative;
  height: 100vh;
}

button {
  position: absolute;
  top: 0;
  left: 0;
  display: none;
}

<button id='magic' onclick='myFunction()'>teleport</button>

Answer 3

用于Math.random() * 101随机生成多个 0- 100。我为 y 和 x 轴生成 2 个数字。这样我根据随机生成的数字更改顶部和左侧的位置

function jump() {
  var x = Math.round((Math.random() * 101)) + "%",
      y = Math.round((Math.random() * 101)) + "%";
  document.getElementById("jump").style.left = x;
  document.getElementById("jump").style.top = y;
}

body {
  margin: 0;
}

.button-container {
  position: relative;
  width: calc(100vw - 100px);
  height: calc(100vh - 20px);
}

button {
  position: absolute;
  width: 100px;
  height: 20px;
}

<div class="button-container">
  <button id="jump" onclick="jump()">Click Me</button>
</div>