Hice un botón usando html, css y js que aparece aleatoriamente en la página. Pero quiero el botón dentro de la etiqueta del cuerpo y sigue saliendo.
CÓDIGO HTML:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="main.js" defer></script> <link rel="stylesheet" href="style.css"> <title>SReflex</title> </head> <body> <button class="random">1 </button> </body> </html>CÓDIGO CSS:
*{ margin:0%; padding:0%; } body{ height: 100vh; width: 100vw; position: fixed; } button.random { /* looks of the button */ height: 3rem; width: 3rem; border: black; border-style: solid; border-radius: 50%; display:block; position:absolute; }CÓDIGO JS:
let temp= document.querySelector(".random"); temp.addEventListener("click",change); function change(){ let posx = Math.floor(Math.random()*1000); let posy = Math.floor(Math.random()*1000); let posz = Math.floor(Math.random()*1000); temp.style.left= posx + "vw"; temp.style.top= posy+ "vh"; temp.style.right= posz+ "vw"; }¿Cómo hago para que el botón no se salga de la pantalla? Quiero que la página no incluya la barra de desplazamiento.
Aquí hay una manera fácil de hacerlo, funciona para el cuerpo o para un div contenedor porque está relacionado con el tamaño principal. echa un vistazo al fragmento.
let temp= document.querySelector(".random"); temp.addEventListener("click",change); let maxw = temp.parentElement.clientWidth - 50; let maxh = temp.parentElement.clientHeight - 50; function change(){ let posx = Math.floor(Math.random() * (maxw)); let posy = Math.floor(Math.random() * (maxh)) temp.style.left= posx + "px"; temp.style.top= posy+ "px"; } *{ margin:0%; padding:0%; } body{ height: 100vh; width: 100vw; position: fixed; } button.random { /* looks of the button */ height: 3rem; width: 3rem; border: black; border-style: solid; border-radius: 50%; display:block; position:absolute; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="main.js" defer></script> <link rel="stylesheet" href="style.css"> <title>SReflex</title> </head> <body> <button class="random">1 </button> </body> </html>el -50 es para asegurarse de que no cruce los bordes, puede editarlo para que se adapte a sus necesidades.