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.

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

Codice HTML:

---

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

---

:wink:

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

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

Codice HTML:

---

<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:

Codice HTML:

---

<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>

:wink:

Citazione:

---

Originalmente inviato da probid

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

Codice HTML:

---

<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:

Codice HTML:

---

<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>

:wink:

---

Sei sicuro che servano questi pezzi di codice?

Codice HTML:

---

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

---

Codice HTML:

---

-->
</style>

---

Codice HTML:

---

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

---

Codice HTML:

---

</script>

---

[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

Codice:

---

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

---

file orologio.js

Codice:

---

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

Elimina questo:

Codice:

---

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

---

Sostituisci questo pezzo:

Codice:

---

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

---

Con questo:

Codice:

---

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

---

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

Codice HTML:

---

<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

Codice HTML:

---

<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

Codice HTML:

---

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

---

IN OROLOGIO.JS

Codice 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;
ID = setTimeout("Aggiorn();",1000);
}
Aggiorn();   
    }
  }

---

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

Codice:

---

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

---

Con:

Codice:

---

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

---

ascolta ma lo richiamo bene in .htm?

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.

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

Codice HTML:

---

<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>

---

Codice:

---

// 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.

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

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

Codice:

---

Anno = Data.getYear()

---

Con questa:

Codice:

---

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()">

Citazione:

---

Originalmente inviato da sottoscalapunk

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.

Citazione:

---

Originalmente inviato da funcool

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

Codice:

---

Anno = Data.getYear()

---

Con questa:

Codice:

---

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

---

...

---

È sufficiente questo:

Codice:

---

Anno = Data.getFullYear()

---

Statemi bene...