reloj simple

[memoadian]

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:

<script type="text/javascript">
            function ahora(){
                var nuevaFecha = new Date();
                var horas = nuevaFecha.getHours();
                var minutos = nuevaFecha.getMinutes();
                var segundos = nuevaFecha.getSeconds();
                if (horas <= 9) horas = "0" + horas; 
                if (minutos <= 9) minutos = "0" + minutos; 
                if (segundos <= 9) segundos = "0" + segundos; 
                var tiempo = horas + " : " + minutos + " : " + segundos;
                document.write(tiempo); 
            }
            
            setInterval('ahora()', 1000);
        </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.

[caricatos]

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

[memoadian]

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:

var contenido = document.createTextNode("Hola Mundo!");
                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.

[caricatos]

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

[memoadian]

gracias :)

[memoadian]

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.

[Panino5001]

innerHTML (y outerHTML) son parte del estandar html5. Sacá tus propias conclusiones acerca de su futuro basándote en eso

[memoadian]

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

[memoadian]

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:

<script type="text/javascript">
            function ahora(){
                var nuevaFecha = new Date();
                var horas = nuevaFecha.getHours();
                var minutos = nuevaFecha.getMinutes();
                var segundos = nuevaFecha.getSeconds();
                if (horas <= 9) horas = "0" + horas; 
                if (minutos <= 9) minutos = "0" + minutos; 
                if (segundos <= 9) segundos = "0" + segundos; 
                var tiempo = horas + " : " + minutos + " : " + segundos;
                texto = document.createTextNode(tiempo);
                document.getElementById("contenedor").appendChild(texto);
            }
            
            setInterval('ahora()', 1000);
</script>
 

con el innerHTML no hay mayor problema :)

Código Javascript:

<script type="text/javascript">
            function ahora(){
                var nuevaFecha = new Date();
                var horas = nuevaFecha.getHours();
                var minutos = nuevaFecha.getMinutes();
                var segundos = nuevaFecha.getSeconds();
                if (horas <= 9) horas = "0" + horas; 
                if (minutos <= 9) minutos = "0" + minutos; 
                if (segundos <= 9) segundos = "0" + segundos; 
                var tiempo = horas + " : " + minutos + " : " + segundos;
                document.getElementById("contenedor").innerHTML(tiempo);
            }
            
            setInterval('ahora()', 1000);
</script>
 

[Panino5001]

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 <= 9) horas = "0" + horas; 
     if (minutos <= 9) minutos = "0" + minutos; 
     if (segundos <= 9) segundos = "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 <= 9) horas = "0" + horas; 
    if (minutos <= 9) minutos = "0" + minutos; 
    if (segundos <= 9) segundos = "0" + segundos; 
    var tiempo = horas + " : " + minutos + " : " + segundos;
    document.getElementById("contenedor2").innerHTML=tiempo;//ojo innerHTML es propiedad, no método
}
onload=function(){
    setInterval(ahora, 1000);//mejor invocar que evaluar (no usar comillas ni paréntesis)
    setInterval(ahora2, 1000);
}
</script>
</head>

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

[memoadian]

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