Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
1
respuesta

Temporizador lo que hicimos en el aula

esta seria la estructura en HTML

10
<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);

1 respuesta

¡Hola Carlos!

Gracias por compartir tu código con nosotros, te felicito por tu aprendizaje.

Si necesitas ayuda con algo, no dudes en preguntar. ¡Estoy aquí para ayudarte!

Un Abrazo.

Si este post te ayudó, por favor, marca como solucionado ✓. Continúa con tus estudios