hola gente, yo de nuevo jeje; pero ya lo solucione
pero ahora tengo un pequeño problema, que es que no me visualiza el contenido del div a quien llamo y muestro mi barrita progresiva + publicidad + botón de salto de publicidad; solo me muestra el div con un texto diciendo "cargando..." luego de 20 segundos (el tiempo a que le he dado para mostrarlo y cierre, me funciona de 10, pero no me muestra nada en su interior; les paso los datos y luego 2 links (en una esta crudo, y en la otra ya implementada en mi website).
index.html Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<style type="text/css">
#apDiv1 {
/*position:absolute;*/
position:relative;
width:70%;
height:500px;
z-index:1;
left:100px;
top:100px;
border:#000 solid;
}
.apDiv2 {
position:absolute;
left:00px;
top:0px;
width:100%;
height:500px;
z-index:2;
background:#FFF;
border:#00F solid;
}
</style>
<script type='text/javascript'>
// Variables para controlar el inicio y termino de la cuenta
var inicio = false;
var termino = false;
// Variables editables, para personalizar la barra de porcentaje
var tam_barra = 220; // Tamaño de la barra en pixeles
var seg_barra = 15; // Segundos de trabajo hasta 100%
// Se toma la diferencia con respecto el tiempo actual
var date = new Date();
var milisec_barra = seg_barra * 1000;
var milisec_final = date.getTime() + milisec_barra;
// Funcion que inicia el proceso
function iniciar_proceso()
{
// Solo si no a iniciado el proceso se inicia
if (inicio == false)
{
inicio = true;
aumenta_barra();
}
}
// Funcion que aumenta el porcentaje de la barra
function aumenta_barra()
{
// Solo si no a terminado sigue aumentando
if (termino == false)
{
// Se toma el tiempo actual
var ahora = new Date();
milisec_ahora = ahora.getTime();
// Se toma el tiempo restante para llegar a 100%
var milisec_restante = Math.ceil((milisec_final - milisec_ahora) / 100);
if (milisec_restante < 0)
{
milisec_restante = 0;
}
// Se divide el tiempo restante en horas, minutos y segundos
var horas = Math.floor(milisec_restante / 36000);
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 (horas > 0)
{
var salida = horas + " horas, " + minutos + " minutos y " + segundos + " segundos.";
}
else
{
if (minutos > 0)
{
var salida = minutos + " minuto(s) y " + segundos + " segundos.";
}
else
{
var salida = segundos + " segundos.";
}
}
// Se genera el porcentaje a partir del tiempo restante para el 100%
milisec_restante = Math.floor(milisec_restante) / 10;
var porcentaje = Math.floor(((milisec_barra - milisec_restante * 1000) / milisec_barra) * 100);
if (porcentaje < 0)
{
porcentaje = 1;
}
// Se verifica si se llego al tiempo final
if (milisec_final >= milisec_ahora)
{
// Si aun no termina solo se muestra el porcentaje
document.getElementById("div_boton").innerHTML = salida;
document.getElementById("div_boton2").innerHTML = "<input class='form' type='button' value='Saltar Publicidad'>";
document.getElementById("div_barra").innerHTML = porcentaje + "%";
}
else
{
// Si termina se puede continuar mostrando o enviando alguna informacion
termino = true;
/*document.forma.submit();*/ // Mandar que termino el trabajo para permitir continuar
document.getElementById("div_barra").innerHTML = "100%";
//document.getElementById("div_boton").innerHTML = "<input class='form' type='button' value='Continuar'>";
document.getElementById("div_boton").innerHTML = "Cargando Juego...";
document.getElementById("div_boton2").style.display = "none";
}
document.getElementById("div_completado").style.width = (porcentaje / 100) * tam_barra + "px";
setTimeout("aumenta_barra();", 100);
}
}
// Se inicia el proceso despues de 300 milisegundos, se puede editar
window.setTimeout("iniciar_proceso()", 100);
</script>
<style type="text/css">
div#vacio
{
background-color: #e4e4e4;
border: 1px solid black;
width: 220px;
padding: 0px;
padding-top: 0px;
padding-left: 0px;
padding-right: 0px;
padding-bottom: 0px;
height:20px;
}
div#div_completado
{
position: relative;
top: 0px;
left: 0px;
background-color: #9af;
/*background-image:url(ajax-loader.gif);*/
background-repeat:no-repeat;
width: 0px;
padding-top: 5px;
padding: 0px;
}
div#div_barra
{
position: relative;
top: 0px;
left: 2px;
color: #000;
padding: 0px;
padding-top: 0px;
font-family: Verdana, Geneva, sans-serif;
font-size: 14px;
}
div#div_boton
{
position: relative;
border:#000 solid;
top: 0px;
left: 0px;
height: 20px;
width:200px;
text-align: center;
padding: 0px;
padding-top: 1px;
font-family: Verdana, Geneva, sans-serif;
font-size: 14px;
}
div#div_boton2
{
position: relative;
border:#00F solid;
top: 0px;
left: 0px;
width:200px;
height: 30px;
text-align: center;
padding: 0px;
padding-top: 0px;
font-family: Verdana, Geneva, sans-serif;
font-size: 14px;
}
</style>
</head>
<body onload = 'setTimeout("document.getElementById(\"algo\").style.display = \"none\"",17000)'>
<div id="apDiv1">
<center>
REPRODUCTOR FLASH - REPRODUCTOR FLASH <br />
REPRODUCTOR FLASH - REPRODUCTOR FLASH <br />
REPRODUCTOR FLASH - REPRODUCTOR FLASH <br />
REPRODUCTOR FLASH - REPRODUCTOR FLASH <br />
REPRODUCTOR FLASH - REPRODUCTOR FLASH
</center>
<div id="algo" class="apDiv2">
<center>
PUBLICIDAD - PUBLICIDAD<br />
PUBLICIDAD - PUBLICIDAD <br />
PUBLICIDAD - PUBLICIDAD <br />
PUBLICIDAD - PUBLICIDAD<br />
PUBLICIDAD - PUBLICIDAD
</center>
<div align="center">
<div id="vacio" align="left">
<div id="div_completado">
<div id="div_barra"></div>
</div>
</div>
<div id="div_boton"></div>
<div id="div_boton2"></div>
</div>
</div>
</div>
</body>
</html> Funcionando Aquí:
http://juegosx.16mb.com/temp/index2.html
-------------------------------------
Y ya implementado aquí:
http://juegosx.16mb.com/index.php/game/41/Sketchman alguien podría decirme q sucede???