Il Cielo Delle Baronie

Benvenuto in questo sito, dedicato alle bellezze del cielo della Sardegna.

• Giorno Giuliano
• Giorno della settimana
• Countdown
• Calendario HTML

Calcolo del Giorno Giuliano in questo istante:

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

    var njd=calcola_jd();  // (1)Calcola il G.G. (in T.U. di Greenwich), in questo istante.

    document.write(njd);   // scrive il risultato.

 //-->

</script>

 La riga (1) può essere sostituita con una delle seguenti funzioni...

 var njd=calcola_jdUT0();        // calcola il G.G. per l'ora 0(zero) di oggi in T.U.
 var njd=calcola_jda();          // calcola il G.G. per l'inizio dell'anno corrente.
 var njd=calcola_jd_anno(yy);    // G.G. per l'inizio dell'anno specificato nel parametro(yy).

 var njd=calcola_jddata(dd,mm,yy,hh,mi,se);   // Calcola il G.G. per qualsiasi data.

Listato valido per qualsiasi data:

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

    //calcola il G.G. per la data indicata nelle variabili.

    var dd=23;                     // giorno.
    var mm=6;                      // mese.
    var yy=2011;                   // anno.
    var hh=10;                     // ora.
    var mi=20;                     // minuti.
    var se=30.256;                 // secondi (possono avere decimali).

    var njd=calcola_jddata(dd,mm,yy,hh,mi,se);

    document.write(njd);      // scrive il risultato.

    //-->

</script>

Le prime sette righe del listato, possono essere ridotte ai minimi termini con l'inserimento dei valori numerici della data direttamente nella funzione:

    var njd=calcola_jddata(23,6,2011,10,20,30.256); // La data.

Fate attenzione alla virgola (,) di separazione dei parametri da quella per i numeri decimali (.).

Ricavare la data del calendario in funzione del Giorno Giuliano:

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

    //Ricava la data (dd,mm,yy) noto il numero del Giorno Giuliano.

    var njd=2455735.93;           // Inserire il numero del G.G. della data.

    var data=jd_data(njd);        // array data del calendario.

                                        // Stampa i risultati

    document.write(data[0]+" | ");    // giorno e ore decimali.
    document.write(data[1]+" | ");    // mese.
    document.write(data[2]+" | ");    // anno.
    document.write(data[3]+" | ");    // giorno della settimana in italiano (abbreviato).
    document.write(data[4]+" || ");   // giorno della settimana in inglese (abbreviato).
    document.write(data[5]+" || ");   // valore numerico del giorno della settimana (0,1,2,...).

    var giorno=sc_day(data[0]);   // sc_day scompone il giorno decimale in gg,hh,min,sec.

    document.write(giorno);      // giorno,ora,minuti,secondi


    //-->

</script>

Giorno della settimana per una data:

Per ricavare in quale giorno della settimana cade una certa data, utilizzate questo listato...

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

    //<!--
    //Ricava il giorno della settimana.

    var dd=12;                    // giorno.
    var mm=10;                    // mese.
    var yy=1492;                  // anno.
    var hh=2;                     // ora 
    var mi=0;                     // minuti 
    var se=0;                     // secondi

    var  njd=calcola_jddata(dd,mm,yy,hh,mi,se); // calcola il G.G. della data.

    var data=jd_data(njd);                      // giorno della settimana

    document.write(data[3]);      // giorno della settimana (abbreviato).

    // Per il 12 Ottobre 1492 il risultato è: "Ve" - che corrisponde a Venerdì.

    //-->

</script>

Il numero di giorni trascorsi dall'inizio dell'anno.

Funzione per il calcolo dei numeri di giorni trascorsi dall'inizio dell'anno in corso.

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

    //<!--
    //Ricava il numero di giorni trascorsi dall'inizio dell'anno.


    var     njd=calcola_jd();;      // il G.G. di oggi.
    var  njd_ia=calcola_jda(); ;    // il G.G. per l'inizio dell'anno.

    var num_giorno=njd-njd_ia;                       // giorni trascorsi.
        num_giorno=parseInt(num_giorno);             // elimina i decimali.

    document.write("Sono trascorsi "+num_giorno+" giorni!");      // scrive il risultato.


    //-->

</script>

Numero di giorni trascorsi tra due date:

Con un listato simile al precedente è possibile ricavare i giorni trascorsi tra due eventi qualsiasi; basta utilizzare la funzione
calcola_jddata(dd,mm,yy,hh,mi,se). sostituendo le due precedenti e inserendo nei parametri, le due date...

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

    //<!--
    //Ricava il numero di giorni trascorsi tra due date.


    var     njd=calcola_jddata(23,6,1986,0,0,0);   // Data1: 23-06-1986.
    var  njd_ia=calcola_jddata(23,1,2011,0,0,0);   // Data2: 23-01-2011.

    var num_giorno=njd-njd_ia;                     // giorno trascorsi.
        num_giorno=parseInt(num_giorno);           // elimina i decimali.

    document.write("Sono trascorsi "+num_giorno+" giorni!");      // scrive il risultato.


    //-->

</script>

Per ricavare il numero di giorni trascorsi dall'inizio dell'anno, utilizzando l'ultimo listato; dovete inserire 0 gennaio, invece di 1° gennaio: calcola_jddata(0,1,2011,0,0,0), che corrisponde allo 0 gennaio 2011.

Countdown listato (1):

Utilizzando la numerazione giuliana, è facile realizzare un semplice Countdown...

<p id="posdata">posizione del countdown</p> <!-- posizione della data nel documento HTML --> 

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

    //<!--
    //Countdown (listato 1)

    var  njd_cd=calcola_jddata(23,12,2012,0,0,0); // data del Countdown.

    countdown(njd_cd);

      function countdown(njd_cd) { 

          var        njd=calcola_jd();;           // il G.G. di oggi.
          var num_giorno=njd_cd-njd;              // giorno trascorsi.
              num_giorno=sc_day(num_giorno);      // formatta in giorni:ore:minuti.

          document.getElementById("posdata").innerHTML=(""+num_giorno);

      }

z=setInterval("countdown(njd_cd)",1000);   // ripete il calcolo dopo ogni secondo.

    //-->

</script>

Se non siete soddisfatti del tipo di formattazione della data, potete eliminare la funzione sc_day(...) e calcolare i tempi "manualmente".

var dd_dec=Math.abs(num_giorno);                       // recupera il valore assoluto.

var dd=parseInt(dd_dec);                               //  giorni. 
var hh=parseInt((dd_dec-dd)*24);                       //     ore. 
var mm=parseInt(((dd_dec-dd)*24-hh)*60);               //  minuti. 
var ss=parseInt(((((dd_dec-dd)*24-hh)*60)-mm)*60);     // secondi. 

Countdown listato (2):

<h2 id="posdata">posizione del countdown</h2> <!-- posizione della data nel documento HTML --> 

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

    //<!--
    //Countdown (listato 2).

    var  njd_cd=calcola_jddata(23,12,2012,0,0,0); // data del Countdown.

    countdown(njd_cd);

      function countdown(njd_cd) { 

          var        njd=calcola_jd();;           // il G.G. di oggi.
          var num_giorno=njd_cd-njd;              // giorno trascorsi.

          var dd_dec=Math.abs(num_giorno);                       // recupera il valore assoluto.

          var dd=parseInt(dd_dec);                               //  giorni. 
          var hh=parseInt((dd_dec-dd)*24);                       //     ore. 
          var mm=parseInt(((dd_dec-dd)*24-hh)*60);               //  minuti. 
          var ss=parseInt(((((dd_dec-dd)*24-hh)*60)-mm)*60);     // secondi. 

          var data=dd+":"+hh+":"+mm+":"+ss;                      //giorni+ore+minuti+secondi. 

          document.getElementById("posdata").innerHTML=(""+data);

      }

z=setInterval("countdown(njd_cd)",1000);

    //-->

</script>

//Per avere i secondi con (2) decimali, sostituite la riga dei secondi (ss), con questa:

         var ss=(((((dd_dec-dd)*24-hh)*60)-mm)*60).toFixed(2);  // I secondi con 2 decimali. 

Dopo aver recuperato le 4 variabili del tempo, le potete formattare nel modo che ritenete più opportuno.

Realizzare un calendario con Html, JavaScript e AstroJS:

Sempre utilizzando i G.G. è possibile realizzare un calendario come questo.

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

    var      dd=new Array("");
    var classed=new Array("");    // definisce le classi per il  CSS

    var    data=new Date();       // Data 
    var    anno=data.getYear();   // recupera l'anno
    var    mese=data.getMonth();  // recupera il mese : 0 a 11 
    var giorno0=data.getDate();   // recupera il numero del giorno attuale da 1 a 31.
        mese=mese+1;              // riporta il mese all'interno dell'intervallo 1-12. 

   if (anno<1900) {anno=anno+1900;}// correzione dell'anno per il browser. 

      var numero_giorni=calcola_dd_mese(mese,anno);// calcola il numero di giorni del mese 28-31

      var njd=calcola_jddata(1,mese,anno,0,0,0); // giorno giuliano del primo giorno del mese.
      var data_cal=jd_data(njd);
      var aa=data_cal[5]; // verifica in quale giorno della settimana ricade il 1° giorno del mese. 
                          // restituisce un numero da 0,....6   0=domenica  6=sabato
      var nn_giorni=40;
      var righe=5;        // numero di righe

 // se il primo giorno del mese ricade di venerdi o sabato,
 // aggiunge una riga al calendario:righe=6.
 // aggiunge 5 giorni a nn_giorni=45.

   if (data_cal[5]==6 || data_cal[5]==5 ) {righe=6; nn_giorni=45; }

// associa la classe predefinita "colore_tabellavv" 

for (c=0; c<nn_giorni; c++){   dd[c]=""; classed[c]="colore_tabellavv"; }

for(b=1 ; b<numero_giorni+1; b++){
   dd[aa+b-1]=b;
   classed[aa+b-1]="colore_tabella";
   if(b==giorno0){classed[aa+b-1]="colore_tabellagg";}
   }

 //  CREA LA TABELLA PER IL CALENDARIO

var nome_mese=rec_mese(mese);                   // recupera il nome del mese attuale.

document.write("<div id='calendario'>");

document.write("<h3>"+nome_mese+" "+anno+"<h3>");

document.write("<table width=70%>");

         document.write("   <tr>");
         document.write("     <td width=10% class='colore_tabellaef2'>Dom</td>");
         document.write("     <td width=10% class='colore_tabellaef2'>Lun</td>");
         document.write("     <td width=10% class='colore_tabellaef2'>Mar</td>");
         document.write("     <td width=10% class='colore_tabellaef2'>Mer</td>");
         document.write("     <td width=10% class='colore_tabellaef2'>Gio</td>");
         document.write("     <td width=10% class='colore_tabellaef2'>Ven</td>");
         document.write("     <td width=10% class='colore_tabellaef2'>Sab</td>");
         document.write("   </tr>");
 z=0;

for(a=0; a<righe; a++) {

         document.write("   <tr>");
         document.write("     <td class='"+classed[z]+  "'>"+dd[z]+"</td>");
         document.write("     <td class='"+classed[z+1]+"'>"+dd[z+1]+"</td>");
         document.write("     <td class='"+classed[z+2]+"'>"+dd[z+2]+"</td>");
         document.write("     <td class='"+classed[z+3]+"'>"+dd[z+3]+"</td>");
         document.write("     <td class='"+classed[z+4]+"'>"+dd[z+4]+"</td>");
         document.write("     <td class='"+classed[z+5]+"'>"+dd[z+5]+"</td>");
         document.write("     <td class='"+classed[z+6]+"'>"+dd[z+6]+"</td>");
         document.write("   </tr>");

         z=z+7;

}
         document.write(" </table>");

document.write("</div>");

</script>

Quando definite le dimensioni massime in altezza del calendario, tenete conto, della situazione in cui, il primo giorno del mese, ricade di venerdì o di sabato. In questo caso, come potete notare, per inserire gli ultimi giorni del mese sarà necessario aggiungere un'altra riga.
Non preoccupatevi, lo fa l'algoritmo! - Voi, fate in modo di non avvicinare troppo, il bordo inferiore alla sesta riga.

Se come me, non amate questi lunghi listati, inseriti direttamente all'interno della pagina html; dopo aver fatto le prove di funzionamento, trasferite lo script all'interno di un file (.js) javascript, e richiamatelo, dentro la pagina, attraverso una funzione definita in precedenza.

Codice CSS:

Questo è il codice CSS, non mi sono molto impegnato... modificatelo, in funzione del vostro layout.

#calendario{
 background-color: #EEEEEE;
 width: 220px;
 border: 1px solid blue;
 margin: 0px;
 padding:0px;}

table{   width: 100%; margin-bottom: 0px; padding-bottom: 0px;}

h3{  text-align: center; padding: 0px; margin-top: 0px; border-bottom: 0px;
     font-family: Courier New;
     color: #990000;}

#calendario td {
   color: black;
   font-family: Arial;
   font-size: 8pt;
   padding: 2px;
   margin: 2px;
   font-weight: normal;
   }

.colore_tabellaef2{ background-color: gray; border: 1px solid gray;
                    font-family: Arial, Helvetica, sans-serif;
                    font-size: 10pt; }                               /* nomi dei giorni  */

.colore_tabella   { background-color: #DDDDDD; }                     /* giorni del mese  */
.colore_tabellagg { background-color: #FF0033; font-weight: bold;}   /* giorno attuale   */
.colore_tabellavv { background-color: #EEEEEE; }                     /* celle vuote      */