¿Cómo hago en php para que la hora se muestre actualizada en mi pagina Web?
¿Cómo hago en php para que la hora se muestre actualizada es decir que los segundos corran automáticamente y la hora se valla actualizando automáticamente en mi página web?
1 Respuesta
Respuesta
1
A ver... lo más aconsejable en este caso seria ocupar un poco de javascript. La idea es que al correr cada segundo, sea el cliente (y no el servidor) el que ejecute la acción de actualizar.
Entonces, lo primero sera crear una instancia del objeto Date() en js, para extraer de ahí los valores en horas, minutos y segundos para actualizar nuestro reloj por cada segundo haciendo una recursion en la función con un intervalo de tiempo. Pero antes, es necesario tener claro donde vamos a poner los valores del reloj. Para esto vamos a crear un tag 'div' donde va a estar situado el reloj y asignándole un id único (o un nombre), el que en este caso sera "contenedor_reloj". Esto se hace así:
<div id="contenedor_reloj"></div>
Entonces ya tenemos el contenedor, vamos por la función que muestra el reloj en el formulario
Veamos la función:
Ok, tenemos la función que se actualiza por intervalos de 1000 milisegundos (en la linea de setTimeout) llamándose a si misma. Ahora solo queda llamar a esta función al inicio en el tag body:
Entonces, lo primero sera crear una instancia del objeto Date() en js, para extraer de ahí los valores en horas, minutos y segundos para actualizar nuestro reloj por cada segundo haciendo una recursion en la función con un intervalo de tiempo. Pero antes, es necesario tener claro donde vamos a poner los valores del reloj. Para esto vamos a crear un tag 'div' donde va a estar situado el reloj y asignándole un id único (o un nombre), el que en este caso sera "contenedor_reloj". Esto se hace así:
<div id="contenedor_reloj"></div>
Entonces ya tenemos el contenedor, vamos por la función que muestra el reloj en el formulario
Veamos la función:
<script language="JavaScript">
function HoraActual()
{
var esteMomento = new Date()
var hora = esteMomento.getHours()
var minuto = esteMomento.getMinutes()
var segundo = esteMomento.getSeconds()
HoraCompleta= hora + " : " + minuto + " : " + segundo;
document.getElementById("contenedor_reloj").innerHTML= HoraCompleta;
setTimeout("HoraActual()",1000)
}
</script>
Ok, tenemos la función que se actualiza por intervalos de 1000 milisegundos (en la linea de setTimeout) llamándose a si misma. Ahora solo queda llamar a esta función al inicio en el tag body:
<body onload="HoraActual()">
Acabo de revisar la función y me di cuenta que estéticamente no se ve bien cuando alguno de los componentes (hora, minuto o segundo) es menor que 10, es decir, por ejemplo cuando es medianoche con 7 minutos y 3 segundos se muestra como
0 : 7 : 3
Esto ocurre cuando escribes código estando seguro que es correcto, pero sin probarlo para todos los casos. Me corrijo entonces y pongo el código de la función js corregido (y bien probado).
_________
function HoraActual(){
var esteMomento = new Date();
var hora = esteMomento.getHours();
if(hora < 10) hora = '0' + hora;
var minuto = esteMomento.getMinutes();
if(minuto < 10) minuto = '0' + minuto;
var segundo = esteMomento.getSeconds();
if(segundo < 10) segundo = '0' + segundo;
HoraCompleta= hora + " : " + minuto + " : " + segundo;
document.getElementById('div_reloj').innerHTML = HoraCompleta;
setTimeout("HoraActual()",1000)
}
0 : 7 : 3
Esto ocurre cuando escribes código estando seguro que es correcto, pero sin probarlo para todos los casos. Me corrijo entonces y pongo el código de la función js corregido (y bien probado).
_________
function HoraActual(){
var esteMomento = new Date();
var hora = esteMomento.getHours();
if(hora < 10) hora = '0' + hora;
var minuto = esteMomento.getMinutes();
if(minuto < 10) minuto = '0' + minuto;
var segundo = esteMomento.getSeconds();
if(segundo < 10) segundo = '0' + segundo;
HoraCompleta= hora + " : " + minuto + " : " + segundo;
document.getElementById('div_reloj').innerHTML = HoraCompleta;
setTimeout("HoraActual()",1000)
}
Hola! Ok KoP entiendo perfectamente lo que me quieres decir y me sirve pero tengo otro problemita que es el siguiente: yo quiero colocar la hora en una tabla el copie tu código a esa tabla y me quedo así el código
<table align="right" border="0" >
<tr>
<th>
<div id="contenedor_reloj"></div>
<script language="JavaScript">
function HoraActual(){
var esteMomento = new Date();
var hora = esteMomento.getHours();
if(hora < 10) hora = '0' + hora;
var minuto = esteMomento.getMinutes();
if(minuto < 10) minuto = '0' + minuto;
var segundo = esteMomento.getSeconds();
if(segundo < 10) segundo = '0' + segundo;
HoraCompleta= hora + " : " + minuto + " : " + segundo;
document.getElementById('div_reloj').innerHTML = HoraCompleta;
setTimeout("HoraActual()",1000)
}
</script>
<body onload="HoraActual()"> </body>
</th>
</tr>
</table>
Pero no me muestra nada entonces no se que pasa allí. Por favor cuando tengas tiempo resp y gracias por tu ayuda.
<table align="right" border="0" >
<tr>
<th>
<div id="contenedor_reloj"></div>
<script language="JavaScript">
function HoraActual(){
var esteMomento = new Date();
var hora = esteMomento.getHours();
if(hora < 10) hora = '0' + hora;
var minuto = esteMomento.getMinutes();
if(minuto < 10) minuto = '0' + minuto;
var segundo = esteMomento.getSeconds();
if(segundo < 10) segundo = '0' + segundo;
HoraCompleta= hora + " : " + minuto + " : " + segundo;
document.getElementById('div_reloj').innerHTML = HoraCompleta;
setTimeout("HoraActual()",1000)
}
</script>
<body onload="HoraActual()"> </body>
</th>
</tr>
</table>
Pero no me muestra nada entonces no se que pasa allí. Por favor cuando tengas tiempo resp y gracias por tu ayuda.
Tienes un error de concepto en los tags HTML.
Estimado, un documento HTML tiene, (digamos) 2 partes: una (y solo una) cabecera (un <head></head>) y un (y solo un) cuerpo (<body></body>). El primero es el que carga la información de la página, como el titulo (que aparece en la parte superior de la ventana del navegador), el autor, la validez, las palabras para búsqueda, etc, etc. Esta data no se muestra en pantalla, sino que es informativa.
El segundo es el que muestra el contenido de la página, ahí pones tus tablas, tus encabezados de página, etc, etc.
Importantísimo: Un documento html NO PUEDE LLEVAR MÁS DE UN TAG <body>, es decir, el parámetro onload() que lleva la función que te envíe va puesto en el body que ya tiene tu página.
Como segunda observación, siempre es recomendable no escribir scripts js a mitad de una tabla. Si bien puede que funcione, no se ve bien y te desordena el código para futuras modificaciones.
Ok, ya aclarado eso, lo que debes hacer es:
1 - Borra ese <body onload...> que pusiste en la tabla.
2 - En el documento que ya tienes, busca el tag <body> (que esta al principio de la página) y reemplázalo por <body onload="HoraActual()"> .
3 - Bajo ese <body onload...> pon el javascript que te envíe:
<script language="JavaScript">
function HoraActual(){
var esteMomento = new Date();
var hora = esteMomento.getHours();
if(hora < 10) hora = '0' + hora;
var minuto = esteMomento.getMinutes();
if(minuto < 10) minuto = '0' + minuto;
var segundo = esteMomento.getSeconds();
if(segundo < 10) segundo = '0' + segundo;
HoraCompleta= hora + " : " + minuto + " : " + segundo;
document.getElementById('div_reloj').innerHTML = HoraCompleta;
setTimeout("HoraActual()",1000)
}
</script>
4 - La tabla quedaria asi:
<table align="right" border="0" >
<tr>
<th>
<div id="contenedor_reloj"></div>
</th>
</tr>
</table>
Y con eso ya quedaría funcionando el reloj en su div correspondiente.
Ojala esta vez te resulte y si es así, no olvides puntuar y cerrar la pregunta.
Estimado, un documento HTML tiene, (digamos) 2 partes: una (y solo una) cabecera (un <head></head>) y un (y solo un) cuerpo (<body></body>). El primero es el que carga la información de la página, como el titulo (que aparece en la parte superior de la ventana del navegador), el autor, la validez, las palabras para búsqueda, etc, etc. Esta data no se muestra en pantalla, sino que es informativa.
El segundo es el que muestra el contenido de la página, ahí pones tus tablas, tus encabezados de página, etc, etc.
Importantísimo: Un documento html NO PUEDE LLEVAR MÁS DE UN TAG <body>, es decir, el parámetro onload() que lleva la función que te envíe va puesto en el body que ya tiene tu página.
Como segunda observación, siempre es recomendable no escribir scripts js a mitad de una tabla. Si bien puede que funcione, no se ve bien y te desordena el código para futuras modificaciones.
Ok, ya aclarado eso, lo que debes hacer es:
1 - Borra ese <body onload...> que pusiste en la tabla.
2 - En el documento que ya tienes, busca el tag <body> (que esta al principio de la página) y reemplázalo por <body onload="HoraActual()"> .
3 - Bajo ese <body onload...> pon el javascript que te envíe:
<script language="JavaScript">
function HoraActual(){
var esteMomento = new Date();
var hora = esteMomento.getHours();
if(hora < 10) hora = '0' + hora;
var minuto = esteMomento.getMinutes();
if(minuto < 10) minuto = '0' + minuto;
var segundo = esteMomento.getSeconds();
if(segundo < 10) segundo = '0' + segundo;
HoraCompleta= hora + " : " + minuto + " : " + segundo;
document.getElementById('div_reloj').innerHTML = HoraCompleta;
setTimeout("HoraActual()",1000)
}
</script>
4 - La tabla quedaria asi:
<table align="right" border="0" >
<tr>
<th>
<div id="contenedor_reloj"></div>
</th>
</tr>
</table>
Y con eso ya quedaría funcionando el reloj en su div correspondiente.
Ojala esta vez te resulte y si es así, no olvides puntuar y cerrar la pregunta.