le formule magiche

Data, ora, calendari ecc.Date, time and calendars

Informazioni sull'accesso a queste risorse

Modulo di contatto per i membri
Per aiuto e segnalazioni

Membership index

NOTA: I download riservati ai membri possono essere effettuati anche senza registrazione con una piccola donazione a sostegno del sito.

Lista delle risorse scaricabili con donazione

ATTENZIONE: Non dimenticate di aggiungere i vendor prefixes ai codici css di base.

Rassegna di script per implementare la data e l'ora, o interi calendari, nelle pagine del sito, con grafica differente.

NOTE: to test the codes you can use the HTML Editor.


Date and time

Data e ora

Current year - HTML, JS

Anno corrente - HTML, JS

Apri codice:
<span id="year"></span>

<script>
    document.getElementById("year").innerHTML = new Date().getFullYear();
</script>

Date and time onclick - HTML, JS

Data e ora al click - HTML, JS

Esempio:

Apri codice:
<button id="btnTimeDate">Get Date</button>
<div id="timeDate"></div>

<script>
var clickState = 0;
document.getElementById("btnTimeDate").onclick = function(){
  if (clickState == 0) {
    document.getElementById("timeDate").innerHTML = Date();
    clickState = 1;
  } else {
    document.getElementById("timeDate").innerHTML = "";
    clickState = 0;
  }
}
</script>

Local date and time - HTML, CSS, JS

Data e ora locali - HTML, CSS, JS

Si aggiorna all'aggiornamento della pagina.
Esempio:
Apri codice:
<p id="demo"></p>

<script>
const d = new Date();
let text = d.toLocaleString();
document.getElementById("demo").innerHTML = text;
</script>

Real time date and time - HTML, JS

Data e ora in tempo reale - HTML, JS

Esempio:
Apri codice:
<div id="date-time"></div>
<script>
  // Function to format 1 in 01
  const zeroFill = n => {
  return ('0' + n).slice(-2);
  }
 // Creates interval
 const interval = setInterval(() => {
 // Get current time
 const now = new Date();
 // Format date as in mm/dd/aaaa hh:ii:ss
 const dateTime = zeroFill((now.getMonth() + 1)) + '/' + zeroFill(now.getUTCDate()) + '/' + now.getFullYear() + ' ' + zeroFill(now.getHours()) + ':' + zeroFill(now.getMinutes()) + ':' + zeroFill(now.getSeconds());
 // Display the date and time on the screen using div#date-time
 document.getElementById('date-time').innerHTML = dateTime;
 }, 1000);
</script>

Last page update date - HTML, JS

Data dell'ultimo aggiornamento della pagina - HTML, JS

Apri codice:
<p>Last modified on <span id="modify"></span></p>

<script>
document.getElementById("modify").innerHTML = document.lastModified
</script>

Last page update date in italian style - HTML, JS

Data dell'ultimo aggiornamento della pagina con data stile italiano - HTML, JS

Apri codice:
<p>Ultimo aggiornamento il <span id="modify"></span></p>
<script>
var data_mod = new Date(document.lastModified);
var giorno = data_mod.getDate();
var mese = data_mod.getMonth() + 1;
var anno = data_mod.getFullYear();
var ora = data_mod.getHours();
var minuti = data_mod.getMinutes();
document.getElementById("modify").innerHTML = giorno + "/" + mese + "/" + anno + "  " + ora + ":" + minuti;
</script>

Calendars

Calendari

3a-Simple calendar - HTML, CSS, JS

3a-Calendario semplice - HTML, CSS, JS

Preview + download

3b-Events calendar - HTML, CSS, jQuery

3b-Calendario eventi - HTML, CSS, jQuery

Preview + download

3c-Events calendar 2 - HTML, CSS, jQuery

3c-Calendario eventi 2 - HTML, CSS, jQuery

Preview + download

Other

Altro

Countdown - HTML, CSS, JS

Conto alla rovescia - HTML, CSS, JS

Preview + code

Membership index

Argomenti del sito correlati: