Ver Mensaje Individual
  #1 (permalink)  
Antiguo 14/08/2011, 18:34
keyvin2012
 
Fecha de Ingreso: agosto-2011
Ubicación: Caracas
Mensajes: 6
Antigüedad: 12 años, 7 meses
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