2

Buenas, quiero mostrar una barra de progreso según una cuenta atrás de 7 minutos que se muestra en un div: <div id="quiz-time-left">0:06:24</div>

El problema es que necesito que si se recarga la página no se resetee. ¿Sería posible con CSS y un script que la barra represente lo que muestra el cronómetro?

Lo quiero utilizar en un examen en Moodle (3.1) para mostrar la barra en vez del tiempo restante para finalizar el examen.

Un saludo y muchas gracias.

CSS

#quiz-time-left {    
width: 0;
    height: 100%;
    -webkit-animation: progreso 420s linear;
            animation: progreso 420s linear;
color: #eb7260;
background: #eb7260;
 }
#page-mod-quiz-summary #quiz-timer {
    text-align: center;
    display: none;
position: absolute;
    left: -50px;
    top: -50px;
}
#quiz-timer {
border: 2px solid #eb7260;
text-indent: -9999px;
display:block;
    font-size: 0px;
    height: 35px;
}
@-webkit-keyframes progreso {
    0% {
        width: 100%;;
    }
    100% {
        width: 0;
    }
}

@keyframes progreso {
    0% {
        width: 100%;
    }
    100% {
        width: 0;
    }
}

HTML

<div id="quiz-timer" role="timer" aria-atomic="true" aria-relevant="text" style="display: block;">Time left: <div id="quiz-time-left">0:06:41</div></div>
5
  • 1
    La respuesta a tu pregunta es: sí, es posible. Mediante session/localStorage puedes mantener la cuenta y el cambio de tiempo se verá reflejado siempre.
    – gugadev
    Commented el 1 abr. 2017 a las 12:53
  • Gracias Gustavo, en la página inglesa me han comentado similar, pero tendré que estudiarlo o pagar a alguien porque se escapa a mis conocimientos: You could implement something like this: Make sure you save time left in localStorage window.onbeforeunload = function(timeLeft) { localStorage.setItem('countDown', timeLeft); } When loading the page check if there is an item called countDown and resume countDown with the value: if(localStorage['countDown'] { resumeCountdown(localStorage.getItem('countDown'); }
    – Adri
    Commented el 1 abr. 2017 a las 15:19
  • Estudia, no es muy difícil de lograr. Sin embargo, si no tienes tiempo de ello, no veo por qué no puedas contratar los servicios de alguien.
    – gugadev
    Commented el 1 abr. 2017 a las 16:08
  • Eso haré, si conoces de alguien, te lo agradezco. Un saludo.
    – Adri
    Commented el 2 abr. 2017 a las 10:20
  • Si gustas contáctame por twitter (entra a mi perfil) para conversar por DM.
    – gugadev
    Commented el 2 abr. 2017 a las 13:09

2 respuestas 2

1

Puedes utilizar localStorage para guardar la hora de inicio y luego calcular la diferencia de tiempo para controlar el avance de la barra

let interval

function progressBar (){
// Verificar si ya esta guardada la hora de inicio
if(localStorage.getItem('date-of-start')){
	// Obtener nuevamente la fecha de inicio
  let startDate = new Date(localStorage.getItem('date-of-start'))
	// Tiempo maximo en minutos
  let maxMin = 2
	interval = setInterval(function(){
		    // Obtener la diferencia de tiempo entre la fecha actual y la fecha de inicio
    let dif = (new Date() - startDate) / 1000 / 60
    // Convertir la diferencia a porcentaje 
    let percent = ((dif * 100) / maxMin).toFixed(2)
    if(percent <= 100) {
    	// Actualizar el tamaño de la barra
      document.getElementById('quiz-time-left').style.width = percent + '%'
      // Actualizar cronometro
      let timeLeft = ((100 - percent) * 0.01) * (maxMin * 1000 * 60)
			// Convertir milisegundos a minutos
     	timeLeft = Math.ceil((timeLeft / 1000 / 60))
      
      document.getElementById('time-left').innerHTML = timeLeft + ' min'
    } else {
     clearInterval(interval)
     localStorage.setItem('date-of-start',null)
    }
  },500)  
}
}

document.getElementById('startBtn').addEventListener('click',function(){
	// Limpiar el intervalo
  clearInterval(interval)
  // Guardar la hora de inicio en localstorage
  let date = Date()
  localStorage.setItem('date-of-start',date)
  // Resetear el tamaño de la barra
  document.getElementById('quiz-time-left').style.width = 0 + '%'
  progressBar()
})

progressBar()
#quiz-time-left {    
width: 0;
    height: 100%;
    width: 0%;
 color: #eb7260;
background: #eb7260;
  transition: width .1s linear;
 }
#page-mod-quiz-summary #quiz-timer {
    text-align: center;
    display: none;
position: absolute;
    left: -50px;
    top: -50px;
}
#quiz-timer {
border: 2px solid #eb7260;
text-indent: -9999px;
display:block;
    font-size: 0px;
    height: 35px;
}
@-webkit-keyframes progreso {
    0% {
        width: 100%;;
    }
    100% {
        width: 0;
    }
}

@keyframes progreso {
    0% {
        width: 100%;
    }
    100% {
        width: 0;
    }
}
<div id="quiz-timer" role="timer" aria-atomic="true" aria-relevant="text" style="display: block;"><div id="quiz-time-left"></div></div>
<span>Time left: </span><span id="time-left"></span>

<button id="startBtn">Start</button>

Puedes verlo funcionar en jsfiddle Ejemplo

Este código se puede mejorar y adaptar a tus necesidades

0

Tienes varias posibilidades, en principio en tu html no veo ninguna barra de progreso, así que para empezar la tienes que crear en CSS o utilizar un framework que incluya este tipo de widget, por ejemplo bootstrap.

Si quieres persistir el tiempo entre recargas, y entiendo por tu pregunta que el servidor no sabe nada de ello, es decir, es puro HTML y JS, una posibilidad es utilizar almacenamiento local, guardar el datetime en el que acaba la cuenta atrás en una cookie, y en cada recarga comprobar si esa cookie existe, si no ha vencido (si no se ha sobrepasado esa hora) y calcular los minutos y segundos restantes hasta ella.

Si estás utilizando JQuery puedes utilizar el plugin JQuery Storage API para utilizar fácilmente tanto almacenamiento local como cookies.

1
  • Realmente lo quiero implementar en un examen en Moodle, que muestra el contador, pero yo quiero mostrar la barra en su lugar, lo añado en el comentario para que se entienda mejor.
    – Adri
    Commented el 1 abr. 2017 a las 15:15

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.