如何限制按钮的随机位置空间

Question

我想创建一个按钮“Skip Intro”，类似于 Netflix 上的按钮（但有一个荒谬的部分，当您将鼠标悬停在按钮上时，按钮会随机改变其位置）。更改为随机位置的代码已经完成。但我想将按钮的位置限制在视频帧的内部。我该怎么做？

var button = document.querySelector(".button");

function randomizePosition() {
  var randomX = Math.random() * window.innerWidth;
  var randomY = Math.random() * window.innerHeight;
  console.log("randomX", randomX, " : randomY", randomY)
  button.style.left = randomX + "px";
  button.style.top = randomY + "px";
}
randomizePosition();

button.addEventListener("mouseenter", (event) => {
  randomizePosition();
});

.button {
  stroke: 3px;
  display: inline-block;
  padding: 20px;
  //border-radius: 5px;
  position: fixed;
  font-family: Arial, Helvetica, sans-serif;
  border: solid 3px darkgrey;
}

<div class='button'>SKIP INTRO</div>
<iframe width="560" height="315" src="https://www.youtube.com/embed/g_4aEFYj3QA" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"></iframe>

这是我工作的链接：https://codepen.io/artfsch/pen/ZEjZLgw

我知道在JS中可以将变量限制在一个范围内，并设置它只在特定范围内随机化。不幸的是，我不知道如何实现它。

Answer 1

假设你想让视频全屏显示，你可以通过限制按钮的可能新位置来实现——基本上是创建人工填充。

我通过将您的按钮置于其顶部/左侧位置的中心来完成此操作：

transform: translate(-50%, -50%);

并在窗口周围创建 100px 的填充

var randomX = (Math.random() * (window.innerWidth - 200)) + 100;
var randomY = (Math.random() * (window.innerHeight - 200)) + 100;

https://codepen.io/QuiteQuinn/pen/YzOZjgE

var button = document.querySelector(".button");

function randomizePosition(){
  var randomX = (Math.random() * (window.innerWidth - 200)) + 100; // Adding a 100px padding 
  var randomY = (Math.random() * (window.innerHeight - 200)) + 100; // Adding a 100px padding 
  console.log("randomX", randomX, " : randomY", randomY)
  button.style.left = randomX + "px";
  button.style.top = randomY + "px";
}
randomizePosition();

button.addEventListener("mouseenter", (event) => {
  randomizePosition();
});

body, html{
  padding: 0;
  margin: 0;
}
.button{
  display: inline-block;
  padding: 20px;
  position: fixed;
  font-family: Arial, Helvetica, sans-serif;
  border: solid 3px darkgrey;
  background: white;
  width: 100px;
  text-align: center;
  transform: translate(-50%, -50%); /*   Centering your button on its top/left position */
}
iframe{
  width: 100vw;
  height: 100vh;
}

<div class='button'>SKIP INTRO</div>
<iframe src="https://www.youtube.com/embed/g_4aEFYj3QA" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
       

Answer 2

试试这个

var button = document.querySelector(".button");
var videoFrame = document.querySelector(".video-wrapper");

function randomizePosition(){
  var frameRect = videoFrame.getBoundingClientRect();
  var minX = frameRect.left;
  var maxX = frameRect.right - button.offsetWidth;
  var minY = frameRect.top;
  var maxY = frameRect.bottom - button.offsetHeight;
  var randomX = Math.floor(Math.random() * (maxX - minX + 1) + minX);
  var randomY = Math.floor(Math.random() * (maxY - minY + 1) + minY);
  button.style.left = randomX + "px";
  button.style.top = randomY + "px";
}

randomizePosition();

button.addEventListener("mouseenter", (event) => {
  randomizePosition();
});

.button {
  stroke: 3px;
  display: inline-block;
  padding: 20px;
  position: absolute;
  font-family: Arial, Helvetica, sans-serif;
  border:solid 3px darkgrey;
}

.video-wrapper {
  position: relative;
  width: 560px;
  height: 315px;
}

<div class='button'>SKIP INTRO</div>
<div class="video-wrapper">
  <iframe width="560" height="315" src="https://www.youtube.com/embed/g_4aEFYj3QA" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" ></iframe>
</div>