Problema con setInterval()

_cronos · #1 (**permalink**) 16/04/2010, 14:35

Hola tengo el siguiente script de un calendario y un reloj que es muy básico pero si le pongo el setInterval la página carga todo pero no se 'actualizan' los segundos:

Código Javascript:

Ver original<script>
function reloj(){
var f = new Date();
var a = f.getFullYear();
var m = new Array ("Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre");
var d = new Array ("Domingo","Lunes","Martes","Miércoles","Jueves","Viernes","Sábado");;
var h = f.getHours();
var mi = f.getMinutes();
var s = f.getSeconds();
document.write ('Hoy es ' + d[f.getDay()] + ', ' + f.getDate() + ' de ' + m[f.getMonth()] + ' de ' + a + ' y son las ' + h + ':' + mi + ':' + s );
}
setInterval("reloj()", 500);
</script>

Muchas gracias (:

maycolalvarez · #2 (**permalink**) 16/04/2010, 20:09

claro, porque al usar document.write limpias por completo el lienzo html, y por lo tanto borras hasta la misma función, úsalo así:

Código Javascript:

Ver original<script type="text/javascript">
    function reloj(){   
        var f = new Date();  
        var a = f.getFullYear();
        var m = new Array ("Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre");
        var d = new Array ("Domingo","Lunes","Martes","Miércoles","Jueves","Viernes","Sábado");;
        var h = f.getHours();
        var mi = f.getMinutes();   
        var s = f.getSeconds(); 
        document.getElementById("capa_reloj").innerHTML=  ('Hoy es ' + d[f.getDay()] + ', ' + f.getDate() + ' de ' + m[f.getMonth()] + ' de ' + a + ' y son las ' + h + ':' + mi + ':' + s );
    } 
    setInterval("reloj()", 1000); //500 para que si no muestras lo microsegundos???
</script>
<div id="capa_reloj"></div>

_cronos · #3 (**permalink**) 17/04/2010, 06:56

Bueno ahora supongo que tu código era el correcto pero tampoco lo puedo saber porque tengo esto:

Código HTML:

Ver original<!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=iso-8859-1" />
</head>
<body>
<div id="capaNombre"></div>
<div id="capaReloj"></div>
</body>
</html>

Código Javascript:

Ver original<script language="javascript" type="text/javascript">
function reloj(){
var nombre = prompt("Introduce tu nombre, por favor", "");
var f = new Date();
var a = f.getFullYear();
var m = new Array ("Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre");
var d = new Array ("Domingo","Lunes","Martes","Miércoles","Jueves","Viernes","Sábado");;
var h = f.getHours();
var mi = f.getMinutes();
var s = f.getSeconds();
if (h<10){h='0'+h}
if (mi<10){mi='0'+mi}
if (s<10){s='0'+s}
document.getElementById("capaNombre").innerHTML= ('<div style=font-size:25px;>' + 'Hola,' + '<div style=font-size:30px;>' + nombre.charAt(0).toUpperCase() + nombre.substring(1,99) + '</div>');
document.getElementById("capaReloj").innerHTML= ('Hoy es ' + d[f.getDay()] + ', ' + f.getDate() + ' de ' + m[f.getMonth()] + ' de ' + a + ' y son las ' + h + ':' + mi + ':' + s + '</div>');
}
setInterval("reloj()", 1000);
</script>

para que también introduzca un nombre, pero ahora en vez de salir una sola vez, metes el nombre y si que lo escribe y muestra la hora pero siguen apareciendo más prompts una y otra vez y no sé porque es. Gracias (:

maycolalvarez · #4 (**permalink**) 17/04/2010, 14:26

simple, cambias el ámbito de la variable nombre como global (fuera de la función) y preguntas si está vacia para sacar el prompt:

Código Javascript:

Ver original<script language="javascript" type="text/javascript">
    var nombre='';
    function reloj(){
        if(nombre==''){        
            nombre = prompt("Introduce tu nombre, por favor", "");
        }
        var f = new Date();
        var a = f.getFullYear();
        var m = new Array ("Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre");
        var d = new Array ("Domingo","Lunes","Martes","Miércoles","Jueves","Viernes","Sábado");;
        var h = f.getHours();
        var mi = f.getMinutes();
        var s = f.getSeconds();
        if (h<10){h='0'+h}
        if (mi<10){mi='0'+mi}
        if (s<10){s='0'+s}
        document.getElementById("capaNombre").innerHTML= ('<div style=font-size:25px;>' + 'Hola,' + '<div style=font-size:30px;>' + nombre.charAt(0).toUpperCase() + nombre.substring(1,99) + '</div>');
        document.getElementById("capaReloj").innerHTML= ('Hoy es ' + d[f.getDay()] + ', ' + f.getDate() + ' de ' + m[f.getMonth()] + ' de ' + a + ' y son las ' + h + ':' + mi + ':' + s + '</div>');
    }
    setInterval("reloj()", 1000);
</script>

_cronos · #5 (**permalink**) 17/04/2010, 15:13

Ok el problema estaba ahí. Y por último, al introducir el nombre, me sale todo bien, pero sale 'Hola, 'y salta una línea para mostrar el nombre. ¿Cómo puedo hacer para que melo muestre todo en la misma línea? Muchas gracias :P

maycolalvarez · #6 (**permalink**) 17/04/2010, 15:20

te salta una linea porque estas anidando el mensaje en un DIV que por defecto tiene flujo de bloque (CSS display:block), puedes reemplazarlo por un span con flujo de línea, ademas no estabas cerrado esa etiqueta (tags rotos), no encierras los atributos en comillas:

Código Javascript:

Ver originaldocument.getElementById("capaNombre").innerHTML= ('<div><span style="font-size:25px;">Hola,</span><span style="font-size:30px;">' + nombre.charAt(0).toUpperCase() + nombre.substring(1,99) + '</span></div>');

incluso puedes usar el CSS text-transform:capitalize para colocar en mayúsculas la primera letra de cada palabra sin necesidad de js:

Código Javascript:

Ver originaldocument.getElementById("capaNombre").innerHTML= ('<div><span  style="font-size:25px;">Hola,</span><span  style="font-size:30px;text-transform:capitalize;">' + nombre + '</span></div>');

_cronos · #7 (**permalink**) 17/04/2010, 15:58

Perfecto, el código correcto es:

Código HTML:

Ver original<!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>
 
<title>eva</title>
 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<div id="capaNombre"></div>
<div id="capaReloj"></div>
</body>
</html>

Código javascript:

Ver original<script language="javascript" type="text/javascript">
var nombre = ''
function reloj(){
var f = new Date();
var a = f.getFullYear();
var m = new Array ("Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre");
var d = new Array ("Domingo","Lunes","Martes","Miércoles","Jueves","Viernes","Sábado");
var h = f.getHours();
var mi = f.getMinutes();
var s = f.getSeconds();
if (nombre == ''){nombre = prompt("Introduce tu nombre, por favor", "")};
if (h<10){h='0'+h}
if (mi<10){mi='0'+mi}
if (s<10){s='0'+s}
document.getElementById("capaNombre").innerHTML= ('<div><span style="font-size:25px; display: inline;">' + 'Hola, ' + '</span><span style="font-size:30px;">' + nombre.charAt(0).toUpperCase() + nombre.substring(1) + '</span></div>');
document.getElementById("capaReloj").innerHTML= ('<div><span style="font-size: 20px;">Hoy es ' + d[f.getDay()] + ', ' + f.getDate() + ' de ' + m[f.getMonth()] + ' de ' + a + ' y son las ' + h + ':' + mi + ':' + s + '</span></div>');
}
setInterval("reloj()", 1000);
</script>

Muchas gracias maycolalvarez (: