esta seria la estructura en HTML
<script src="script.js"></script>
Esta seria la estructura de CSS body { font-family: Arial, sans-serif; text-align: center; margin-top: 50px; }
#tiempo { font-size: 2em; margin-bottom: 20px; }
button { padding: 10px 20px; font-size: 1em; }
y esta seria la estrcutra de Java Script // Variable para el tiempo transcurrido en segundos let tiempoTranscurridoEnSegundos = 10;
// Variable para almacenar el ID del intervalo let idIntervalo = null;
// Función para la cuenta regresiva function cuentaRegresiva() { tiempoTranscurridoEnSegundos -= 1;
// Verificar si el tiempo ha llegado a cero
if (tiempoTranscurridoEnSegundos <= 0) {
alert("¡El tiempo se ha agotado!");
reiniciar();
return;
}
// Actualizar el display del tiempo
document.getElementById("tiempo").innerText = tiempoTranscurridoEnSegundos;
}
// Función para iniciar o pausar la cuenta regresiva function iniciarPausar() { if (idIntervalo) { reiniciar(); return; }
// Iniciar el intervalo
idIntervalo = setInterval(cuentaRegresiva, 1000);
}
// Función para reiniciar la cuenta regresiva function reiniciar() { clearInterval(idIntervalo); idIntervalo = null; tiempoTranscurridoEnSegundos = 10; // Reiniciar el tiempo a 10 segundos document.getElementById("tiempo").innerText = tiempoTranscurridoEnSegundos; // Actualizar el display }
// Capturar el botón y agregar el evento de clic const botonIniciarPausar = document.getElementById("botonIniciarPausar"); botonIniciarPausar.addEventListener("click", iniciarPausar);