Soy nuevo en la interfaz y me cuesta entender JavaScript.
Ahora estoy tratando de hacer un botón con confeti cuando lo presiono. Pero quiero que expulse el confeti dentro de una cierta cantidad de tiempo (no importa cuánto tiempo atm, solo quiero que funcione la función) Entonces, ¿qué debo hacer? He estado tratando de entenderlo a través de w3schools, cómo funciona setTime(). ¿Tal vez puedas ayudarme a resolverlo para que entienda cómo resolver esto?
¡Gracias! /Lisa
J.S.:
const colorChange = [ 'blue' , 'green', 'lightgreen', 'lightblue', 'purple', 'turquoise' ]; const chooseParticleColor = () => { return colorChange[Math.floor(Math.random() * colorChange.length)]; } const bang = (addConfettiParticles) => { addConfettiParticles({ particleAmount: 500, // Antal konfettipartiklar xPosition: 50, // Position i procent av skärmens bredd, 0 är längst till vänster och 100 längst till höger yPosition: 50, // Position i procent av skärmens höjd, 0 är längst ner och 100 högst upp xVelocity: 0, // Hastighet i sidled, positiva värden åker åt höger och negativa åt vänster yVelocity: 2, // Hastighet i höjdled, positiva värden åker uppåt och negativa värden nedåt xSpread: 110, // Slumpmässig spridning på partikelns hastighet i sidled ySpread: 50, // Slumpmässig spridning på partikelns hastighet i höjdled }) } let timeout; function repeatConfetti() { timeout = setTimeout(addConfettiParticles, 3000); } export { chooseParticleColor, bang, repeatConfetti }html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="styles.css"> <title>Konfetti!</title> </head> <body> <div class="container flex-center"> <div class="wrapper"> <div class="title-row flex-center"> <h1>Konfetti</h1> </div> <div class="flex-row flex-center"> <button id="confettiButton" onclick="repeatConfetti()">Skjut konfetti!</button> </div> </div> </div> <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.15/lodash.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"></script> <script type="module" src="javascripts/confetti-creator.js"></script> <script src="./confetti.js"></script> </body> </html>