Foros del Web » Programando para Internet » Javascript » Frameworks JS »

Usar multiples relojes sin duplicar el codigo...

 Estas en el tema de Usar multiples relojes sin duplicar el codigo... en el foro de Frameworks JS en Foros del Web. Tengo el siguiente codigo @import url("http://static.forosdelweb.com/clientscript/vbulletin_css/geshi.css"); Código Javascript : Ver original < script type = "text/javascript" > $ ( function ( ) {   var ...
  #1 (permalink)  
Antiguo 18/12/2012, 23:55
 
Fecha de Ingreso: septiembre-2010
Mensajes: 78
Antigüedad: 14 años, 2 meses
Puntos: 0
Sonrisa Usar multiples relojes sin duplicar el codigo...
Tengo el siguiente codigo

Código Javascript: 
Ver original
  1. <script type="text/javascript">
  2. $(function(){
  3.  var d, h, m, s;
  4.   $('div#clock').countdown(new Date(<?php echo $clock1 ?>), function(event) {
  5.     var timeFormat = "%d dia(s) %h:%m:%s"
  6.         $this = $(this);
  7.     switch(event.type) {
  8.       case "days":
  9.         d = event.value;
  10.         break;
  11.       case "hours":
  12.         h = event.value;
  13.         break;
  14.       case "minutes":
  15.         m = event.value;
  16.         break;
  17.       case "seconds":
  18.         s = event.value;
  19.         break;
  20.       case "finished":
  21.         $this.fadeTo('slow', 0.5);
  22.         break;
  23.     }
  24.     // Assemble time format
  25.     if(d > 0) {
  26.       timeFormat = timeFormat.replace(/\%d/, d);
  27.       timeFormat = timeFormat.replace(/\(s\)/, Number(d) == 1 ? '' : 's');
  28.     } else {
  29.       timeFormat = timeFormat.replace(/%d dia\(s\)/, '');
  30.     }
  31.     timeFormat = timeFormat.replace(/\%h/, h);
  32.     timeFormat = timeFormat.replace(/\%m/, m);
  33.     timeFormat = timeFormat.replace(/\%s/, s);
  34.     // Display
  35.     $this.html(timeFormat);
  36.   });
  37. });
  38. </script>

Con esto: <?php echo $clock1 ?> le paso el dato del reloj que viene de la base de datos ejemplo:

2012,12,24


************************************************** ************

2 problemas hasta aqui para que funcione corretamente si por ejmeplo quiero los dias que faltan al 31 de diciembre se supondria que seria asi:

2012,12,31 pues no para que me de los dias que faltan al 31 de diciembre

tengo que ponerlo asi:

2012,11,31 un mes antes asi efectivamente me da los dias que faltan para el 31 de diciembre... Como se puede corregir esto?


el otro problema es que en la pagina que estoy haciendo voy a necesitar mas de 15 relojes de esos, y no quiero tener que copiar el codigo 15 veces ,

exsite alguna manera de solo cambiar las fechas de los relojes y que el codigo principal sea el mismo.

Gracias.
  #2 (permalink)  
Antiguo 19/12/2012, 07:29
Colaborador
  
Fecha de Ingreso: marzo-2008
Ubicación: Sabadell
Mensajes: 4.897
Antigüedad: 16 años, 8 meses
Puntos: 574
Respuesta: Usar multiples relojes sin duplicar el codigo...
Para poder reutilizar el codigo debes parametrizar los datos que usa y luego llmar el codigo con distintos parametros

Es esta linea debes cambiar el div donde se verá cada reloj y cambiar el dato recibido por php a un parametro que recibas del evento que llame la función

$('div#clock').countdown(new Date(<?php echo $clock1 ?>)

$('div#clock'+numClock).countdown(new Date(valorNumClock)

agregando un numerador al id del div (lego tendràs que tener tanto divs como relojes quieras claro) y cambiando el echo de php por una variable js...
__________________
Quim
--------------------------------------------------
Ayudar a ayudar es una buena práctica!!! Y da buenos resultados.
  #3 (permalink)  
Antiguo 19/12/2012, 11:02
 
Fecha de Ingreso: septiembre-2010
Mensajes: 78
Antigüedad: 14 años, 2 meses
Puntos: 0
Respuesta: Usar multiples relojes sin duplicar el codigo...
Cita:
Iniciado por quimfv Ver Mensaje
Para poder reutilizar el codigo debes parametrizar los datos que usa y luego llmar el codigo con distintos parametros

Es esta linea debes cambiar el div donde se verá cada reloj y cambiar el dato recibido por php a un parametro que recibas del evento que llame la función

$('div#clock').countdown(new Date(<?php echo $clock1 ?>)

$('div#clock'+numClock).countdown(new Date(valorNumClock)

agregando un numerador al id del div (lego tendràs que tener tanto divs como relojes quieras claro) y cambiando el echo de php por una variable js...
Gracias quimfv ,

vamos a ver si te entendi bien

+numClock recojera un numero ejemplo : div#clock'+1, div#clock'+2, div#clock'+3,

quedando asi los divs que muestran los relojes : clock1, clock2, clock3

es asi o me equivoco, si es asi como le defino a +numClock los relojes que voy a ultilizar

Gracias
  #4 (permalink)  
Antiguo 20/12/2012, 03:01
Colaborador
  
Fecha de Ingreso: marzo-2008
Ubicación: Sabadell
Mensajes: 4.897
Antigüedad: 16 años, 8 meses
Puntos: 574
Respuesta: Usar multiples relojes sin duplicar el codigo...
Si has entendido bien.

Luego tienes que tener esos divs en el html.

La funcion debe recibir dos paramteros:

numClock el numero del div donde vas a mostrar el reloj

valorNumClock la fecha y/u hora que debe tener en cuenta

Por la sintaxis que empleas debes estar usando jquery o una libreria similar. No nos dices o no se ver como se desencadena el evento que ejecuta la funcion. Falta otra modificacion que es la definicion de los parametros...

El esquema en javascript sin librerias seria


Código Javascript: 
Ver original
  1. function reloj(numClock,valorNumClock){
  2. ....
  3. }

y en algun evento en el html el llamado a la función con los con los datos

on....="reloj(1,'2012,12,24')" para el reloj 1 y esa fecha.

(No se porque usas comas y no 2012-12-24 ???)

Si los relojes no van ligados a un evento tambien podrias hacer lo siguiente

Código Javascript: 
Ver original
  1. <script type="text/javascript">
  2. $(function(){
  3. var arrvalorNumClock=new Array();
  4. arrvalorNumClock[0]=<?php echo $clock0 ?>;
  5. arrvalorNumClock[1]=<?php echo $clock1 ?>;
  6. arrvalorNumClock[2]=<?php echo $clock2 ?>;
  7. ....
  8. arrvalorNumClock[14]=<?php echo $clock14 ?>;
  9. for (var numClock=0;numClock<15;numClock++){
  10.  var d, h, m, s;
  11.   $('div#clock'+numClock).countdown(new Date(arrvalorNumClock[numClock]), function(event) {
  12.     var timeFormat = "%d dia(s) %h:%m:%s"
  13.         $this = $(this);
  14.     switch(event.type) {
  15.       case "days":
  16.         d = event.value;
  17.         break;
  18.       case "hours":
  19.         h = event.value;
  20.         break;
  21.       case "minutes":
  22.         m = event.value;
  23.         break;
  24.       case "seconds":
  25.         s = event.value;
  26.         break;
  27.       case "finished":
  28.         $this.fadeTo('slow', 0.5);
  29.         break;
  30.     }
  31.     // Assemble time format
  32.     if(d > 0) {
  33.       timeFormat = timeFormat.replace(/\%d/, d);
  34.       timeFormat = timeFormat.replace(/\(s\)/, Number(d) == 1 ? '' : 's');
  35.     } else {
  36.       timeFormat = timeFormat.replace(/%d dia\(s\)/, '');
  37.     }
  38.     timeFormat = timeFormat.replace(/\%h/, h);
  39.     timeFormat = timeFormat.replace(/\%m/, m);
  40.     timeFormat = timeFormat.replace(/\%s/, s);
  41.     // Display
  42.     $this.html(timeFormat);
  43.  
  44.     //Cierro el bucle for
  45.  
  46.     }
  47.   });
  48. });
  49. </script>

Asi crearias directamente 15 relojes


Quizas estoy improvisando demasiado al no tener claro que libreria usas ni como ejecutas la función pero la idea es esa....
__________________
Quim
--------------------------------------------------
Ayudar a ayudar es una buena práctica!!! Y da buenos resultados.
Última edición por quimfv; 20/12/2012 a las 03:07
  #5 (permalink)  
Antiguo 20/12/2012, 14:39
 
Fecha de Ingreso: septiembre-2010
Mensajes: 78
Antigüedad: 14 años, 2 meses
Puntos: 0
Respuesta: Usar multiples relojes sin duplicar el codigo...
Cita:
Iniciado por quimfv Ver Mensaje
Si has entendido bien.

Luego tienes que tener esos divs en el html.

La funcion debe recibir dos paramteros:

numClock el numero del div donde vas a mostrar el reloj

valorNumClock la fecha y/u hora que debe tener en cuenta

Por la sintaxis que empleas debes estar usando jquery o una libreria similar. No nos dices o no se ver como se desencadena el evento que ejecuta la funcion. Falta otra modificacion que es la definicion de los parametros...

El esquema en javascript sin librerias seria


Código Javascript: 
Ver original
  1. function reloj(numClock,valorNumClock){
  2. ....
  3. }

y en algun evento en el html el llamado a la función con los con los datos

on....="reloj(1,'2012,12,24')" para el reloj 1 y esa fecha.

(No se porque usas comas y no 2012-12-24 ???)

Si los relojes no van ligados a un evento tambien podrias hacer lo siguiente

Código Javascript: 
Ver original
  1. <script type="text/javascript">
  2. $(function(){
  3. var arrvalorNumClock=new Array();
  4. arrvalorNumClock[0]=<?php echo $clock0 ?>;
  5. arrvalorNumClock[1]=<?php echo $clock1 ?>;
  6. arrvalorNumClock[2]=<?php echo $clock2 ?>;
  7. ....
  8. arrvalorNumClock[14]=<?php echo $clock14 ?>;
  9. for (var numClock=0;numClock<15;numClock++){
  10.  var d, h, m, s;
  11.   $('div#clock'+numClock).countdown(new Date(arrvalorNumClock[numClock]), function(event) {
  12.     var timeFormat = "%d dia(s) %h:%m:%s"
  13.         $this = $(this);
  14.     switch(event.type) {
  15.       case "days":
  16.         d = event.value;
  17.         break;
  18.       case "hours":
  19.         h = event.value;
  20.         break;
  21.       case "minutes":
  22.         m = event.value;
  23.         break;
  24.       case "seconds":
  25.         s = event.value;
  26.         break;
  27.       case "finished":
  28.         $this.fadeTo('slow', 0.5);
  29.         break;
  30.     }
  31.     // Assemble time format
  32.     if(d > 0) {
  33.       timeFormat = timeFormat.replace(/\%d/, d);
  34.       timeFormat = timeFormat.replace(/\(s\)/, Number(d) == 1 ? '' : 's');
  35.     } else {
  36.       timeFormat = timeFormat.replace(/%d dia\(s\)/, '');
  37.     }
  38.     timeFormat = timeFormat.replace(/\%h/, h);
  39.     timeFormat = timeFormat.replace(/\%m/, m);
  40.     timeFormat = timeFormat.replace(/\%s/, s);
  41.     // Display
  42.     $this.html(timeFormat);
  43.  
  44.     //Cierro el bucle for
  45.  
  46.     }
  47.   });
  48. });
  49. </script>

Asi crearias directamente 15 relojes


Quizas estoy improvisando demasiado al no tener claro que libreria usas ni como ejecutas la función pero la idea es esa....

Hola quimfv gracias por tu ejemplo

las librerias estoy utilizando son :

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../src/jquery.countdown.js" type="text/javascript" charset="utf-8"></script>

el resultado que daria el ejemplo que pusiste es lo que necesito pero no me funciona

lo que quiero con un solo codigo tener tantos relojes como quiera

pero no me funciono al probarlo


lo que no quiero es tener que hacer esto:


<script type="text/javascript">
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
$(function(){var d, h, m, s;$('div#reloj').countdown(new Date(<?php echo $reloj1 ?>),function(event){var timeFormat = "%d dia(s) %h:%m:%s"
$this = $(this);switch(event.type){case "days":d = event.value;break;case "hours":h=event.value;break;case "minutes":
m = event.value;break;case "seconds":s = event.value;break;case "finished":$this.fadeTo('slow', 0.5);break;}
if(d > 0){timeFormat = timeFormat.replace(/\%d/, d);timeFormat = timeFormat.replace(/\(s\)/, Number(d) == 1 ? '' : 's');
}else{timeFormat = timeFormat.replace(/%d dia\(s\)/, '');}timeFormat = timeFormat.replace(/\%h/, h);
timeFormat = timeFormat.replace(/\%m/, m);timeFormat = timeFormat.replace(/\%s/, s);$this.html(timeFormat);});});
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
$(function(){var d, h, m, s;$('div#reloj2').countdown(new Date(<?php echo $reloj2 ?>),function(event){var timeFormat ="%d dia(s) %h:%m:%s"
$this = $(this);switch(event.type){case "days":d = event.value;break;case "hours":h=event.value;break;case "minutes":
m = event.value;break;case "seconds":s = event.value;break;case "finished":$this.fadeTo('slow', 0.5);break;}
if(d > 0){timeFormat = timeFormat.replace(/\%d/, d);timeFormat = timeFormat.replace(/\(s\)/, Number(d) == 1 ? '' : 's');
}else{timeFormat = timeFormat.replace(/%d dia\(s\)/, '');}timeFormat = timeFormat.replace(/\%h/, h);
timeFormat = timeFormat.replace(/\%m/, m);timeFormat = timeFormat.replace(/\%s/, s);$this.html(timeFormat);});});
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
$(function(){var d, h, m, s;$('div#reloj3').countdown(new Date(<?php echo $reloj3 ?>),function(event){var timeFormat ="%d dia(s) %h:%m:%s"
$this = $(this);switch(event.type){case "days":d = event.value;break;case "hours":h=event.value;break;case "minutes":
m = event.value;break;case "seconds":s = event.value;break;case "finished":$this.fadeTo('slow', 0.5);break;}
if(d > 0){timeFormat = timeFormat.replace(/\%d/, d);timeFormat = timeFormat.replace(/\(s\)/, Number(d) == 1 ? '' : 's');
}else{timeFormat = timeFormat.replace(/%d dia\(s\)/, '');}timeFormat = timeFormat.replace(/\%h/, h);
timeFormat = timeFormat.replace(/\%m/, m);timeFormat = timeFormat.replace(/\%s/, s);$this.html(timeFormat);});});
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////



</script>


un bloque de codigo para cada reloj
Última edición por Mndrake; 20/12/2012 a las 14:45
  #6 (permalink)  
Antiguo 21/12/2012, 04:54
Colaborador
  
Fecha de Ingreso: marzo-2008
Ubicación: Sabadell
Mensajes: 4.897
Antigüedad: 16 años, 8 meses
Puntos: 574
Respuesta: Usar multiples relojes sin duplicar el codigo...
Si eso ya lo entendi, analiza como debes modificar ese for que he agregado para que funcione...
__________________
Quim
--------------------------------------------------
Ayudar a ayudar es una buena práctica!!! Y da buenos resultados.

Etiquetas: duplicar, funcion, html, multiples, php, usar
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 18:21.