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
Cronómetro Web
Cronómetro APK
Esta el la versión APK de la aplicación de cronómetro. Es solo para Android.
Es un cronómetro sencillo, gratis, sin anuncios, pequeño, y ocupa poco espacio.
Haz clic en el siguiente botón para descargarla y luego instalarla en tu dispositivo Android:
Capturas de pantalla
Cómo Crear un Cronómetro Web Sencillo con HTML y JavaScript
¡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.
Innovación
Desarrollamos aplicaciones web instalables y accesibles.
© 2025. All rights reserved.
