JavaScript | Temporizador

Aquí, vamos a aprender sobre el temporizador en JavaScript , también vamos a aprender acerca de la función setInterval () con ejemplos en JavaScript .

En este artículo, vamos a construir un temporizador simple usando JavaScript . En primer lugar, vamos a entender el objeto de fecha y cómo podemos utilizar el objeto de fecha para conseguir minutos y segundos, a continuación, vamos a ver brevemente al setInterval () función asíncrona y class combinaremos todo nuestro conocimiento para crear una temporizador simple.

la fecha objeto representa un tipo de datos diferente en JavaScript y como su nombre indica se utiliza para almacenar y mantener un valor de tener un ‘Fecha’ tipo. Esta fecha podría ser cualquier cosa, desde hace unos años, a la fecha actual o la fecha unos pocos años a partir de ahora como finally ya que es una fecha válida. Podemos crear un nuevo objeto Date utilizando la función de constructor Date ().

const now = new Date();
console.log(now);

salida

Tue Jan 07 2020 17:07:51 GMT+0530 (India Standard Time)

Hemos declarado un nuevo objeto Date ahora utilizando el constructor Date () . Esto es similar a la manera en que creamos booleanos utilizando el « nueva» palabra clave. El constructor Date () toma como parámetro en la fecha que se creará y se debe introducir en el mismo formato que se muestra. Como nos mantuvimos vaciar, regresamos la fecha y hora actual, es decir, la fecha exacta en la que se crea el objeto ahora fecha.

const then = new Date('Jan 01 2020 17:07:51 GMT+0530 (India Standard Time)');
console.log(then);

salida

Wed Jan 01 2020 17:07:51 GMT+0530 (India Standard Time)

continuación representa la fecha del día especificado que pasamos en el interior del constructor Date () como parámetro. Los getMinutes () y getSeconds () son métodos que se pueden utilizar en el objeto Date para obtener el total de minutos y segundos que long objeto de fecha.

console.log(then.getMinutes() + ' minutes past ' + then);
console.log(now.getMinutes() + ' minutes past ' + now);
console.log(then.getSeconds() + ' seconds past ' + then);
console.log(now.getSeconds() + ' seconds past ' + now);

salida

7 minutes past Wed Jan 01 2020 17:07:51 GMT+0530 (India Standard Time)
7 minutes past Tue Jan 07 2020 17:07:51 GMT+0530 (India Standard Time)
51 seconds past Wed Jan 01 2020 17:07:51 GMT+0530 (India Standard Time)
51 seconds past Tue Jan 07 2020 17:07:51 GMT+0530 (India Standard Time)

La función setInterval () es una función asíncrona que invoca una devolución de llamada después de cada cantidad especificada en milisegundos.

setInterval(function() {
console.log('Every 2s ');
}, 2000);

salida

(2) Every 2s 

Ahora que tenemos todo el conocimiento que necesitamos, vamos a seguir adelante y construir nuestra temporizador JavaScript.

<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Focus method</title>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</head>
<style>
body {
background: coral;
}
</style>
<body>
<div class="container">
<h3 class="center">JavaScript Timer</h3>
<h5 class="from">From: </h5>
<h5>Minutes elapsed:
<span class="min"></span>
</h5>
<h5>Seconds elapsed:
<span class="sec"></span>
</h5>
</div>
</body>
<script>
</script>
</html>

salida

JavaScript | Timer - 4

En primer lugar, crearemos un objeto de fecha class una fecha especificada y obtener una referencia a eso.

const year2020=new Date('Jan 07 2020 17:47:00');
document.querySelector('.from').textContent+=year2020;

salida

JavaScript | Timer - 5

Gran! Ahora vamos a disparar una función setInterval () que se desarrollará cada 1 segundo o 1000 milisegundos y dentro de esa función, vamos a mostrar los minutos y los segundos transcurridos desde el objeto fecha anterior hemos creado restando sus minutos de la corriente es objeto fecha minutos. Haremos lo mismo para conseguir el segundo transcurrido.

<script>
const year2020=new Date('Jan 07 2020 17:47:00');
document.querySelector('.from').textContent+=year2020;
setInterval(function(){
let now=new Date();
document.querySelector('.min').textContent=now.getMinutes()-year2020.getMinutes();
document.querySelector('.sec').textContent=now.getSeconds()-year2020.getSeconds();
},1000)
</script>

salida

JavaScript | Timer - 6

Y se puede ver que el temporizador actualiza los segundos y minutos transcurrido dinámicamente!


Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *