Foros del Web » Programando para Internet » Javascript »

Cuenta regresiva con hora del server

Estas en el tema de Cuenta regresiva con hora del server en el foro de Javascript en Foros del Web. Hola amigos! Tengo una cuenta regresiva en JQuery, aquí está el código: Código HTML: <script src= "http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type= "text/javascript" charset= "utf-8" > </script> <script src= ...
  #1 (permalink)  
Antiguo 23/05/2012, 19:41
 
Fecha de Ingreso: febrero-2009
Mensajes: 176
Antigüedad: 15 años, 2 meses
Puntos: 1
Cuenta regresiva con hora del server

Hola amigos!
Tengo una cuenta regresiva en JQuery, aquí está el código:

Código HTML:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.countdown.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
	$('#counter').countdown({
		image: 'img/digits.png',
		startTime: '00:00:03:10',
		timerEnd: function(){ 
			$("#container").fadeOut("slow"); 
			}
		});
	});
</script> 
El archivo "jquery.conutdown.js":

Código HTML:
jQuery.fn.countdown = function(userOptions)
{
  // Default options
  var options = {
    stepTime: 60,
    // startTime and format MUST follow the same format.
    // also you cannot specify a format unordered (e.g. hh:ss:mm is wrong)
    format: "dd:hh:mm:ss",
    startTime: "00:00:03:10",
    digitImages: 6,
    digitWidth: 53,
    digitHeight: 77,
    timerEnd: function(){},
    image: "digits.png"
  };
  var digits = [], interval;

  // Draw digits in given container
  var createDigits = function(where) 
  {
    var c = 0;
    // Iterate each startTime digit, if it is not a digit
    // we'll asume that it's a separator
    for (var i = 0; i < options.startTime.length; i++)
    {
      if (parseInt(options.startTime[i]) >= 0) 
      {
        elem = $('<div id="cnt_' + i + '" class="cntDigit" />').css({
          height: options.digitHeight * options.digitImages * 10, 
          float: 'left', background: 'url(\'' + options.image + '\')',
          width: options.digitWidth});
        digits.push(elem);
        margin(c, -((parseInt(options.startTime[i]) * options.digitHeight *
                              options.digitImages)));
        digits[c].__max = 9;
        // Add max digits, for example, first digit of minutes (mm) has 
        // a max of 5. Conditional max is used when the left digit has reach
        // the max. For example second "hours" digit has a conditional max of 4 
        switch (options.format[i]) {
          case 'h':
            digits[c].__max = (c % 2 == 0) ? 2: 9;
            if (c % 2 == 0)
              digits[c].__condmax = 4;
            break;
          case 'd': 
            digits[c].__max = 9;
            break;
          case 'm':
          case 's':
            digits[c].__max = (c % 2 == 0) ? 5: 9;
        }
        ++c;
      }
      else 
        elem = $('<div class="cntSeparator"/>').css({float: 'left'})
                .text(options.startTime[i]);

      where.append(elem)
    }
  };
  
  // Set or get element margin
  var margin = function(elem, val) 
  {
    if (val !== undefined)
      return digits[elem].css({'marginTop': val + 'px'});

    return parseInt(digits[elem].css('marginTop').replace('px', ''));
  };

  // Makes the movement. This is done by "digitImages" steps.
  var moveStep = function(elem) 
  {
    digits[elem]._digitInitial = -(digits[elem].__max * options.digitHeight * options.digitImages);
    return function _move() {
      mtop = margin(elem) + options.digitHeight;
      if (mtop == options.digitHeight) {
        margin(elem, digits[elem]._digitInitial);
        if (elem > 0) moveStep(elem - 1)();
        else 
        {
          clearInterval(interval);
          for (var i=0; i < digits.length; i++) margin(i, 0);
          options.timerEnd();
          return;
        }
        if ((elem > 0) && (digits[elem].__condmax !== undefined) && 
            (digits[elem - 1]._digitInitial == margin(elem - 1)))
          margin(elem, -(digits[elem].__condmax * options.digitHeight * options.digitImages));
        return;
      }

      margin(elem, mtop);
      if (margin(elem) / options.digitHeight % options.digitImages != 0)
        setTimeout(_move, options.stepTime);

      if (mtop == 0) digits[elem].__ismax = true;
    }
  };

  $.extend(options, userOptions);
  this.css({height: options.digitHeight, overflow: 'hidden'});
  createDigits(this);
  interval = setInterval(moveStep(digits.length - 1), 1000);
};
Esto lo que hace es una cuenta regresiva en el momento que vos ingresás a la página. Lo que necesito es que haga la cuenta regresiva de los días que faltan para largar un sitio online. Es decir, tengo un sitio que se va a largar en 30 días, quiero que la cuenta regresiva respete esos 30 días reales. Se entiende?

Espero puedan ayudarme.
Muchas gracias!

Última edición por juancile; 24/05/2012 a las 16:08
  #2 (permalink)  
Antiguo 24/09/2012, 11:02
Avatar de zeuzft  
Fecha de Ingreso: junio-2009
Ubicación: peru
Mensajes: 358
Antigüedad: 14 años, 10 meses
Puntos: 2
Respuesta: Cuenta regresiva con hora del server

hola que tal; tengo el mismo problema; pero tengo que indicar la fecha y hora de fin; y cuando llegue tiene que arrojar un mensaje y redireccionar la pagina...; alguna idea?
  #3 (permalink)  
Antiguo 24/09/2012, 11:58
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 16 años, 10 meses
Puntos: 1567
Respuesta: Cuenta regresiva con hora del server

Cita:
Iniciado por juancile Ver Mensaje
Hola amigos!
Tengo una cuenta regresiva en JQuery, aquí está el código:

Código HTML:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.countdown.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
	$('#counter').countdown({
		image: 'img/digits.png',
		startTime: '00:00:03:10',
		timerEnd: function(){ 
			$("#container").fadeOut("slow"); 
			}
		});
	});
</script> 
El archivo "jquery.conutdown.js":

Código HTML:
jQuery.fn.countdown = function(userOptions)
{
  // Default options
  var options = {
    stepTime: 60,
    // startTime and format MUST follow the same format.
    // also you cannot specify a format unordered (e.g. hh:ss:mm is wrong)
    format: "dd:hh:mm:ss",
    startTime: "00:00:03:10",
    digitImages: 6,
    digitWidth: 53,
    digitHeight: 77,
    timerEnd: function(){},
    image: "digits.png"
  };
  var digits = [], interval;

  // Draw digits in given container
  var createDigits = function(where) 
  {
    var c = 0;
    // Iterate each startTime digit, if it is not a digit
    // we'll asume that it's a separator
    for (var i = 0; i < options.startTime.length; i++)
    {
      if (parseInt(options.startTime[i]) >= 0) 
      {
        elem = $('<div id="cnt_' + i + '" class="cntDigit" />').css({
          height: options.digitHeight * options.digitImages * 10, 
          float: 'left', background: 'url(\'' + options.image + '\')',
          width: options.digitWidth});
        digits.push(elem);
        margin(c, -((parseInt(options.startTime[i]) * options.digitHeight *
                              options.digitImages)));
        digits[c].__max = 9;
        // Add max digits, for example, first digit of minutes (mm) has 
        // a max of 5. Conditional max is used when the left digit has reach
        // the max. For example second "hours" digit has a conditional max of 4 
        switch (options.format[i]) {
          case 'h':
            digits[c].__max = (c % 2 == 0) ? 2: 9;
            if (c % 2 == 0)
              digits[c].__condmax = 4;
            break;
          case 'd': 
            digits[c].__max = 9;
            break;
          case 'm':
          case 's':
            digits[c].__max = (c % 2 == 0) ? 5: 9;
        }
        ++c;
      }
      else 
        elem = $('<div class="cntSeparator"/>').css({float: 'left'})
                .text(options.startTime[i]);

      where.append(elem)
    }
  };
  
  // Set or get element margin
  var margin = function(elem, val) 
  {
    if (val !== undefined)
      return digits[elem].css({'marginTop': val + 'px'});

    return parseInt(digits[elem].css('marginTop').replace('px', ''));
  };

  // Makes the movement. This is done by "digitImages" steps.
  var moveStep = function(elem) 
  {
    digits[elem]._digitInitial = -(digits[elem].__max * options.digitHeight * options.digitImages);
    return function _move() {
      mtop = margin(elem) + options.digitHeight;
      if (mtop == options.digitHeight) {
        margin(elem, digits[elem]._digitInitial);
        if (elem > 0) moveStep(elem - 1)();
        else 
        {
          clearInterval(interval);
          for (var i=0; i < digits.length; i++) margin(i, 0);
          options.timerEnd();
          return;
        }
        if ((elem > 0) && (digits[elem].__condmax !== undefined) && 
            (digits[elem - 1]._digitInitial == margin(elem - 1)))
          margin(elem, -(digits[elem].__condmax * options.digitHeight * options.digitImages));
        return;
      }

      margin(elem, mtop);
      if (margin(elem) / options.digitHeight % options.digitImages != 0)
        setTimeout(_move, options.stepTime);

      if (mtop == 0) digits[elem].__ismax = true;
    }
  };

  $.extend(options, userOptions);
  this.css({height: options.digitHeight, overflow: 'hidden'});
  createDigits(this);
  interval = setInterval(moveStep(digits.length - 1), 1000);
};
Esto lo que hace es una cuenta regresiva en el momento que vos ingresás a la página. Lo que necesito es que haga la cuenta regresiva de los días que faltan para largar un sitio online. Es decir, tengo un sitio que se va a largar en 30 días, quiero que la cuenta regresiva respete esos 30 días reales. Se entiende?

Espero puedan ayudarme.
Muchas gracias!
Cita:
Iniciado por zeuzft Ver Mensaje
hola que tal; tengo el mismo problema; pero tengo que indicar la fecha y hora de fin; y cuando llegue tiene que arrojar un mensaje y redireccionar la pagina...; alguna idea?
Prueben con esta script
http://foros.emprear.com/javascript/fecha_atras/

Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #4 (permalink)  
Antiguo 24/09/2012, 12:36
Avatar de zeuzft  
Fecha de Ingreso: junio-2009
Ubicación: peru
Mensajes: 358
Antigüedad: 14 años, 10 meses
Puntos: 2
Respuesta: Cuenta regresiva con hora del server

Gracias emprear; en el script que nos das; la ruta a la envias es un directorio; pero si quiero enviar el formulario es decir ejecutar el POST?
  #5 (permalink)  
Antiguo 24/09/2012, 12:46
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 16 años, 10 meses
Puntos: 1567
Respuesta: Cuenta regresiva con hora del server

Cita:
Iniciado por zeuzft Ver Mensaje
Gracias emprear; en el script que nos das; la ruta a la envias es un directorio; pero si quiero enviar el formulario es decir ejecutar el POST?
no se si te entiendo bien, pero creo qe tendrías que modificar el js, fijate yo uso

Código Javascript:
Ver original
  1. if (Redirigir == 1){
  2. location.replace(Destino);
  3. }else{
  4. document.getElementById("cuenta_atras").innerHTML = MensajeFinal;
  5.     return;
  6. }
es decir, una simple redirección, podrías cambiar ese location.replace por tu propia función

SAludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #6 (permalink)  
Antiguo 25/09/2012, 00:00
Avatar de zeuzft  
Fecha de Ingreso: junio-2009
Ubicación: peru
Mensajes: 358
Antigüedad: 14 años, 10 meses
Puntos: 2
Pregunta Respuesta: Cuenta regresiva con hora del server

Cita:
Iniciado por emprear Ver Mensaje
no se si te entiendo bien, pero creo qe tendrías que modificar el js, fijate yo uso

Código Javascript:
Ver original
  1. if (Redirigir == 1){
  2. location.replace(Destino);
  3. }else{
  4. document.getElementById("cuenta_atras").innerHTML = MensajeFinal;
  5.     return;
  6. }
es decir, una simple redirección, podrías cambiar ese location.replace por tu propia función

SAludos

eso al terminar; pero emitir un mensaje d alerta cuando falten 10 min; q variable deberia usar xq si le pongo
Código:
if ('%%M%%'<=10) alert ('le quedan 10 minutos');
no toma la variable M
  #7 (permalink)  
Antiguo 25/09/2012, 09:31
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 16 años, 10 meses
Puntos: 1567
Respuesta: Cuenta regresiva con hora del server

Cita:
Iniciado por zeuzft Ver Mensaje
eso al terminar; pero emitir un mensaje d alerta cuando falten 10 min; q variable deberia usar xq si le pongo
Código:
if ('%%M%%'<=10) alert ('le quedan 10 minutos');
no toma la variable M
Aqui

Código Javascript:
Ver original
  1. function cuentaAtras(secs) {
  2. ////////// alerta cuando falte 1 minuto
  3.      if (secs == 60) { // 600 para 10 minutos
  4.     alert('falta 1 minuto');
  5.     }
  6. ///////// fin alerta
  7.   if (secs < 0) {
  8.  
  9. if (Redirigir == 1){
  10. location.replace(Destino);
  11. }else{
  12. document.getElementById("cuenta_atras").innerHTML = MensajeFinal;
  13.     return;
  14. }
  15.   }
  16.  var MostrarCadena = MostrarFormato.replace(/%%D%%/g, calculaTiempo(secs,86400,100000));
  17.   MostrarCadena = MostrarCadena.replace(/%%H%%/g, calculaTiempo(secs,3600,24));
  18.   MostrarCadena = MostrarCadena.replace(/%%M%%/g, calculaTiempo(secs,60,60));
  19.   MostrarCadena = MostrarCadena.replace(/%%S%%/g, calculaTiempo(secs,1,60));
  20.  
  21.   document.getElementById("cuenta_atras").innerHTML = MostrarCadena;
  22.   if (ContadorActivo)
  23.     setTimeout("cuentaAtras(" + (secs+Pasos) + ")", TiempoAfuera);
  24. }

Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.

Etiquetas: countdown
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 18:33.