Mappa del sito
Time and calendars
Data, ora, calendari ecc.
Information on accessing these resourcesMember contact form
List of downloadable sresources with donation
ATTENTION: Don't forget to add the vendor prefixes to the css basic codes.
Review of scripts to implement the date and time, or entire calendars, on the pages of the site, with different graphics.
NOTA: per provare i codici, puoi utilizzare l'HTML Editor. 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
Codice:
<span id="year"></span>
<script>
document.getElementById("year").innerHTML = new Date().getFullYear();
</script>
<script>
document.getElementById("year").innerHTML = new Date().getFullYear();
</script>
Date and time onclick - HTML, JS
Data e ora al click - HTML, JS
Esempio: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>
<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:
Codice:
<p id="demo"></p>
<script>
const d = new Date();
let text = d.toLocaleString();
document.getElementById("demo").innerHTML = text;
</script>
<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: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>
<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
Codice:
<p>Last modified on <span id="modify"></span></p>
<script>
document.getElementById("modify").innerHTML = document.lastModified
</script>
<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
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>
<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
Argomenti del sito correlati: