Foros del Web » Programando para Internet » Javascript »

cuenta atrás desde el mismo punto

 Estas en el tema de cuenta atrás desde el mismo punto en el foro de Javascript en Foros del Web. Vereis tengo que hacer una cuenta atras para el 29 de enero del 2010 y tengo este codigo y siempre me lo calcula desde el ...
  #1 (permalink)  
Antiguo 17/12/2009, 18:02
 
Fecha de Ingreso: octubre-2008
Mensajes: 184
Antigüedad: 15 años, 6 meses
Puntos: 1
cuenta atrás desde el mismo punto
Vereis tengo que hacer una cuenta atras para el 29 de enero del 2010 y tengo este codigo y siempre me lo calcula desde el mismo punto. He leido mil foros ya, y creo que es algo sobre el mktime(); pero la verdad que no lo consigo.

¿Alguien podria ayudarme?


<p style="text-align: center;">
<script type="text/javascript">// <![CDATA[
function faltan(una,dos,tres)
{
var actualiza = 1000;
uuna=una;
ddos=dos;
ttres=tres;

var ahora = new Date();
var faltan = uuna - ddos;

if (faltan >= 0)
{

var segundos = faltan;
var minutos = Math.floor(faltan/60);
var segundos_s = segundos%60;
if (segundos_s <= 9)
{
segundos_s= "0"+segundos_s;
}

var horas = Math.floor(minutos/60);

var minutos_s = minutos%60;
if (minutos_s <= 9)
{
minutos_s= "0"+minutos_s;
}

var dias = Math.floor(horas/24);
var horas_s = horas%24;
document.getElementById(ttres).value= " "+dias+" "+horas_s+" "+minutos_s+" "+segundos_s;
//document.hora.elements["reloj" + ttres].value= horas_s+":"+minutos_s+":"+segundos_s;
ddos=ddos+1;

setTimeout("faltan("+uuna+","+ddos+","+ttres+")",a ctualiza);
}
else
{
window.location.href="ganador.php?id="+ttres;
return true;
}

}
// ]]></script>
</p>
<!-- .Estilo1 { font-family: "Adobe Garamond Pro Bold" } #apDiv1 { position:absolute; left:211px; top:186px; width:842px; height:155px; z-index:1; } #apDiv2 { position:absolute; left:268px; top:347px; width:86px; height:21px; z-index:2; } #apDiv3 { position:absolute; left:48px; top:333px; width:100px; height:27px; z-index:3; } #apDiv4 { position:absolute; left:62px; top:380px; width:73px; height:27px; z-index:4; } #apDiv5 { position:absolute; left:158px; top:414px; width:71px; height:26px; z-index:5; } #apDiv6 { position:absolute; left:352px; top:319px; width:648px; height:28px; z-index:6; } -->
<div id="apDiv1" style="text-align: center;">
<p style="text-align: left;"> </p>
<p style="text-align: left;"> </p>
<p style="text-align: left;"> </p>
<p style="text-align: left;"> </p>
<p style="text-align: left;"> </p>
<p style="text-align: left;"> </p>
<p style="text-align: left;"> </p>
<div id="apDiv1">
<p style="text-align: right;"> </p>
<p style="text-align: right;"> </p>
</div>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
</div>
<div id="contenedor" style="text-align: center;">
<div class="caja2"><form id="tiempo">
<p align="center"> </p>
</form>
<div>
<script type="text/javascript">// <![CDATA[
window.onload = function()
{
faltan(1262646000,1257862542,38); }
// ]]></script>
<p style="text-align: center;"> </p>
</div>
<p align="center"> </p>
<p class="Estilo1" align="center"> </p>
<p class="Estilo1" align="center"> </p>
<p class="Estilo1" align="center"> </p>
<p class="Estilo1" align="center"> </p>
<p class="Estilo1" align="center"> </p>
<p class="Estilo1" align="center"> </p>
<p class="Estilo1" align="center"> </p>
<p class="Estilo1" align="center"> </p>
<p class="Estilo1" align="left"> </p>
<p class="Estilo1" align="left"> </p>
<p class="Estilo1" align="left"> </p>
<p class="Estilo1" align="left"> </p>
<p class="Estilo1" align="left"> </p>
<p class="Estilo1" align="left"> </p>
<p class="Estilo1" align="left"> </p>
<p class="Estilo1" align="left"> </p>
<p class="Estilo1" align="left"> </p>
<p class="Estilo1" align="left"> </p>
<p class="Estilo1" align="left"> </p>
<p class="Estilo1" align="left"> </p>
<p class="Estilo1" align="left"> </p>
<p class="Estilo1" align="left"> </p>
<p class="Estilo1" align="left"> </p>
<p class="Estilo1" align="left"> </p>
<p class="Estilo1" align="left"> </p>
<p class="Estilo1" align="left"> </p>
<p class="Estilo1" align="left"> </p>
</div>
</div>
<div style="position: absolute; left: 339px; top: 300px; width: 100px; height: 100px;">
<div id="apDiv1">
<p style="text-align: right;"><input id="38" style="border: 0pt none; color: #0099ff; font-size: 80pt;" name="reloj38" type="text" /></p>
</div>
</div>
<div style="position: absolute; left: 519px; top: 427px; width: 108px; height: 23px;"><span style="font-family: verdana,geneva;"><strong><span style="font-size: medium;">DIAS</span></strong></span></div>
<div style="position: absolute; left: 661px; top: 428px; width: 100px; height: 17px;"><span style="font-size: medium;"><span style="font-family: verdana,geneva;"><strong>HRS</strong></span></span></div>
<div style="position: absolute; left: 836px; top: 429px; width: 103px; height: 24px;"><span style="font-size: medium;"><strong><span style="font-family: verdana,geneva;">MIN</span></strong></span></div>
<div style="position: absolute; left: 1031px; top: 432px; width: 102px; height: 16px;"><span style="font-size: medium;"><strong>SEG</strong></span></div>
<div style="position: absolute; left: 469px; top: 455px; width: 816px; height: 229px;"><img src="images/club%20teatinos.png" border="0" width="600" height="514" /></div>
  #2 (permalink)  
Antiguo 17/12/2009, 18:30
Avatar de zerokilled
Javascripter
  
Fecha de Ingreso: abril-2009
Ubicación: Isla del Encanto, La Borinqueña [+>==]
Mensajes: 8.050
Antigüedad: 15 años
Puntos: 1485
Respuesta: cuenta atrás desde el mismo punto
sucede por el segundo parametro que le pasas la primera vez que invocas la funcion.
Código: 
window.onload = function()
{
faltan(1262646000,1257862542,38); }
pues se trata de un valor fijo que aparentemente apunta a la fecha 10 de noviembre del 2009 si le añades los tres digitos del milisegundos. tienes que pasarle la fecha actual con el objeto Date.
__________________
la maldad es una virtud humana,
y la espiritualidad es la lucha del hombre contra su maldad.
  #3 (permalink)  
Antiguo 18/12/2009, 04:40
 
Fecha de Ingreso: octubre-2008
Mensajes: 184
Antigüedad: 15 años, 6 meses
Puntos: 1
Respuesta: cuenta atrás desde el mismo punto
perdona pero no te entiendo exactamente, la fecha apunta a ese dia, ya tiene que tener una fecha origen y otra destino, pero creo (ya que no entiendo demasiado ni de javascripit y del timestamp) que los 3 datos son, fecha de fin, fecha de oy y un intervalo (todo esto en segundos), entonces ¿deberia cambiar la fecha que tu me indiaste?
  #4 (permalink)  
Antiguo 18/12/2009, 06:54
Avatar de Adler
Colaborador
  
Fecha de Ingreso: diciembre-2006
Mensajes: 4.671
Antigüedad: 17 años, 4 meses
Puntos: 126
Respuesta: cuenta atrás desde el mismo punto
Hola

Con javascript

Código Javascript: 
Ver original
  1. <html>
  2. <head>
  3. <style type="text/css">
  4. #calContador {width:300px;}
  5. #calFondoEnunciado {background-color:#6B8E23;color:#FFFFFF;font-family:Arial;font-size:12px;border: 1px solid #C9C9C9;border-width: 1px 1px 0px 1px;text-align:center;}
  6. #calCuerpo td{background-color:#6B8E23;color:#FFFFFF;font-family:Arial;font-size:11px;font-weight:bold;text-align:center;}
  7. #calCuerpo td.cont{background-color:#FFFF00;color:#000000;}
  8. </style>
  9.  
  10. <script type="text/javascript">
  11. function crono(){
  12. var dia = 04, mes = 6, anio = 2009, hora = 22, minutos = 46 //aquí es donde has de establecer la fecha final. Recuerda que enero es el mes 0, así el 5 es junio.
  13. var fechaFinal = new Date(anio,mes,dia,hora,minutos)
  14.  
  15. var hoy = new Date()
  16. diferencia = fechaFinal.getTime() - hoy.getTime()
  17.  
  18. dias =diferencia/1000/60/60/24
  19. diasTotales = parseInt(dias)
  20. horasTotales = diferencia/1000/60/60 
  21. horasReales = parseInt(horasTotales) - (parseInt(diasTotales)*24) 
  22. minutosFaltan = horasTotales - parseInt(horasTotales)
  23. minutosFaltan2 = minutosFaltan*1000*60*60
  24. minutosFaltan2 = minutosFaltan2/1000/60
  25. minutosFinales = parseInt(minutosFaltan2)
  26. segundosFaltan = minutosFaltan2 - parseInt(minutosFaltan2)
  27. segundosFaltan2 = segundosFaltan*1000*60
  28. segundosFaltan2 = parseInt(segundosFaltan2/1000)
  29.  
  30. falta = "<div id='calContador'><div id='calFondoEnunciado'>Tiempo que Falta hasta el " + dia + "/" + mes + "/" + anio + " " + hora + ":" + minutos + "</div><div id='calCuerpo'><table style='table-layout:fixed;' bgcolor=' #C9C9C9' border='0px' cellspacing='1px' cellspadding='0px' width='300px'><tr>";
  31.  
  32. if(diasTotales < 10) {diasTotales = "0" + diasTotales;}
  33. if(horasReales < 10) {horasReales = "0" + horasReales;}
  34. if(minutosFinales < 10) {minutosFinales = "0" + minutosFinales;}
  35. if(segundosFaltan2 < 10) {segundosFaltan2 = "0" + segundosFaltan2;}
  36.  
  37. diasTxt = "<td>Días</td><td class='cont'>" + diasTotales + "</td>";
  38. horasTxt = "<td>Horas</td><td class='cont'>" + horasReales + "</td>";
  39. minutosTxt = "<td>Minutos</td><td class='cont'>" + minutosFinales + "</td>";
  40. segundosTxt = "<td>Segundos</td><td class='cont'>" + segundosFaltan2 + "</td></tr></table></div></div>";
  41.  
  42. if (Math.abs(diferencia) <= 900) {
  43. contadorCompleto = falta + "<td class='cont'>Se ha cumplido el tiempo</td></tr></table></div></div>";
  44. clearInterval(crono);
  45. }
  46. else
  47. {
  48. contadorCompleto = falta +  diasTxt + horasTxt + minutosTxt + segundosTxt
  49. setInterval("crono(),1000")
  50. }
  51. document.getElementById('contador_regresivo').innerHTML = contadorCompleto;
  52. }
  53. window.onload=crono;
  54. </script>
  55. </head>
  56. <body>
  57. <div id="contador_regresivo" style="text-align:center"></div>
  58. </body>
  59. </html>

Con php

Código PHP: 
Ver original
  1. <html>
  2. <head>
  3. <style type="text/css">
  4. #calContador {width:300px;}
  5. #calFondoEnunciado {background-color:#6B8E23;color:#FFFFFF;font-family:Arial;font-size:12px;border: 1px solid #C9C9C9;border-width: 1px 1px 0px 1px;text-align:center;}
  6. #calCuerpo td{background-color:#6B8E23;color:#FFFFFF;font-family:Arial;font-size:11px;font-weight:bold;text-align:center;}
  7. #calCuerpo td.cont{background-color:#FFFF00;color:#000000;}
  8. </style>
  9.  
  10. <script type="text/javascript">
  11. function crono(){
  12. var dia = <%=Day(Now)%>, mes = <%=Month(Now)-1%>, anio = <%=Year(Now)%>, hora = <%=Hour(Now)%>, minutos = <%=Minute(Now)+5%> 
  13. var fechaFinal = new Date(anio,mes,dia,hora,minutos)
  14.  
  15. var serv_ahora =  new Date();
  16. serv_ahora.getFullYear(<%=Year(Now)%>);
  17. serv_ahora.getMonth(<%=Month(Now)-1%>); // Enero es el mes 0
  18. serv_ahora.getDate(<%=Day(Now)%>);
  19. serv_ahora.getHours(<%=Hour(Now)%>);
  20. serv_ahora.getMinutes(<%=Minute(Now)%>);
  21. diferencia = fechaFinal.getTime() - serv_ahora.getTime()
  22.  
  23. dias =diferencia/1000/60/60/24
  24. diasTotales = parseInt(dias)
  25. horasTotales = diferencia/1000/60/60 
  26. horasReales = parseInt(horasTotales) - (parseInt(diasTotales)*24) 
  27. minutosFaltan = horasTotales - parseInt(horasTotales)
  28. minutosFaltan2 = minutosFaltan*1000*60*60
  29. minutosFaltan2 = minutosFaltan2/1000/60
  30. minutosFinales = parseInt(minutosFaltan2)
  31. segundosFaltan = minutosFaltan2 - parseInt(minutosFaltan2)
  32. segundosFaltan2 = segundosFaltan*1000*60
  33. segundosFaltan2 = parseInt(segundosFaltan2/1000)
  34.  
  35. falta = "<div id='calContador'><div id='calFondoEnunciado'>Tiempo que Falta hasta el " + dia + "/" + mes + "/" + anio + " " + hora + ":" + minutos + "</div><div id='calCuerpo'><table style='table-layout:fixed;' bgcolor=' #C9C9C9' border='0px' cellspacing='1px' cellspadding='0px' width='300px'><tr>";
  36.  
  37. if(diasTotales < 10) {diasTotales = "0" + diasTotales;}
  38. if(horasReales < 10) {horasReales = "0" + horasReales;}
  39. if(minutosFinales < 10) {minutosFinales = "0" + minutosFinales;}
  40. if(segundosFaltan2 < 10) {segundosFaltan2 = "0" + segundosFaltan2;}
  41.  
  42. diasTxt = "<td class='cont'>" + diasTotales + "</td><td>Días</td>";
  43. horasTxt = "<td class='cont'>" + horasReales + "</td><td>Horas</td>";
  44. minutosTxt = "<td class='cont'>" + minutosFinales + "</td><td>Minutos</td>";
  45. segundosTxt = "<td class='cont'>" + segundosFaltan2 + "</td><td>Segundos</td></tr></table></div></div>";
  46.  
  47. if (Math.abs(diferencia) <= 900) {
  48. contadorCompleto = falta + "<td class='cont'>Se ha cumplido el tiempo</td></tr></table></div></div>";
  49. clearInterval(crono);
  50. }
  51. else
  52. {
  53. contadorCompleto = falta +  diasTxt + horasTxt + minutosTxt + segundosTxt
  54. setInterval("crono(),1000")
  55. }
  56. document.getElementById('contador_regresivo').innerHTML = contadorCompleto;
  57. }
  58. window.onload=crono;
  59. </script>
  60. </head>
  61. <body>
  62. <div id="contador_regresivo" style="text-align:center"></div>
  63. </body>
  64. </html>

Este último cambiando las partes de ASP claro está

Suerte
__________________
Los formularios se envían/validan con un botón Submit
<input type="submit" value="Enviar" style="background-color:#0B5795; font:bold 10px verdana; color:#FFF;" />
  #5 (permalink)  
Antiguo 18/12/2009, 08:05
 
Fecha de Ingreso: octubre-2008
Mensajes: 184
Antigüedad: 15 años, 6 meses
Puntos: 1
Respuesta: cuenta atrás desde el mismo punto
Muchas gracias a todos por contestar, pero la verdad que lo que necesitaria es la modificacion de ese codigo, ya que es para un sistema joomla concreto y otros me dan problemas, este codigo ya esta probado y funciona correctamente bajo todas las circunstancias, asi que lo que busco es ayuda sobre la modificiacion del codigo.

Gracias denuevo!!
  #6 (permalink)  
Antiguo 18/12/2009, 08:23
Avatar de Adler
Colaborador
  
Fecha de Ingreso: diciembre-2006
Mensajes: 4.671
Antigüedad: 17 años, 4 meses
Puntos: 126
Respuesta: cuenta atrás desde el mismo punto
Hola

Entonces es lo que ya te comentó zerokilled, felices fiestas, por si no volvemos a coincidir. Además no estás usando la variable ahora. Has de comparar la fecha límite con la fecha actual, no con una fecha estática

Suerte
__________________
Los formularios se envían/validan con un botón Submit
<input type="submit" value="Enviar" style="background-color:#0B5795; font:bold 10px verdana; color:#FFF;" />
  #7 (permalink)  
Antiguo 18/12/2009, 10:28
 
Fecha de Ingreso: octubre-2008
Mensajes: 184
Antigüedad: 15 años, 6 meses
Puntos: 1
Respuesta: cuenta atrás desde el mismo punto
perdona mi torpeza, pero no te entiendo.
Felices fiestas a ti tambien!!
  #8 (permalink)  
Antiguo 18/12/2009, 10:37
Avatar de zerokilled
Javascripter
  
Fecha de Ingreso: abril-2009
Ubicación: Isla del Encanto, La Borinqueña [+>==]
Mensajes: 8.050
Antigüedad: 15 años
Puntos: 1485
Respuesta: cuenta atrás desde el mismo punto
lo que sucede es, para que el conteo regresivo sea correcto en cada carga del documento se le tiene que pasar un timestamp distinto. en tu codigo le estas pasando uno fijo y por eso el conteo regresivo siempre comienza desde el mismo punto. para obtener un timestamp del momento en que se carga el documento es cuestion de invocar la funcion Date sin ningun parametro. eso es lo que tienes que poner en el segundo parametro del codigo que antes te señale.

saludos Adler, ultimamente ya no nos encontramos
__________________
la maldad es una virtud humana,
y la espiritualidad es la lucha del hombre contra su maldad.
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


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 08:42.