Dia 32
This commit is contained in:
31
Practicas/Practicas JS/boton escapista/index.html
Normal file
31
Practicas/Practicas JS/boton escapista/index.html
Normal file
@@ -0,0 +1,31 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Mover botón con JavaScript</title>
|
||||
<style>
|
||||
#moverBoton {
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 50px;
|
||||
transition: top 0.3s ease, left 0.3s ease;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<button id="moverBoton" onmouseover="moverBoton()">Pulsame</button>
|
||||
|
||||
<script>
|
||||
function moverBoton() {
|
||||
var boton = document.getElementById('moverBoton');
|
||||
var nuevaPosicionTop = Math.random() * (window.innerHeight - boton.clientHeight);
|
||||
var nuevaPosicionLeft = Math.random() * (window.innerWidth - boton.clientWidth);
|
||||
boton.style.top = nuevaPosicionTop + 'px';
|
||||
boton.style.left = nuevaPosicionLeft + 'px';
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user