orologio su css?

Salve ragazzi, volevo chiedervi: è possibile inserire il codice dell'orologio in un css in modo da poterlo richiamare semplicemente nell'html quando lo voglio io?
Se sì come?
grazie mille a tutti!

Non si può: il CSS fornisce solo il colore del testo, dei link, ecc. Per fare quello che dici tu ci vorrebbe una pagina da includere sempre, tipo 'config.php'. Se ce l'hai metti il codice lì, atrimenti lo devi rifare ogni volta, perché col CSS non è proprio possibile.

[Ospite]

Non puoi includere l'orologio tramite i css.Se questo è però in javascript puoi fare così:

<SCRIPT language="JavaScript" SRC="codice.js"></SCRIPT>

Grazie, io avrei intenzione di inserire questo tipo di datario con orologio:
http://weblink.altervista.org/script...o_testuale.php

puoi spiegarmi come fare il file .js e come richiamarlo nel codice html?

grazie mille

[Ospite]

Crea il file "style.css" inserendo come codice:

<style type="text/css">
<!-- 
.input { border-style: none;
         font-family:Verdana,Arial,Helvetica,sans-serif;
	 	 font-size:10pt;
	     color : red;
       }
-->
</style>

e orologio.js con questo script:

<script language="JavaScript" type="text/javascript">
<!-- Prelevato e illustrato sul sito [url]http://www.web-link.it[/url] -->
// modificato da Andrea Bianchi 

if (navigator.appName == "Microsoft Internet Explorer") {
    ID = setTimeout("Aggiorn();",1000);
    function Aggiorn() {
        Mesi = new Array(11);
        Mesi [0] = "Gennaio"
        Mesi [1] = "Febbraio"
        Mesi [2] = "Marzo"
        Mesi [3] = "Aprile"
        Mesi [4] = "Maggio"
        Mesi [5] = "Giugno"
        Mesi [6] = "Luglio"
        Mesi [7] = "Agosto"
        Mesi [8] = "Settembre"
        Mesi [9] = "Ottobre"
        Mesi [10] = "Novembre"
        Mesi [11] = "Dicembre"
        Data = new Date()
        Giorno = Data.getDate()
        Mese = Data.getMonth()
        Anno = Data.getYear()
        nameDay = new Array('Domenica','Lunedi','Martedi','Mercoledi','Giovedi','Venerdi','Sabato');
        Ore = Data.getHours()
        Minuti = Data.getMinutes()
        Secondi = Data.getSeconds()
        if ((Ore > 6) && (Ore < 13)) Saluto = "Buon giorno"
        if ((Ore > 12) && (Ore < 18)) Saluto = "Buon pomeriggio"
        if ((Ore > 17) && (Ore < 22)) Saluto = "Buona sera"
        if (Ore > 21) Saluto = "Buona notte"
        if (Ore < 7) Saluto = "Buona notte"
        if (Minuti < 10) Minuti = "0" + Minuti
        if (Secondi < 10) Secondi = "0" + Secondi
      Cal = Saluto + ", sono le ore " + Ore + ":" + Minuti + "." + Secondi + " di " + nameDay[Data.getDay()] + ", " + Giorno + " " + Mesi[Mese] + " " + Anno

        ID = setTimeout("Aggiorn();",1000);
      if (document.all)
          document.all.clock.innerHTML=Cal 
      else
        document.write(Orologio)      
    }
  }
  
//  End --> 
</script>  

Dopodichè in ogni pagina in cui vuoi inserire l'orologio metti:
<link rel="stylesheet" type="text/css" href="style.css">
<SCRIPT language="JavaScript" SRC="orologio.js"></SCRIPT>

[funcool]

Crea il file "style.css" inserendo come codice:

<style type="text/css">
<!-- 
.input { border-style: none;
         font-family:Verdana,Arial,Helvetica,sans-serif;
	 	 font-size:10pt;
	     color : red;
       }
-->
</style>

e orologio.js con questo script:

<script language="JavaScript" type="text/javascript">
<!-- Prelevato e illustrato sul sito [url]http://www.web-link.it[/url] -->
// modificato da Andrea Bianchi 

if (navigator.appName == "Microsoft Internet Explorer") {
    ID = setTimeout("Aggiorn();",1000);
    function Aggiorn() {
        Mesi = new Array(11);
        Mesi [0] = "Gennaio"
        Mesi [1] = "Febbraio"
        Mesi [2] = "Marzo"
        Mesi [3] = "Aprile"
        Mesi [4] = "Maggio"
        Mesi [5] = "Giugno"
        Mesi [6] = "Luglio"
        Mesi [7] = "Agosto"
        Mesi [8] = "Settembre"
        Mesi [9] = "Ottobre"
        Mesi [10] = "Novembre"
        Mesi [11] = "Dicembre"
        Data = new Date()
        Giorno = Data.getDate()
        Mese = Data.getMonth()
        Anno = Data.getYear()
        nameDay = new Array('Domenica','Lunedi','Martedi','Mercoledi','Giovedi','Venerdi','Sabato');
        Ore = Data.getHours()
        Minuti = Data.getMinutes()
        Secondi = Data.getSeconds()
        if ((Ore > 6) && (Ore < 13)) Saluto = "Buon giorno"
        if ((Ore > 12) && (Ore < 18)) Saluto = "Buon pomeriggio"
        if ((Ore > 17) && (Ore < 22)) Saluto = "Buona sera"
        if (Ore > 21) Saluto = "Buona notte"
        if (Ore < 7) Saluto = "Buona notte"
        if (Minuti < 10) Minuti = "0" + Minuti
        if (Secondi < 10) Secondi = "0" + Secondi
      Cal = Saluto + ", sono le ore " + Ore + ":" + Minuti + "." + Secondi + " di " + nameDay[Data.getDay()] + ", " + Giorno + " " + Mesi[Mese] + " " + Anno

        ID = setTimeout("Aggiorn();",1000);
      if (document.all)
          document.all.clock.innerHTML=Cal 
      else
        document.write(Orologio)      
    }
  }
  
//  End --> 
</script>  

Dopodichè in ogni pagina in cui vuoi inserire l'orologio metti:
<link rel="stylesheet" type="text/css" href="style.css">
<SCRIPT language="JavaScript" SRC="orologio.js"></SCRIPT>

Sei sicuro che servano questi pezzi di codice?

<style type="text/css">
<!--

-->
</style>

<script language="JavaScript" type="text/javascript">

</script>

[dementialsite]

[4 funcool & probid] No, anzi, nei file esterni (siano essi CSS o JS), NON VA INSERITO alcun tipo di intestazione HTML.

Statemi bene...

Grazie mille...
c'è qualcosa che non va perchè non funziona:

file style.css

.input { border-style: none;
         font-family:Verdana,Arial,Helvetica,sans-serif;
	 	 font-size:10pt;
	     color : red;
       }

file orologio.js

if (navigator.appName == "Microsoft Internet Explorer") {
    ID = setTimeout("Aggiorn();",1000);
    function Aggiorn() {
        Mesi = new Array(11);
        Mesi [0] = "Gennaio"
        Mesi [1] = "Febbraio"
        Mesi [2] = "Marzo"
        Mesi [3] = "Aprile"
        Mesi [4] = "Maggio"
        Mesi [5] = "Giugno"
        Mesi [6] = "Luglio"
        Mesi [7] = "Agosto"
        Mesi [8] = "Settembre"
        Mesi [9] = "Ottobre"
        Mesi [10] = "Novembre"
        Mesi [11] = "Dicembre"
        Data = new Date()
        Giorno = Data.getDate()
        Mese = Data.getMonth()
        Anno = Data.getYear()
        nameDay = new Array('Domenica','Lunedi','Martedi','Mercoledi','G  iovedi','Venerdi','Sabato');
        Ore = Data.getHours()
        Minuti = Data.getMinutes()
        Secondi = Data.getSeconds()
        if ((Ore > 6) && (Ore < 13)) Saluto = "Buon giorno"
        if ((Ore > 12) && (Ore < 18)) Saluto = "Buon pomeriggio"
        if ((Ore > 17) && (Ore < 22)) Saluto = "Buona sera"
        if (Ore > 21) Saluto = "Buona notte"
        if (Ore < 7) Saluto = "Buona notte"
        if (Minuti < 10) Minuti = "0" + Minuti
        if (Secondi < 10) Secondi = "0" + Secondi
      Cal = Saluto + ", sono le ore " + Ore + ":" + Minuti + "." + Secondi + " di " + nameDay[Data.getDay()] + ", " + Giorno + " " + Mesi[Mese] + " " + Anno

        ID = setTimeout("Aggiorn();",1000);
      if (document.all)
          document.all.clock.innerHTML=Cal 
      else
        document.write(Orologio) }
  }

dimentico qualcosa? dove sbaglio? grazie e buonaserata

[funcool]

Elimina questo:

if (navigator.appName == "Microsoft Internet Explorer") {
ID = setTimeout("Aggiorn();",1000);

Sostituisci questo pezzo:

ID = setTimeout("Aggiorn();",1000);
if (document.all)
document.all.clock.innerHTML=Cal
else
document.write(Orologio) }
}

Con questo:

document.getElementById("clock").innerHTML=Cal;
ID = setTimeout("Aggiorn();",1000);
}
Aggiorn();

Poi nel file HTML dove vuoi che appaia l'orologio scrivi:

<span id="clock"></span>

P.S.: Quando scrivi del codice mettilo tra i tag appositi.

GRAZIE MILLE ma c'è ancora qualcosa che non va

in htm

<htm>
<head>
<title>Documento senza titolo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="style.css">
<SCRIPT language="JavaScript" SRC="orologio.js"></SCRIPT>
</head>

<body>

<span id="clock"></span>

</body>
</html>

in style.css

.input { border-style: none;
         font-family:Verdana,Arial,Helvetica,sans-serif;
	 	 font-size:10pt;
	     color : red;
       }

IN OROLOGIO.JS

// JavaScript Document

    function Aggiorn() {
        Mesi = new Array(11);
        Mesi [0] = "Gennaio"
        Mesi [1] = "Febbraio"
        Mesi [2] = "Marzo"
        Mesi [3] = "Aprile"
        Mesi [4] = "Maggio"
        Mesi [5] = "Giugno"
        Mesi [6] = "Luglio"
        Mesi [7] = "Agosto"
        Mesi [8] = "Settembre"
        Mesi [9] = "Ottobre"
        Mesi [10] = "Novembre"
        Mesi [11] = "Dicembre"
        Data = new Date()
        Giorno = Data.getDate()
        Mese = Data.getMonth()
        Anno = Data.getYear()
        nameDay = new Array('Domenica','Lunedi','Martedi','Mercoledi','G  iovedi','Venerdi','Sabato');
        Ore = Data.getHours()
        Minuti = Data.getMinutes()
        Secondi = Data.getSeconds()
        if ((Ore > 6) && (Ore < 13)) Saluto = "Buon giorno"
        if ((Ore > 12) && (Ore < 18)) Saluto = "Buon pomeriggio"
        if ((Ore > 17) && (Ore < 22)) Saluto = "Buona sera"
        if (Ore > 21) Saluto = "Buona notte"
        if (Ore < 7) Saluto = "Buona notte"
        if (Minuti < 10) Minuti = "0" + Minuti
        if (Secondi < 10) Secondi = "0" + Secondi
      Cal = Saluto + ", sono le ore " + Ore + ":" + Minuti + "." + Secondi + " di " + nameDay[Data.getDay()] + ", " + Giorno + " " + Mesi[Mese] + " " + Anno

        document.getElementById("clock").innerHTML=Cal;
ID = setTimeout("Aggiorn();",1000);
}
Aggiorn();     
    }
  }

[funcool]

Prova a eliminare le ultime due parentesi graffe chiuse e sostituisci:

ID = setTimeout("Aggiorn();",1000);

Con:

setTimeout("Aggiorn();",1000);

ascolta ma lo richiamo bene in .htm?

[eqz]

Ciao,
forse ti sara' difficile apportare le modifiche del moderatore Funcool.

Riprova con *.css e *.js esterni quelli originali di W-L ed inserisci in

body al punto dove vuoi il tuo orologio e saluto il richiamo:


<body>

<script type="text/javascript" src="orologio.js"></script>
<span id="clock" class="input"></span>

</body>

Scusate l'intrusione.

[funcool]

Ho trovato l'errore: visto che lo span veniva caricato dopo il codice JavaScript non sapeva che esisteva quindi... dava errore.

<htm>
<head>
<title>Data - Ora</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<SCRIPT language="JavaScript" type="text/javascript" SRC="orologio.js"></SCRIPT>
</head>
<body onload="Aggiorn()">
<span id="clock"></span>
</body>
</html>

// JavaScript Document

    function Aggiorn() {
        Mesi = new Array(11);
        Mesi [0] = "Gennaio"
        Mesi [1] = "Febbraio"
        Mesi [2] = "Marzo"
        Mesi [3] = "Aprile"
        Mesi [4] = "Maggio"
        Mesi [5] = "Giugno"
        Mesi [6] = "Luglio"
        Mesi [7] = "Agosto"
        Mesi [8] = "Settembre"
        Mesi [9] = "Ottobre"
        Mesi [10] = "Novembre"
        Mesi [11] = "Dicembre"
        Data = new Date()
        Giorno = Data.getDate()
        Mese = Data.getMonth()
        Anno = Data.getYear()
        nameDay = new Array('Domenica','Lunedi','Martedi','Mercoledi','G    iovedi','Venerdi','Sabato');
        Ore = Data.getHours()
        Minuti = Data.getMinutes()
        Secondi = Data.getSeconds()
        if ((Ore > 6) && (Ore < 13)) Saluto = "Buon giorno"
        if ((Ore > 12) && (Ore < 18)) Saluto = "Buon pomeriggio"
        if ((Ore > 17) && (Ore < 22)) Saluto = "Buona sera"
        if (Ore > 21) Saluto = "Buona notte"
        if (Ore < 7) Saluto = "Buona notte"
        if (Minuti < 10) Minuti = "0" + Minuti
        if (Secondi < 10) Secondi = "0" + Secondi
	Cal = Saluto + ", sono le ore " + Ore + ":" + Minuti + "." + Secondi + " di " + nameDay[Data.getDay()] + ", " + Giorno + " " + Mesi[Mese] + " " + Anno

        document.getElementById("clock").innerHTML=Cal;
	setTimeout("Aggiorn();",1000);
}

Il file style non è obbligatorio ma se vuoi inserirlo, inseriscilo e metti poi lo span come il il messaggio qui sopra.

Perfetto grazie mille!!!

senti che tu sappia è possibile far funzionare questo datario/orologio anche con altri browsers oltre che con IE? weblink dice no.

[funcool]

Come l'ho modificato io funziona sicuramente con Internet Explorer e FireFox e credo anche con tutti gli altri.

Grazie mille sto imparando moltissime cose, sei grande!
ciaooooo

[funcool]

Mi sono dimenticato una cosa: dovresti modificare la riga questa riga:

Anno = Data.getYear()

Con questa:

Anno = (Data.getYear()<1900)?Data.getYear()+1900:Data.getYear();

Per chi volesse verificare la funzionalità, ho caricato la pagina qui.

E' necessario l'attributo onload? <body onload="Aggiorn()">

[funcool]

E' necessario l'attributo onload? <body onload="Aggiorn()">

Sì, perché lo span viene caricato dopo il codice Javascript, quindi il codice Javascript non "sa" che esiste lo span. Comunque lo avevo già scritto nel post #14.

[dementialsite]

Mi sono dimenticato una cosa: dovresti modificare la riga questa riga:

Anno = Data.getYear()

Con questa:

Anno = (Data.getYear()<1900)?Data.getYear()+1900:Data.getYear();

...

È sufficiente questo:

Anno = Data.getFullYear()

Statemi bene...