Barra De Progreso Javascript 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;
}
?>
codigo probado en firefox 5.0.1
