¿Qué deseas hacer?

Leer el artículo: "Cómo crear un cronómetro Web Sencillo con HTML y JavaScript"
Usar la versión web de la aplicación de cronómetro
Ir a la versión PWA para instalarla en cualquier sistema operativo
- ¿Qué es una PWA?

Aplicación "Cronómetro"

Cronómetro Web

Disfruta de este interesante artículo de nuestro blog de Programación

Cómo Crear un Cronómetro Web Sencillo con HTML y JavaScript

Proyecto sencillo pero muy útil: un cronómetro web creado con HTML y JavaScript. Además, te mostraré cómo puedes adaptarlo para crear una aplicación APK para Android usando Android Studio.

5/8/20252 min read

¡Hola a todos los entusiastas de la programación! En esta ocasión, quiero compartir un proyecto sencillo pero muy útil: un cronómetro web creado con HTML y JavaScript. Además, te mostraré cómo puedes adaptarlo para crear una aplicación APK para Android usando Android Studio.

¿Qué vamos a construir?

Vamos a desarrollar un cronómetro digital que permite:

Iniciar el conteo.
Detener el conteo.
Reiniciar el cronómetro a cero.

Código HTML: La estructura

El HTML proporciona la estructura básica de nuestra página web. Aquí está el código que usaremos:

Explicación del HTML

<head>: Contiene la información del título de la página y los estilos CSS.
<body>: Define el contenido principal de la página.
<h1>: El título principal "Cronómetro".
<div>: El elemento con el id "cronometro" mostrará el tiempo.
<button>: Tres botones para iniciar, detener y reiniciar el cronómetro, cada uno con un evento onclick que llama a la función JavaScript correspondiente.
<style>: Contiene estilos CSS para los botones.

Código JavaScript: La lógica

Ahora, añadimos la lógica con JavaScript dentro de la etiqueta <script>:

let milisegundos = 0;

let segundos = 0;

let minutos = 0;

let intervalo;

function iniciar() {

intervalo = setInterval(() => {

milisegundos++;

if (milisegundos === 10) {

milisegundos = 0;

segundos++;

}

if (segundos === 60) {

segundos = 0;

minutos++;

}

if (minutos === 60) {

minutos = 0;

}

document.getElementById('cronometro').textContent = `${minutos.toString().padStart(2, '0')}:${segundos.toString().padStart(2, '0')}.${milisegundos.toString().padStart(2, '0')}`;

}, 100);

}

function detener() {

clearInterval(intervalo);

}

function reiniciar() {

detener();

milisegundos = 0;

segundos = 0;

minutos = 0;

document.getElementById('cronometro').textContent = '00:00.00';

}

Explicación del JavaScript

Variables: Se declaran las variables milisegundos, segundos, minutos e intervalo para almacenar el tiempo y el intervalo del cronómetro.

Función iniciar():
- Utiliza setInterval() para actualizar el cronómetro cada 100 milisegundos.
- Incrementa los milisegundos y actualiza los segundos y minutos según sea necesario.
- padStart(2, '0') asegura que los números tengan siempre dos dígitos (ej. "01" en lugar de "1").
- Actualiza el contenido del elemento HTML con el id "cronometro".

Función detener(): Usa clearInterval() para detener el intervalo y pausar el cronómetro.

Función reiniciar():

Detiene el intervalo.
Resetea las variables de tiempo a cero.
Actualiza el contenido del cronómetro a "00:00.00".

Estilos CSS: La presentación

El CSS se utiliza para dar estilo a los elementos HTML y hacer que el cronómetro se vea atractivo. En este caso, se aplican estilos a los botones y al display del cronómetro.

Creando la APK con Android Studio

Para convertir esta aplicación web en una APK de Android, puedes seguir estos pasos generales:

Android Studio: Instala Android Studio en tu ordenador.
Nuevo Proyecto: Crea un nuevo proyecto en Android Studio.
WebView: Utiliza un componente WebView para cargar tu archivo HTML.
Configuración: Configura los permisos y otros ajustes necesarios para tu aplicación.
Generar APK: Genera el archivo APK firmado para su distribución.

Conclusión

Este proyecto de cronómetro es un excelente ejemplo de cómo HTML, CSS y JavaScript pueden trabajar juntos para crear una herramienta funcional e interactiva. Además, con Android Studio, puedes llevar tus aplicaciones web al mundo móvil.

¡Espero que este tutorial te sea de gran ayuda! Si tienes alguna pregunta, no dudes en dejar un comentario.