En este artículo, veremos cómo crear un temporizador de cuenta regresiva usando React JS. Básicamente, un temporizador de cuenta regresiva mostrará la hora del final o el comienzo de una oferta o evento. Se usa principalmente cuando hay ventas próximas o algo grande en caso de que suceda.
Acercarse:
Podemos usar el siguiente enfoque en React JS para usar el temporizador de cuenta regresiva.
- getTimeRemaining: Esto calculará la diferencia entre el temporizador de destino y el tiempo actual que tenemos. Esta función comprobará el tiempo restante del temporizador de destino haciendo cálculos y devolverá un número total de horas, minutos y segundos.
- StartTimer: esta función comenzará a reducir el tiempo al obtener un número total de horas, minutos y segundos de la función getTimeRemaining.
- ClearTimer : esta función se utiliza para restablecer el temporizador, lo que significa que si reinicia el temporizador, borra el tiempo restante de la cuenta regresiva anterior; de lo contrario, comienza dos tiempos paralelos hacia abajo o puede contraerse entre sí.
- getDeadTimer: esta función proporciona la fecha límite del temporizador, lo que significa que da tiempo desde donde desea comenzar la cuenta regresiva. En esto, hay que sumar tiempo si se quiere alargar. Hemos usado esto en dos escenarios primero cuando se carga la página y segundo cuando alguien hace clic en el botón de reinicio.
Creación de la aplicación React e instalación del módulo:
-
Paso 1: Cree una aplicación React usando el siguiente comando:
npx create-react-app foldername
-
Paso 2: después de crear la carpeta de su proyecto, es decir , el nombre de la carpeta , acceda a ella con el siguiente comando:
cd foldername
Estructura del proyecto: Tendrá el siguiente aspecto.
Ejemplo: ahora veamos cómo crear un temporizador de cuenta regresiva en Reactjs. El código para App.js tendrá el siguiente aspecto.
App.js
import React, { useState, useRef, useEffect } from 'react'
const App = () => {
// We need ref in this, because we are dealing
// with JS setInterval to keep track of it and
// stop it when needed
const Ref = useRef(null);
// The state for our timer
const [timer, setTimer] = useState('00:00:00');
const getTimeRemaining = (e) => {
const total = Date.parse(e) - Date.parse(new Date());
const seconds = Math.floor((total / 1000) % 60);
const minutes = Math.floor((total / 1000 / 60) % 60);
const hours = Math.floor((total / 1000 / 60 / 60) % 24);
return {
total, hours, minutes, seconds
};
}
const startTimer = (e) => {
let { total, hours, minutes, seconds }
= getTimeRemaining(e);
if (total >= 0) {
// update the timer
// check if less than 10 then we need to
// add '0' at the beginning of the variable
setTimer(
(hours > 9 ? hours : '0' + hours) + ':' +
(minutes > 9 ? minutes : '0' + minutes) + ':'
+ (seconds > 9 ? seconds : '0' + seconds)
)
}
}
const clearTimer = (e) => {
// If you adjust it you should also need to
// adjust the Endtime formula we are about
// to code next
setTimer('00:00:10');
// If you try to remove this line the
// updating of timer Variable will be
// after 1000ms or 1sec
if (Ref.current) clearInterval(Ref.current);
const id = setInterval(() => {
startTimer(e);
}, 1000)
Ref.current = id;
}
const getDeadTime = () => {
let deadline = new Date();
// This is where you need to adjust if
// you entend to add more time
deadline.setSeconds(deadline.getSeconds() + 10);
return deadline;
}
// We can use useEffect so that when the component
// mount the timer will start as soon as possible
// We put empty array to act as componentDid
// mount only
useEffect(() => {
clearTimer(getDeadTime());
}, []);
// Another way to call the clearTimer() to start
// the countdown is via action event from the
// button first we create function to be called
// by the button
const onClickReset = () => {
clearTimer(getDeadTime());
}
return (
<div className="App">
<h2>{timer}</h2>
<button onClick={onClickReset}>Reset</button>
</div>
)
}
export default App;
Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:
npm start
Salida: Ahora abra su navegador y vaya a http://localhost:3000/ , verá la siguiente salida:
Publicación traducida automáticamente
Artículo escrito por harshitpandey251 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA