Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

141
Visualizações
Tengo problemas para hacer un temporizador de cuenta regresiva (Reactjs)

Estoy usando Reactjs para hacer un temporizador de cuenta regresiva que puede separar el día, las horas, los minutos y los segundos entre 2 fechas. Funciona bien, pero solo puede contar hasta una fecha mayor que la fecha actual (21/08/2022 < 17/10/2022), pero no puede contar hasta (21/08/2022 a 21/08/2023) ). Tengo una función para transmitir accesorios:

 const timeLeft = useCountdown(new Date(2022, Data.date.month , Data.date.day));

Debería verse así cuando console.log:

 {days: 87, hours: 20, minutes: 58, seconds: 40}

Estoy usando un gancho useCountDown para contar el tiempo entre 2 fechas:

 import { useState, useEffect } from "react"; const useCountdown = (deadline) => { const [days, setDays] = useState(0); const [hours, setHours] = useState(0); const [minutes, setMinutes] = useState(0); const [seconds, setSeconds] = useState(0); const leading0 = (num) => { return num < 10 ? "0" + num : num; }; const getTimeUntil = (deadline) => { const time = Date.parse(deadline) - Date.parse(new Date()); if (time < 0) { setDays(0); setHours(0); setMinutes(0); setSeconds(0); } else { setDays(Math.floor(time / (1000 * 60 * 60 * 24))); setHours(Math.floor((time / (1000 * 60 * 60)) % 24)); setMinutes(Math.floor((time / 1000 / 60) % 60)); setSeconds(Math.floor((time / 1000) % 60)); } }; useEffect(() => { setInterval(() => getTimeUntil(deadline), 1000); return () => getTimeUntil(deadline); }, [deadline]); return { days: leading0(days), hours: leading0(hours), minutes: leading0(minutes), seconds: leading0(seconds) }; }; export default useCountdown;

No he descubierto cómo arreglar esto. Lo siento por el mal inglés, pero estoy haciendo mi mejor esfuerzo :( ¡Gracias por ayudarme!

about 4 years ago · Juan Pablo Isaza
1 Respostas
Responde à pergunta

0

Aquí hay una versión mucho más simple:

 const useCountdown = (deadline: Date) => { // Time is in seconds const [time, setTime] = useState( Math.max(0, Math.floor((deadline.getTime() - Date.now()) / 1000)) ); const decrement = () => setTime((prevTime) => { return prevTime === 0 ? 0 : prevTime - 1; }); useEffect(() => { const id = setInterval(decrement, 1000); return () => clearInterval(id); }, []); const format = (num: number): string => { return num < 10 ? '0' + num : num.toString(); }; return { days: format(Math.floor(time / (3600 * 24))), hours: format(Math.floor((time / 3600) % 24)), minutes: format(Math.floor((time / 60) % 60)), seconds: format(time % 60), }; };

Stackblitz: https://stackblitz.com/edit/react-ts-bnhvxp?file=App.tsx

about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda