WEBLEB
Inicio
Editora de código
Iniciar sesión
Pro
Español
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Truco de Captura de Ratón en JS
4344
codex
Abrir en el editor
Video
Publica tu código
0
Recomendado
9 December 2025
Formulario de inicio de sesión y registro HTML/CSS
18 August 2024
Animación de título interactivo
6 November 2024
Gradiente del cursor del ratón
HTML
Copy
Webleb
CSS
Copy
h1 { font-size: 2.2rem; margin: 0; font-weight: 600; line-height: 1.15; } @media (min-width: 900px) { h1 { font-size: 2.488rem; } } h2 { font-size: 1.4rem; margin: 0.5rem 0; line-height: 1.15; font-weight: 200; } @media (min-width: 900px) { h2 { margin: 1rem 0; font-size: 1.44rem; } } p { margin-top: 0.25rem; } @media (min-width: 900px) { p { margin-top: 0.5rem; } } a { color: #0f1108; text-decoration: none; border-bottom: currentcolor 1px solid; } .container { max-width: 520px; margin: 0 auto; padding: 0 1rem 100px 1rem; } @media (min-width: 900px) { .container { max-width: 650px; padding: 0 1rem 90px 1rem; } } .app { position: relative; background: #79c4e7; display: flex; align-items: center; justify-content: center; min-height: calc(100vh - 2rem); margin: 1rem; overflow: hidden; } .app--debug .grab-zone { background: rgba(0, 0, 0, 0.15); } .app--debug .grab-zone__debug { display: block; } .app--debug .grab-zone__danger { background: rgba(0, 0, 0, 0.15); } .app--debug .grabber__arm-wrapper { background: rgba(0, 0, 0, 0.15); } .grab-zone-wrapper { position: absolute; bottom: 0; right: 0; transform: translateX(30%) translateY(50%); } .grab-zone { display: flex; align-items: center; justify-content: center; width: 700px; height: 700px; border-radius: 50%; } .grab-zone__danger { display: flex; align-items: center; justify-content: center; width: 400px; height: 400px; border-radius: 50%; } .grab-zone__debug { display: none; position: absolute; width: 300px; top: -100px; font-size: 14px; text-align: center; text-transform: uppercase; } .grabber { position: relative; width: 100px; height: 100px; } .grabber__arm-wrapper { position: absolute; top: -80px; width: 24px; height: 260px; } .grabber__arm { position: relative; width: 24px; height: 200px; background: #7d9a9e; border-radius: 20px; overflow: visible; transform: translateY(100%); transition: transform 0.2s ease; } .grabber__hand { display: block; position: absolute; top: -12px; transform: scale(1.4) rotate(-10deg) translateY(100%); transform-origin: bottom center; transition: transform 0.3s ease; } .grabber__face { position: absolute; width: 75px; height: 84px; right: 5%; transition: transform 0.3s ease; } .grabber__body { position: absolute; top: 50%; left: 0%; width: 110px; height: 95px; border-radius: 50%; background: #7d9a9e; transition: transform 0.3s ease; } .grabber--waiting .grabber__hand { transform: scale(1.4) rotate(-10deg); } .grabber--waiting .grabber__arm { transform: translateY(80%); } .grabber--waiting .grabber__face { transform: translateY(60%); } .grabber--stalking .grabber__hand { transform: scale(1.4) rotate(-10deg); } .grabber--stalking .grabber__arm { transform: translateY(70%); } .grabber--stalking .grabber__face { transform: translateY(10%); } .grabber--grabbing .grabber__face { transform: translateY(-40%) rotate(10deg); } .grabber--grabbing .grabber__arm { transform: translateY(0%); } .grabber--grabbing .grabber__body { transform: translateY(-20%); } .grabber--grabbing .grabber__hand { transform: scale(1.7) rotate(10deg); } .grabber--grabbed .grabber__arm { transition: transform 1s ease; } .grabber--grabbed .grabber__hand { transition: transform 2.5s ease; } .grabber--grabbed .grabber__face { transform: translateY(70%); transition: transform 1s ease; } .grabber--grabbed .grabber__body { transform: translateY(50%); transition: transform 1s ease; } .grabber--extended .grabber__arm { transform: translateY(-20%); } .grabber--extended .grabber__face { transform: translateY(-60%) rotate(15deg); } .grabber--extended .grabber__body { transform: translateY(-40%); } .grabber--shaka .grabber__arm { transform: translateY(50%); } .grabber--shaka .grabber__hand { transform: scale(2.5) translateY(10%); animation: shaka 0.5s infinite alternate forwards; transform-origin: 55% 60%; } .grabber--shaka .grabber__face { transform: translateY(70%); transition: transform 1s ease; } .grabber--shaka .grabber__body { transform: translateY(50%); transition: transform 1s ease; } .trap-button { position: absolute; bottom: 80px; right: 70px; min-width: 125px; background: #8ecacc; color: white; border-radius: 5px; padding: 0.4rem 0.5rem; font-weight: 600; font-size: 18px; letter-spacing: 1px; text-transform: uppercase; } .debug-button { position: fixed; top: 0; right: 0; background: transparent; padding: 1rem; margin: 1rem; font-size: 16px; text-transform: uppercase; letter-spacing: 1px; opacity: 0.5; } @keyframes shaka { 0% { transform: scale(2.5) translateY(0%) rotate(-20deg); } 100% { transform: scale(2.5) translateY(0%) rotate(20deg); } }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */ function factorial(n) { if (n === 0 || n === 1) { return 1; } else { return n * factorial(n - 1); } } const number = 5; const result = factorial(number); console.log(`The factorial of ${number} is ${result}.`);