Foros del Web » Programando para Internet » Javascript »

reloj simple

Estas en el tema de reloj simple en el foro de Javascript en Foros del Web. Hola estoy intentando crear un relojito javascript, estoy aprendiendo las bases de javascript pues no soy muy bueno en este lenguaje y quiero aprender. hice ...
  #1 (permalink)  
Antiguo 31/10/2011, 00:03
Avatar de memoadian
Colaborador
 
Fecha de Ingreso: junio-2009
Ubicación: <?php echo 'México'?>
Mensajes: 3.696
Antigüedad: 10 años, 5 meses
Puntos: 641
reloj simple

Hola estoy intentando crear un relojito javascript, estoy aprendiendo las bases de javascript pues no soy muy bueno en este lenguaje y quiero aprender.

hice esto:

Código Javascript:
Ver original
  1. <script type="text/javascript">
  2.             function ahora(){
  3.                 var nuevaFecha = new Date();
  4.                 var horas = nuevaFecha.getHours();
  5.                 var minutos = nuevaFecha.getMinutes();
  6.                 var segundos = nuevaFecha.getSeconds();
  7.                 if (horas <= 9) horas = "0" + horas;
  8.                 if (minutos <= 9) minutos = "0" + minutos;
  9.                 if (segundos <= 9) segundos = "0" + segundos;
  10.                 var tiempo = horas + " : " + minutos + " : " + segundos;
  11.                 document.write(tiempo);
  12.             }
  13.            
  14.             setInterval('ahora()', 1000);
  15.         </script>

pero no me funciona solo muestra una vez la hora y no vuelve a escribirse.

alguien puede explicarme por que?, no lo entiendo

gracias.
  #2 (permalink)  
Antiguo 31/10/2011, 00:11
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.595
Antigüedad: 17 años, 8 meses
Puntos: 1277
Respuesta: reloj simple

Hola:

La respuesta es simple, no debes usar document.write() a no ser que sea para incrustar algo que se quedará luego de forma estática, si lo usas con la página ya cargada hace lo que representa o sea escribir en el documento... y machaca el contenido anterior.

Puedes usar el DOM, y lo más sencillo son campos de formularios o innerHTML.

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #3 (permalink)  
Antiguo 31/10/2011, 00:19
Avatar de memoadian
Colaborador
 
Fecha de Ingreso: junio-2009
Ubicación: <?php echo 'México'?>
Mensajes: 3.696
Antigüedad: 10 años, 5 meses
Puntos: 641
Respuesta: reloj simple

diablos estoy muy bestia. :zapato:

tengo que estudiar bastante gracias caricatos :)

solo una duda más si no es mucha molestia.

por que al crear esto

Código Javascript:
Ver original
  1. var contenido = document.createTextNode("Hola Mundo!");
  2.                 document.write(contenido);

me devuelve

[object Text]

en vez del texto creado?

si puedes decirme te lo agradecería de todos modos sigo leyendo thanks.
  #4 (permalink)  
Antiguo 31/10/2011, 00:46
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.595
Antigüedad: 17 años, 8 meses
Puntos: 1277
Respuesta: reloj simple

Hola:

Lo que has creado es un nodo de texto (un objeto)... el contenido de los nodos de texto lo puedes sacar con su atributo nodeValue o data... Una referencia: Nuevo destripador

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #5 (permalink)  
Antiguo 31/10/2011, 01:05
Avatar de memoadian
Colaborador
 
Fecha de Ingreso: junio-2009
Ubicación: <?php echo 'México'?>
Mensajes: 3.696
Antigüedad: 10 años, 5 meses
Puntos: 641
Respuesta: reloj simple

gracias :)
  #6 (permalink)  
Antiguo 31/10/2011, 01:22
Avatar de memoadian
Colaborador
 
Fecha de Ingreso: junio-2009
Ubicación: <?php echo 'México'?>
Mensajes: 3.696
Antigüedad: 10 años, 5 meses
Puntos: 641
Respuesta: reloj simple

Me funciono bien con el innerHTML :)

pero por ahi lei que no debia usar esto ya que es exclusivo de Microsoft y traerá probelmas a futuro que mejor use DOM.
  #7 (permalink)  
Antiguo 31/10/2011, 05:01
Avatar de Panino5001
Moderatroll
 
Fecha de Ingreso: mayo-2004
Ubicación: -34.637167,-58.462984
Mensajes: 5.100
Antigüedad: 15 años, 6 meses
Puntos: 790
Respuesta: reloj simple

innerHTML (y outerHTML) son parte del estandar html5. Sacá tus propias conclusiones acerca de su futuro basándote en eso
  #8 (permalink)  
Antiguo 31/10/2011, 08:35
Avatar de memoadian
Colaborador
 
Fecha de Ingreso: junio-2009
Ubicación: <?php echo 'México'?>
Mensajes: 3.696
Antigüedad: 10 años, 5 meses
Puntos: 641
Respuesta: reloj simple

Vaya es que hay mucha info en internet luego ya no se sabe que onda con eso, pero que bueno por que hacerlo con el DOM pfff
  #9 (permalink)  
Antiguo 31/10/2011, 10:22
Avatar de memoadian
Colaborador
 
Fecha de Ingreso: junio-2009
Ubicación: <?php echo 'México'?>
Mensajes: 3.696
Antigüedad: 10 años, 5 meses
Puntos: 641
Respuesta: reloj simple

por cierto como ejercicio didactico hice esto para hacerlo con DOM pero se va creando el node Texto cada vez y solo se van acumulando horas, entiendo que es por que estoy creando y creando, pero no se como ir remplazando :)

Código Javascript:
Ver original
  1. <script type="text/javascript">
  2.             function ahora(){
  3.                 var nuevaFecha = new Date();
  4.                 var horas = nuevaFecha.getHours();
  5.                 var minutos = nuevaFecha.getMinutes();
  6.                 var segundos = nuevaFecha.getSeconds();
  7.                 if (horas <= 9) horas = "0" + horas;
  8.                 if (minutos <= 9) minutos = "0" + minutos;
  9.                 if (segundos <= 9) segundos = "0" + segundos;
  10.                 var tiempo = horas + " : " + minutos + " : " + segundos;
  11.                 texto = document.createTextNode(tiempo);
  12.                 document.getElementById("contenedor").appendChild(texto);
  13.             }
  14.            
  15.             setInterval('ahora()', 1000);
  16. </script>

con el innerHTML no hay mayor problema :)

Código Javascript:
Ver original
  1. <script type="text/javascript">
  2.             function ahora(){
  3.                 var nuevaFecha = new Date();
  4.                 var horas = nuevaFecha.getHours();
  5.                 var minutos = nuevaFecha.getMinutes();
  6.                 var segundos = nuevaFecha.getSeconds();
  7.                 if (horas <= 9) horas = "0" + horas;
  8.                 if (minutos <= 9) minutos = "0" + minutos;
  9.                 if (segundos <= 9) segundos = "0" + segundos;
  10.                 var tiempo = horas + " : " + minutos + " : " + segundos;
  11.                 document.getElementById("contenedor").innerHTML(tiempo);
  12.             }
  13.            
  14.             setInterval('ahora()', 1000);
  15. </script>
  #10 (permalink)  
Antiguo 31/10/2011, 10:46
Avatar de Panino5001
Moderatroll
 
Fecha de Ingreso: mayo-2004
Ubicación: -34.637167,-58.462984
Mensajes: 5.100
Antigüedad: 15 años, 6 meses
Puntos: 790
Respuesta: reloj simple

Mirá los comentarios
Código PHP:
<!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>Untitled Document</title>
<
script type="text/javascript">
function 
ahora(){
     var 
nuevaFecha = new Date();
     var 
horas nuevaFecha.getHours();
     var 
minutos nuevaFecha.getMinutes();
     var 
segundos nuevaFecha.getSeconds();
     if (
horas <= 9horas "0" horas
     if (
minutos <= 9minutos "0" minutos
     if (
segundos <= 9segundos "0" segundos
     var 
tiempo horas " : " minutos " : " segundos;
     
texto document.createTextNode(tiempo);
     
document.getElementById("contenedor").replaceChild(texto,document.getElementById("contenedor").firstChild);
}
function 
ahora2(){
    var 
nuevaFecha = new Date();
    var 
horas nuevaFecha.getHours();
    var 
minutos nuevaFecha.getMinutes();
    var 
segundos nuevaFecha.getSeconds();
    if (
horas <= 9horas "0" horas
    if (
minutos <= 9minutos "0" minutos
    if (
segundos <= 9segundos "0" segundos
    var 
tiempo horas " : " minutos " : " segundos;
    
document.getElementById("contenedor2").innerHTML=tiempo;//ojo innerHTML es propiedad, no método
}
onload=function(){
    
setInterval(ahora1000);//mejor invocar que evaluar (no usar comillas ni paréntesis)
    
setInterval(ahora21000);
}
</script>
</head>

<body>
<div id="contenedor">...</div><!--ojo, tiene que haber un nodo de texto inicialmente -->
<div id="contenedor2"></div>
</body>
</html> 

Última edición por Panino5001; 31/10/2011 a las 10:53
  #11 (permalink)  
Antiguo 31/10/2011, 10:57
Avatar de memoadian
Colaborador
 
Fecha de Ingreso: junio-2009
Ubicación: <?php echo 'México'?>
Mensajes: 3.696
Antigüedad: 10 años, 5 meses
Puntos: 641
Respuesta: reloj simple

No comprendo por que no encuentro info de todo esto tengo que seguir aprendiendo y buscando, gracias :)

Etiquetas: funcion, reloj, simple
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 12:11.