Foros del Web » Programando para Internet » Javascript »

Barra De Progreso Javascript

Estas en el tema de Barra De Progreso Javascript en el foro de Javascript en Foros del Web. hola amigos tengo una consulta uso el siguiente codigo para cargar el tiempo de penalizacion de login de mi pagina web que son 5 minutos ...
  #1 (permalink)  
Antiguo 14/08/2011, 18:34
 
Fecha de Ingreso: agosto-2011
Ubicación: Caracas
Mensajes: 6
Antigüedad: 10 años, 1 mes
Puntos: 1
Pregunta Barra De Progreso Javascript

hola amigos tengo una consulta

uso el siguiente codigo para cargar el tiempo de penalizacion de login de mi pagina web que son 5 minutos

ok me toma bien los minutos restantes y si refresco la pagina no me cambia el tiempo de dichos minutos

pero el detalle esta que al refrescar el navegador, la barra y el porcentaje se reinician

la pregunta es como puedo hacer para que eso no suceda?

es decir

como hago para que el porcentaje siga igual que por ejemplo son 5 minutos restantes y al minuto 4 restantes pasaron 20% y si refresco la pagina siga igual y no se resetee a 0% igual con la barra?

este es el codigo:

Código PHP:
<php

if (time() < ($row1['tiempo'] + 300)) {
$hora = ($row1['tiempo'] + 300);
$fecha date('m d Y H:i:s'$hora);
$time $hora-time();
echo 
'

<script>

// REDIRIGIR

var inicio = false;
var termino = false;
var tam_barra = 194;
var seg_barra = '
.$time.';
var date = new Date();
var milisec_barra = seg_barra * 1000;
var milisec_final = date.getTime() + milisec_barra;
function iniciar_proceso() {
if (inicio == false)  {
inicio = true;
aumenta_barra();
}
}
function aumenta_barra() {
if (termino == false) {
var ahora = new Date();
milisec_ahora = ahora.getTime();
var milisec_restante = Math.ceil((milisec_final - milisec_ahora) / 100);
if (milisec_restante < 0) {
milisec_restante = 0;
}
var minutos = Math.floor(milisec_restante % 36000 / 600);
var segundos = Math.floor(milisec_restante % 36000 % 600) / 10;
if ((segundos % 1) == 0) {
segundos = segundos + ".0";
}
var salida;
if (minutos > 0) {
var salida = minutos + ":" + segundos;
} else {
var salida = segundos;
}
milisec_restante = Math.floor(milisec_restante) / 10;
var porcentaje = Math.floor(((milisec_barra - milisec_restante * 1000) / milisec_barra) * 100);
if (porcentaje < 0) {
porcentaje = 1;
}
if (milisec_final >= milisec_ahora) {
document.getElementById("pocentaje-cargando").innerHTML = porcentaje + "%";
document.getElementById("div_tiempo").innerHTML = salida;
} else {
termino = true;
document.getElementById("pocentaje-cargando").innerHTML = "100%";
document.getElementById("div_tiempo").innerHTML = "0";
setTimeout("location.href=" +document.URl);
}
document.getElementById("barra-cargando").style.width = (porcentaje / 100) * tam_barra + "px";
setTimeout("aumenta_barra();", 100);
}
}
window.setTimeout("iniciar_proceso()", 300);

// TIEMPO PARA QUE APAREZCA LA BARRA DE PROGRESO

var t = 2;
setTimeout(contador, 500);
function contador() {
if (t != 1) {
t--;
setTimeout(contador, 1000);
} else if (t == 1) {
tiempo();
}
}
function tiempo() {
document.getElementById("cuadro-cargando").style.display = "block";
}

</script>

<style>

#cuadro-cargando {
    position: relative;
    background: -moz-linear-gradient(top,#58acfa,#2e9afe,#0080ff,#2e9afe,#58acfa);
    width: 200px;
    height: 40px;
    top: 15px;
    left: -25px;
    margin: auto;
    border: 0px solid transparent !important;
    border-radius: 4px;
    box-shadow: 0 0 4px #084b8a;
    display: none;
}

#cuadro-cargando-fondo {
    position: relative;
    background: #0080ff;
    width: 196px;
    height: 35px;
    top: 2px;
    margin: auto;
    border: 0px solid transparent !important;
    border-radius: 4px;
    box-shadow: inset 0 0 1px 1px #084b8a;
}

#barra-cargando {
    position: relative;
    background: -moz-linear-gradient(top,#58acfa,#2e9afe,#0080ff,#2e9afe,#58acfa);
    width: 1%;
    max-width: 200px;
    height: 33px;
    border: 0px solid transparent !important;
    border-radius: 4px;
    box-shadow: 0 0 4px #084b8a;
    top: 1px;
    left: 1px;
}

#pocentaje-cargando {
    position: relative;
    top: -30px;
    left: 75px;
    width: 99.4%;
    height: 97.2%;
    color: #084b8a;
    font-family: arial;
    font-style: oblique;
    font-size: 25px;
    text-shadow: 0 1px 1px #ebebeb;
}
</style>

<span>Debes Esperar 5 Minutos Por Haber Fallado En 5 Intentos<br />Faltan: <span id="div_tiempo"></span><br /> Para Poder Ver El Formulario</span>

<br /><br />

<div id="cuadro-cargando">
    <div id="cuadro-cargando-fondo">
        <div id="barra-cargando"></div>
        <div id="pocentaje-cargando"></div>
    </div>
</div>


'
;
exit;
return 
false;
}

?> 
espero puedan ayudarme.

codigo probado en firefox 5.0.1
  #2 (permalink)  
Antiguo 14/08/2011, 19:15
Avatar de Panino5001
Me alejo de Omelas
 
Fecha de Ingreso: mayo-2004
Ubicación: -34.637167,-58.462984
Mensajes: 5.141
Antigüedad: 17 años, 3 meses
Puntos: 831
Respuesta: Barra De Progreso Javascript

Fijate si te sirve esto como idea: http://www.forosdelweb.com/f13/crono...pagina-662993/
  #3 (permalink)  
Antiguo 14/08/2011, 19:33
 
Fecha de Ingreso: agosto-2011
Ubicación: Caracas
Mensajes: 6
Antigüedad: 10 años, 1 mes
Puntos: 1
Respuesta: Barra De Progreso Javascript

Cita:
Iniciado por Panino5001 Ver Mensaje
Fijate si te sirve esto como idea: [url]http://www.forosdelweb.com/f13/cronometro-efectivo-cuando-cambia-pagina-662993/[/url]
Amigo gracias por responder

analize el codigo que posteastes y es mas o menos la idea

funciona refrescando pero el detalle esta que cuando cierras el navegador se reinicia de nuevo a 0

la duda esta en como hago para que la barra de progreso y el porcentaje tomen el tiempo de inicio y el tiempo que va transcurrido

y sigan desde ese lugar es decir que si iva por 20% al refrescar o cerrar y volver abrir el navegador me muestre el progreso transcurrido es decir 21% o el que halla avanzado tanto en el porcentaje como en la barra en vez de reiniciarse a 0

gracias espero de su gran ayuda
  #4 (permalink)  
Antiguo 15/08/2011, 15:05
 
Fecha de Ingreso: agosto-2011
Ubicación: Caracas
Mensajes: 6
Antigüedad: 10 años, 1 mes
Puntos: 1
Respuesta: Barra De Progreso Javascript

Alguien que me pueda ayudar por favor es que no logro evitar que se reinicie el porcentaje y la barra al actualizar
  #5 (permalink)  
Antiguo 15/08/2011, 15:22
Avatar de Panino5001
Me alejo de Omelas
 
Fecha de Ingreso: mayo-2004
Ubicación: -34.637167,-58.462984
Mensajes: 5.141
Antigüedad: 17 años, 3 meses
Puntos: 831
Respuesta: Barra De Progreso Javascript

En el mismo ejemplo que te mostré, usá una cookie en lugar de guardar en window.name.
  #6 (permalink)  
Antiguo 15/08/2011, 15:26
 
Fecha de Ingreso: agosto-2011
Ubicación: Caracas
Mensajes: 6
Antigüedad: 10 años, 1 mes
Puntos: 1
Respuesta: Barra De Progreso Javascript

y la cookie en que lugar la coloco

quiero que

porcentaje

tam_barra

no se reseteen pero no logro comprender esa parte
  #7 (permalink)  
Antiguo 15/08/2011, 15:32
Avatar de Panino5001
Me alejo de Omelas
 
Fecha de Ingreso: mayo-2004
Ubicación: -34.637167,-58.462984
Mensajes: 5.141
Antigüedad: 17 años, 3 meses
Puntos: 831
Respuesta: Barra De Progreso Javascript

Cita:
Iniciado por keyvin2012 Ver Mensaje
y la cookie en que lugar la coloco
Cita:
en lugar de guardar en window.name.
  #8 (permalink)  
Antiguo 15/08/2011, 18:14
 
Fecha de Ingreso: agosto-2011
Ubicación: Caracas
Mensajes: 6
Antigüedad: 10 años, 1 mes
Puntos: 1
Respuesta: Barra De Progreso Javascript

Gracias Amigo por intentar ayudarme

como no soy muy bueno con las cookie

intente con window.name

ya funciona que no se resetee el porcentaje y la barra

pero ahora el error es que el porcentaje y la barra no cordina con los minutos restantes

el codigo es el siguiente:

Código PHP:

<?php
//echo time();
$hora = (1313452293 900);
$fecha date('m d Y H:i:s'$hora);
$tiempo $hora-time();
?>
Código Javascript:
Ver original
  1. <script>
  2. // TIEMPO RESTANTE
  3. var tiempo = <?php echo $tiempo; ?>;
  4. function minutos_restantes() {
  5. tiempo -= 1;
  6. var minutos = Math.floor(tiempo / 60);
  7. var segundos = tiempo % 60;
  8. if(segundos < 10) {
  9. segundos = '0' + segundos;
  10. } else if (minutos < 10) {
  11. minutos = '0' + minutos;
  12. }
  13. if(tiempo <= 0) {
  14. finalizarReloj()
  15. //setTimeout("location.href=" + document.URl);
  16. } else {
  17. document.getElementById('contador').innerHTML = minutos + ':' + segundos;
  18. }
  19. }
  20. setInterval('minutos_restantes();',1000);
  21. // BARRA Y PORCENTAJE
  22. function iniciarReloj(){
  23. window.name='{"horaArranque":'+new Date().getTime()+'}';
  24. window.intervalo=setInterval(continuarReloj,1000);
  25. }
  26. function continuarReloj(){
  27. if(!window.hArr)
  28. window.hArr=new Function('return '+window.name)();
  29. var horaArranque=window.hArr.horaArranque;
  30. var now=new Date().getTime();
  31. var t=now-horaArranque,l;
  32. if(l=document.getElementById('porciento'))l.innerHTML=parseInt(t/1000 % 100)+'%';
  33. if(l=document.getElementById('barra'))l.style.width=parseInt(t/1000 % 100)+'px';
  34. }
  35. function finalizarReloj(){
  36. window.name='';
  37. window.hArr=null;
  38. clearInterval(window.intervalo);
  39. window.intervalo=null;
  40. }
  41. onload=function(){
  42. if(window.name.indexOf('horaArranque')==-1)
  43. iniciarReloj();
  44. else
  45. window.intervalo=setInterval(continuarReloj,1000);
  46. }
  47. </script>

Código HTML:
<span id="contador"></span>
<div style="width: 200px; height: 20px; border: 1px solid gray" >
<div id="barra" style="width: 0%; height: 100%; background-color: pink"></div>
<span id="porciento"></span>
</div> 
Espero puedan ayudarme que este codigo se me hace cada vez mas fuerte
  #9 (permalink)  
Antiguo 16/08/2011, 19:46
 
Fecha de Ingreso: agosto-2011
Ubicación: Caracas
Mensajes: 6
Antigüedad: 10 años, 1 mes
Puntos: 1
Respuesta: Barra De Progreso Javascript

Hola Amigo te cuento que logre lo que queria de la siguiente forma

Código PHP:
Ver original
  1. <?php
  2. echo time().'<br />'; // usado opcional para conseguir time
  3. date_default_timezone_set('America/Caracas');
  4. $tiempo_guardado = 1313544885; // time usado para el ejemplo el original se guarda en base de datos
  5. $segundos_requeridos = 120;
  6. $tiempo_suma = ($tiempo_guardado + $segundos_requeridos);
  7. $tiempo_inicio = $tiempo_suma-time();
  8. ?>

Código Javascript:
Ver original
  1. <script>
  2. var tiempo_inicio = <?php echo $tiempo_inicio; ?>;
  3. var tiempo_final = <?php echo $segundos_requeridos; ?>;
  4. var barra_width = 194;
  5. function minutos_restantes() {
  6. tiempo_inicio -= 1;
  7. var minutos = Math.floor(tiempo_inicio / 60);
  8. var segundos = tiempo_inicio % 60;
  9. var restante = Math.floor(tiempo_final - tiempo_inicio);
  10. var progreso = Math.floor((barra_width * restante) / tiempo_final);
  11. var porc = Math.floor(progreso / 2);
  12. if(segundos < 10) {
  13. segundos = '0' + segundos;
  14. } else if (minutos < 10) {
  15. minutos = '0' + minutos;
  16. }
  17. if(tiempo_inicio <= 0) {
  18. document.getElementById('div_tiempo').innerHTML = '00:00';
  19. document.getElementById('barra-cargando').style.width = barra_width + "px";
  20. document.getElementById('pocentaje-cargando').innerHTML = "100%";
  21. //setTimeout("location.href=" + document.URl);
  22. } else {
  23. document.getElementById('div_tiempo').innerHTML = minutos + ':' + segundos;
  24. document.getElementById('barra-cargando').style.width = progreso + "px";
  25. document.getElementById('pocentaje-cargando').innerHTML = porc + "%";
  26. }
  27. }
  28. setInterval('minutos_restantes();',1000);
  29. </script>

Código CSS:
Ver original
  1. <style>
  2. #cuadro-cargando {
  3.     position: relative;
  4.     background: -moz-linear-gradient(top,#58acfa,#2e9afe,#0080ff,#2e9afe,#58acfa);
  5.     width: 200px;
  6.     height: 40px;
  7.     top: 15px;
  8.     margin: auto;
  9.     border: 0px solid transparent !important;
  10.     border-radius: 4px;
  11.     box-shadow: 0 0 4px #084b8a;
  12. }
  13.  
  14. #cuadro-cargando-fondo {
  15.     position: relative;
  16.     background: #0080ff;
  17.     width: 196px;
  18.     height: 35px;
  19.     top: 2px;
  20.     margin: auto;
  21.     border: 0px solid transparent !important;
  22.     border-radius: 4px;
  23.     box-shadow: inset 0 0 1px 1px #084b8a;
  24. }
  25.  
  26. #barra-cargando {
  27.     position: relative;
  28.     background: -moz-linear-gradient(top,#58acfa,#2e9afe,#0080ff,#2e9afe,#58acfa);
  29.     width: 1%;
  30.     max-width: 200px;
  31.     height: 33px;
  32.     border: 0px solid transparent !important;
  33.     border-radius: 4px;
  34.     box-shadow: 0 0 4px #084b8a;
  35.     top: 1px;
  36.     left: 1px;
  37.     -moz-transition-duration: 0.5s;
  38. }
  39.  
  40. #pocentaje-cargando {
  41.     position: relative;
  42.     top: -30px;
  43.     left: 75px;
  44.     width: 99.4%;
  45.     height: 97.2%;
  46.     color: #084b8a;
  47.     font-family: arial;
  48.     font-style: oblique;
  49.     font-size: 25px;
  50.     text-shadow: 0 1px 1px #ebebeb;
  51. }
  52. </style>

Código HTML:
Ver original
  1. <center><span id="div_tiempo"></span></center>
  2. <div id="cuadro-cargando">
  3. <div id="cuadro-cargando-fondo">
  4. <div id="barra-cargando"></div>
  5. <div id="pocentaje-cargando"></div>
  6. </div>
  7. </div>

me funciona bien lo dejo para el que lo necesite probado en firefox 5.0.1 y funciona perfect

gracias saludos desde venezuela

Etiquetas: javascript+php
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 17:29.