Necesito ayuda con JavaScript (novato)

Citar

Escrito el 07 Sep 2007 07:37 pm

Hola. Soy novato en esto del JavaScript y necesito ayuda.
Tengo puesto un reloj de http://www.javascriptmall.com/jsc/jsC4Uclocks.htm#clock2. Me gustaría que cuando el reloj marque una franja horaria determinada me salga debajo del reloj una imagen, y cuando no esté en esa franja, la imagen cambie.
Por ejemplo, cuando el reloj marque una hora entre las 19:00 y las 20:00 debajo me salga la imagen 2.gif y todo el resto del día me salga la imagen 1.gif
¿Alguien sabe como se puede hacer? Gracias por adelantado.

Por danigomez

3 de clabLevel

Genero:Masculino

Envíale un mensaje privado

Citar

Escrito el 08 Sep 2007 02:10 am

Prueba con esto:

Código :

  <SCRIPT Language="JavaScript">
  <!-- hide from old browsers
  function jsClock24hr(){
    var time = new Date()
    var hour = time.getHours()
    var minute = time.getMinutes()
    var second = time.getSeconds()
    var temp = "" + ((hour < 10) ? "0" : "") + hour
    temp += ((minute < 10) ? ":0" : ":") + minute
    temp += ((second < 10) ? ":0" : ":") + second
    document.clockForm24hr.digits.value = temp
    id = setTimeout("jsClock24hr()",1000)
    }

  function ObservaImagen(Img1, Img2){

   var time = new Date()
   var VerSeccion1 = document.getElementById(Img1);
   var VerSeccion2 = document.getElementById(Img2);

   if (time.getHours()==19 && time.getHours()==20) { VerSeccion1.style.display="block"; } else { VerSeccion1.style.display="none"; }
   if (time.getHours()!=19 && time.getHours()!=21) { VerSeccion2.style.display="block"; } else { VerSeccion2.style.display="none"; }

  }
  //-->
  </SCRIPT>

..................

 <body ONLOAD="jsClock24hr();ObservaImagen('Uno', 'Dos')">

.................

 <FORM NAME="clockForm24hr">
 <FONT face="Courier New,Courier" size=3>
 <INPUT TYPE="text" NAME="digits" SIZE=8 VALUE="Loading">
 </FONT>
 </FORM> 

 <table width="100%" align="center">
  <tr> <td> <div id="Uno" style="display:none;" > <img src="http://tbn0.google.com/images?q=tbn:SqAFjSqtalIO0M:http://kino.iteso.mx/~abby/uno.gif" width="100px" height="100px"/> </div> </td> </tr>
  <tr> <td> <div id="Dos" style="display:none;" > <img src="http://tbn0.google.com/images?q=tbn:swRBe-rMk0mK-M:http://pbskids.org/lions/printables/coloring/images/two_monkeys.gif" width="100px" height="100px" /> </div> </td> </tr>
 </table>

Por Blue_box

7 de clabLevel

Genero:Masculino

Envíale un mensaje privado

Citar

Escrito el 08 Sep 2007 04:48 pm

Ok, gracias

Me va bastante bien, pero ¿me podrias explicar como cambio la hora en la que ha de cambiar de imagen?

Por danigomez

3 de clabLevel

Genero:Masculino

Envíale un mensaje privado

Citar

Escrito el 10 Sep 2007 06:08 pm

Todo se debe a estas dos líneas:

Código :

if (time.getHours()==19 && time.getHours()==20) { VerSeccion1.style.display="block"; } else { VerSeccion1.style.display="none"; }
if (time.getHours()!=19 && time.getHours()!=21) { VerSeccion2.style.display="block"; } else { VerSeccion2.style.display="none"; }

Bueno primero se ha necesitado crear una variable de tipo fecha tal como aquí:

Código :

 var time = new Date()

Teniendo creada esta varible podremos usar los métodos que contiene, entre ellos getHours que obtiene la hora en un formato de 24 horas. El resto se lo dejas a un par de condiciones que son:

Código :

 time.getHours()==19

Aquí solo dice que si la hora es igual a las 7 de la noche entonces que ponga la imagen. De hecho parece que por no checar el código se me ha ido algo.
Debería ser:

Código :

 time.getHours()==19 || time.getHours()==20

Debería ser así. Ya que así le indicamos que sería si la hora es igual a las 7 de la noche o las 8 de la noche, cambie la propiedad de visibilidad de la imagen correspondiente. (Perdón por ese error, pero solo conteste sin checarlo bien).

Por Blue_box

7 de clabLevel

Genero:Masculino

Envíale un mensaje privado

Necesito ayuda con JavaScript (novato)

Escribe una respuesta rapida