generar un cronometro con htmt,css, javascript
Aquí te muestro un ejemplo de cómo crear un cronómetro con HTML, CSS y JavaScript:
**HTML**
```html
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cronómetro</title>
<link rel="stylesheet" href="estilos.css">
</head>
<body>
<div class="cronometro">
<h1 id="tiempo">00:00:00</h1>
<button id="start">Iniciar</button>
<button id="stop">Detener</button>
<button id="reset">Resetear</button>
</div>
<script src="script.js"></script>
</body>
</html>
```
**CSS (en el archivo estilos.css)**
```css
.cronometro {
width: 300px;
margin: 50px auto;
text-align: center;
}
#tiempo {
font-size: 48px;
font-weight: bold;
margin-bottom: 20px;
}
```
**JavaScript (en el archivo script.js)**
```javascript
let tiempo = 0;
let intervalo;
document.getElementById('start').addEventListener('click', () => {
intervalo = setInterval(() => {
tiempo++;
let horas = Math.floor(tiempo / 3600);
let minutos = Math.floor((tiempo % 3600) / 60);
let segundos = tiempo % 60;
document.getElementById('tiempo').innerHTML = `${horas.toString().padStart(2, '0')}:${minutos.toString().padStart(2, '0')}:${segundos.toString().padStart(2, '0')}`;
}, 1000);
});
document.getElementById('stop').addEventListener('click', () => {
clearInterval(intervalo);
});
document.getElementById('reset').addEventListener('click', () => {
clearInterval(intervalo);
tiempo = 0;
document.getElementById('tiempo').innerHTML = '00:00:00';
});
```
En este ejemplo, creamos un cronómetro que cuenta desde 0 y muestra el tiempo en formato HH:MM:SS. Los botones "Iniciar", "Detener" y "Resetear" permiten controlar el cronómetro.
* El botón "Iniciar" inicia el cronómetro y comienza a contar el tiempo.
* El botón "Detener" detiene el cronómetro y para la cuenta regresiva.
* El botón "Resetear" reinicia el cronómetro y establece el tiempo en 0.
Espero que esto te ayude. ¡Si tienes alguna pregunta o necesitas más ayuda, no dudes en preguntar!