Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
0
respuestas

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