WEBLEB
Accueil
Éditeur
Connexion
Pro
Français
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Astuce de capture de la souris avec JS
4214
codex
Ouvrir dans l'éditeur
Publiez votre code
Recommandé
14 May 2025
système de dons avec plusieurs montants
5 June 2024
Formulaire de connexion HTML simple et gratuit
9 July 2025
Sélecteur de thème d'interface utilisateur : options claires, sombres et atténuées
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}.`);