Hora del sistema con estilos css

Liz26 · #1 (**permalink**) 01/12/2002, 10:48

Hola a todos !!

Estoy trabajando con Dreamweaver 4 y tengo un problemilla. He insertado la fecha para que se actualice automáticamente, pero luego le doy el formato que quiero con una hoja de estilo css. El problema es que al darle el formato, la fecha ya no cambia.

Podríais decirme cómo puedo conseguir poner una fecha, aplicándola el formato que yo quiero, que se actualice automáticamente con la fecha del sistema??

Muchas gracias de antemano

caricatos · #2 (**permalink**) 01/12/2002, 11:55

Hola Liz26:

Pásanos el código, y verás que fácil se arregla.

Saludos

chivi · #3 (**permalink**) 01/12/2002, 14:14

Bueno, ya que me aburría, he creado un reloj muy sencillo con formato, y a la vez explico su función.
Te muestro el código por si a vos le interesa tenerlo:

<html>
<head>
<script language="JavaScript">
/*
Reloj By Chivi
*/

function actualizaReloj(){

/* Capturamos la Hora, los minutos y los segundos */
marcacion = new Date()

/* Capturamos la Hora */
Hora = marcacion.getHours()

/* Capturamos los Minutos */
Minutos = marcacion.getMinutes()

/* Capturamos los Segundos */
Segundos = marcacion.getSeconds()

/* Si la Hora, los Minutos o los Segundos
Son Menores o igual a 9, le añadimos un 0 */

if (Hora<=9)
Hora = "0" + Hora

if (Minutos<=9)
Minutos = "0" + Minutos

if (Segundos<=9)
Segundos = "0" + Segundos

/* Creamos 4 variables para darle formato a nuestro Reloj */
var Inicio, Reloj, Final, Total

/*En Inicio le indicamos una fuente de color */
Inicio = "<font size=3 color=red>"

/* En Reloj le indicamos la Hora, los Minutos y los Segundos */
Reloj = Hora + ":" + Minutos + ":" + Segundos

/* En final cerramos el tag de la fuente */
Final = "</font>"

/* En total Finalizamos el Reloj uniendo las variables */
Total = Inicio + Reloj + Final

/* Capturamos una celda para mostrar el Reloj */
document.getElementById('Reloj').innerHTML = Total

/* Indicamos que nos refresque el Reloj cada 1 segundo */
setTimeout("actualizaReloj()",1000)
}
</script>

<body>
<body onload="actualizaReloj()">
Acá mostramos el reloj:
<table border=0 cellpadding=0 cellspacing=0>
<tr><td id="Reloj"></td></tr></table>
</body>
</html>

Un abrazo!

Liz26 · #4 (**permalink**) 02/12/2002, 01:54

Muchas gracias por el reloj, Chivi, ahora voy a probarlo.

Caricatos, aquí te paso el código y muchas gracias de antemano por todo:

<td width="71" rowspan="2" valign="middle" align="center">
<div align="center" class="Fecha">

Viernes<br>
<font color="#000080"><b><font size="2">29</font></b></font><br>
Noviembre

</div>
</td>

El código de la clase "Fecha" es el siguiente:

.Fecha { font-family: Verdana; text-decoration: none; color: #C49815; font-size: 10px; line-height: 14px}

caricatos · #5 (**permalink**) 02/12/2002, 02:56

Hola otra vez:

Aquí tienes uan página que se adapta a tu estilo, faltaban los "javascript" de las funciones...

<html>
<head>
<style >
.Fecha { font-family: Verdana; text-decoration: none; color: #C49815; font-size: 10px; line-height: 14px}
</style>
<script language=javascript>
var hoy = new Date();
var dia = hoy.getDate();
var semana = ["Domingo","Lunes","Martes","Miércoles","Jueves","V iernes","Sabado"];
var fecha = semana[hoy.getDay()];
var meses = [
"Enero",
"Febrero",
"Marzo",
"Abril",
"Mayo",
"Junio",
"Julio",
"Agosto",
"Septiembre",
"Octubre",
"Noviembre",
"Diciembre"];
var mes = meses[hoy.getMonth() - 1];
</script>
</head>
<body>
<table><tr>
<td width="71" rowspan="2" valign="middle" align="center">
<div align="center" class="Fecha">
<script language="javascript">document.write(fecha);</script>
<br>
<font color="#000080"><b><font size="2">
<script language="javascript">document.write(dia);</script>
</font></b></font><br>
<script language="javascript">document.write(mes);</script>
</div>
</td>
</tr>
</table>
</body>
</html>

Saludos

Liz26 · #6 (**permalink**) 02/12/2002, 03:06

Fantástico!!!!!!!!!!!!!, lo acabo de probar y queda genial.

Mil gracias, de verdad. Te crees que el Dreamweaver lo hace todo ...., y al final siempre hay que recurrir a escribir código

Muchísimas gracias por tu ayuda. Un saludo.

caricatos · #7 (**permalink**) 02/12/2002, 03:28

De nada...

Llevo un año trabajando con el block de notas y se aprende mucho, pero a veces es difícil encontrar fallos tontos, así que un buen editor como el tuyo es bueno si lo complementas con código propio.

Por cierto, el código de chivi también es bueno como reloj de sistema, incluso puedes ponerlo en la linea de estado o la cabecera con window.status o document.title...

Pero no es mi intención liarte más...

Un abrazo

Liz26 · #8 (**permalink**) 02/12/2002, 06:05

Pues si que la has hecho buena !!!

Si no es mucha molestia, te importaría decirme cómo puedo ponerlo ahí??? Cómo verás, de código estoy bastante pez.

Pero esto ya es por curiosidad, así que si no puedes, no pasa nada.

Muchas gracias de nuevo por todo.

caricatos · #9 (**permalink**) 02/12/2002, 07:09

Hola otra vez...

Tardé un poco porque me lie con cosas mías y con los comentarios de chivi...

Hay va una página con unos añadidos...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script language="JavaScript">
/*
Reloj By Chivi
Nombre: Mario Plaza

Retocado para verse en cabecera y pie por Pepe Molina (caricatos)
*/

function actualizaReloj(){
marcacion = new Date();
Hora = marcacion.getHours();
Minutos = marcacion.getMinutes();
Segundos = marcacion.getSeconds();
if (Hora<=9) Hora = "0" + Hora;
if (Minutos<=9) Minutos = "0" + Minutos;
if (Segundos<=9) Segundos = "0" + Segundos;

var Inicio, Reloj, Final, Total;
Inicio = "<font size=3 color=red>";
Reloj = Hora + ":" + Minutos + ":" + Segundos;
Final = "</font>";

Total = Inicio + Reloj + Final;

// línea dentro del body
document.getElementById("Reloj").innerHTML = Total;

// línea en la cabecera
document.title = Reloj;

// línea en el pie
window.status = Reloj;

setTimeout("actualizaReloj()",1000);
}
</script>

<body onload="actualizaReloj()">
Acá mostramos el reloj:
<table border=0 cellpadding=0 cellspacing=0>
<tr><td id="Reloj"><br></td></tr></table>
</body>
</html>

Saludos

Liz26 · #10 (**permalink**) 02/12/2002, 07:35

Acabo de probarlo. Muchísimas gracias por todo, de verdad.

y por la paciencia !!!!!!!

Un saludo y feliz día !!!!!!!!

chivi · #11 (**permalink**) 02/12/2002, 12:16

Caricatos:
Gracias por el añadido!
Tenéis una versión en las Faqs que puse anoche en la que también tiene integrada la Fecha y la Hora.

Saludos!

#12 (**permalink**) 03/12/2002, 02:46

Perdonad mi atrevimiento, pero estos códigos, los de fecha y hora, no los particulares, los puedo utilizar yo en mi web?
Es que soy bastante, mucho, neófito en estas cosas y esto me ayuda bastante!
Saludos

caricatos · #13 (**permalink**) 03/12/2002, 02:53

Hola jupe:

Por mi parte, no hay ningún problema, y supongo que tampoco les molestará alos demás participantes de la discusión.
Además, normalmente participamos en el foro para aprender y para ayudar, y si somo útiles, aún mejor.

Saludos

Liz26 · #14 (**permalink**) 03/12/2002, 02:58

Lo cierto es que es a mi a la que han ayudado, y un montón además !!

así que poco puedo decir al respecto, pero por mi parte me parece estupendo

Un saludo.

#15 (**permalink**) 03/12/2002, 03:01

Ok!, gracias, la verdad es que lo edité y me pareció estupendo!
Ahora lo pondré en la web.
Saludos

chivi · #16 (**permalink**) 03/12/2002, 16:11

Todos los códigos que insertamos en los Foros de Programación, son editables y de libre distribución..

Por mi parte tampoco hay problema, es mas, lo hicimos para vosotros. Ahora disfrutadlo

.

Un abrazo!

Liz26 · #17 (**permalink**) 04/12/2002, 03:59

Mil gracias por la aclaración, alsapa. Me habéis ayudado muchísimo entre todos !!!!!!!!!

Feliz Navidad para tí también

caricatos · #18 (**permalink**) 04/12/2002, 10:42

Hola otra vez:

Mil disculpas, pero eso de responder de memoria tiene sus inconvenientes...

Es que la forma de presentar fechas me ha liado un poco en otras ocasiones porque en España la semana empieza el lunes (me parece correcto) y en muchos otros sitios empieza el Domingo... y me obligó a hacer malabares cuando hice mi calendario ¿?

Reitero mis disculpas y agradezco a alsapa por su corrección.

Saludos