Creación de un cronometro en JavaScript, extendiendo el objeto Date

En contextos lúdicos o evaluativos, como los que se presentan en el trabajo diario del programa de Producción Electrónica Multimedial (PEM), la gestión del tiempo es crucial para establecer límites y crear experiencias de usuario más dinámicas. La ausencia de un objeto cronómetro en JavaScript y la falta de un método dedicado en el objeto «Date» han motivado la creación de una solución versátil y fácil de implementar.

Para abordar este desafío, proponemos extender la funcionalidad del objeto «Date» mediante la creación de un método específico llamado «Chronometer». Este método, será diseñado para recibir tres parámetros clave como la referencia al elemento en el DOM, donde se visualizará el cronómetro, el tiempo establecido (con una opción predeterminada de 60 segundos) y una función de “callback”, que se ejecutará al alcanzar cero.

A continuación, presentamos los pasos detallados para replicar este cronómetro en aplicaciones web:

Lo primero que se va a hacer es extender la funcionalidad del objeto “Date”, para implementar un método llamado “Chronometer”. Este método, va a recibir tres parámetros:

elem: referencia del elemento en el DOM, donde se va a mostrar el cronómetro
time: tiempo del cronómetro en segundos, por defecto 60 segundos.
callback: función que se dispara cuando el cronómetro llega a cero.

Seguidamente, se construirá un prototipo del objeto “Date” con un método llamado “Chronometer”, el cual va a recibir los parámetros “elem”, “time”, “callback”. Se sigue esta sintaxis, para agregar un método a un objeto usando prototipos:

objeto.prototype.nombreFuncion = function(){

// Lo que va dentro de la función

}

/* Donde, objeto: es el nombre del objeto de javascript que se le va a crear el método

prototype: palabra reservada de javascript para crear el prototipo

nombreFuncion: nombre del método que va a tener el objeto */

El método “Chronometer” del objeto “Date”, debe quedar así:

Date.prototype.chronometer = function(elem, time, callback){

// aquí se escribe el código

}

Se debe crear un archivo llamado “chronometro.js” y copiar el siguiente código:

var intervalChronometer;

Date.prototype.chronometer = function(elem, time=60, callback){

let segundosRestantes = time;

intervalChronometer = window.setInterval(function(){

console.log(segundosRestantes)

if (segundosRestantes <= 0) {

clearInterval(intervalChronometer);

callback();

} else {

segundosRestantes--;

var hours = Math.floor(segundosRestantes / 3600);

var minutes = Math.floor((segundosRestantes % 3600) / 60);

var seconds = segundosRestantes % 60;

elem.innerHTML= `${String(hours).padStart(2,'0')}:${String(minutes).padStart(2,'0')}:${String(seconds).padStart(2,'0')}`;

}

},1000);

}

Para implementar el prototipo creado, se deben seguir los siguientes pasos:

Se instancia el objeto “Date” y se llama al método “Chronometer”:

var fecha = new Date();

fecha. Chronometer(elem, time, callback);

Luego, se crea un archivo llamado “index.html”, donde se copia el siguiente código:

<!DOCTYPE HTML>

<html Lang="es">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<script src="chronometer.js"></script>

<title>Prueba cronómetro</title>

</head>

<body>

<!-- espacio donde se va mostrar el cronómetro -->

<div id="chronometer"></div>

<script type="text/javascript">

var fecha = new Date();

var elem = document.getElementById("chronometer") // referencia del DOM

var time = 20 // tiempo del cronómetro en segundos

fecha.chronometer(elem, time, time_out);

/* función callback */

function time_out(){

alert("Se terminó el tiempo");

}

</script>

</body>

</html>

En esta guía se incluye un archivo denominado «chronometro.js», que contiene un código eficiente para la implementación del cronómetro. Además, la aplicación práctica del prototipo creado, se presenta en otro archivo llamado «index.html». Ambos están disponibles para descárgalos, para facilitar la integración de este cronómetro funcional en cualquier proyecto.

Para concluir, resulta esencial subrayar que el código del cronómetro ha sido incorporado con éxito en las producciones llevadas a cabo en el seno del PEM, donde ha sido una herramienta valiosa, adaptable a diversas situaciones y aplicaciones dentro del entorno multimedia.

Adicionalmente, es factible reconocer la presencia destacada de este código en un proyecto multimedia concreto, titulado Fundamentos de Criminología. En este material didáctico, el cronómetro desempeña un papel central, proporcionando una solución eficiente para la gestión y visualización precisa del tiempo, tanto en el crucigrama como en la sopa de letras, ambas actividades de la unidad 3.

Referencias:

Flanagan, D. (2006). JavaScript: the definitive guide. O’reilly.

Date. (s/f). MDN Web Docs. Recuperado el 6 de marzo de 2024, de https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Date

Luna, F. (2019). JavaScript-Aprende a programar en el lenguaje de la web. RedUsers.

Trabajando con objetos. (s/f). MDN Web Docs. Recuperado el 6 de marzo de 2024, de https://developer.mozilla.org/es/docs/Web/JavaScript/Guide/Working_with_Objects

Autor

Yuri Vázquez Pérez

Ver todas las entradas

Cite este texto:

Vázquez Pérez Y. (2024) Creación de un cronometro en JavaScript, extendiendo el objeto Date. Sonar Multimedia [blog]. https://multimedia.uned.ac.cr/pem/wp/sonar-multimedia/?p=549

Creación de un cronometro en JavaScript, extendiendo el objeto Date

Autor

Artículos relacionados