Inizialmente ho provato a costruire il countdown con uno degli innumerevoli servizio online che "sparano" il contatore attraverso un iframe (tipo https://www.timeanddate.com/clocks/freecountdown.html) ma ho desistito, per due motivi:
- poco controllo sul risultato
- impossibilità di evitare il link verso il servizio di creazione del countdown
Quindi ho tentato di costruirlo in javascript, scrivendo il codice direttamente nella pagina wordpress.
Ecco il codice che sto usando (sicuramente non ottimizzato, ma intanto va):
<div role="main"></div>
<script type="text/javascript">
//or this? http://www.diveintojavascript.com/projects/javascript-sprintf
String.prototype.format = function() {
var args = arguments;
return this.replace(/{(\d+)}/g, function(match, number) {
return typeof args[number] != 'undefined'
? args[number]
: match
;
});
};
setInterval(function() {
//update clock
var now = new Date();
var date2 = new Date('2018-03-24T12:00:00');
var dif = date2.getTime() - now.getTime();//in millisecondi
var Seconds_from_T1_to_T2 = dif / 1000;
var Seconds_Between_Dates = Math.abs(Seconds_from_T1_to_T2);
var giorni_mancanti = Math.floor(Seconds_Between_Dates/86400);
var ore_mancanti = Math.floor((Seconds_Between_Dates % 86400)/3600);
var minuti_mancanti = Math.floor(((Seconds_Between_Dates % 86400)%3600)/60);
var secondi_mancanti = Math.floor((((Seconds_Between_Dates % 86400)%3600)%60)%60);
var stringa = "Lxxxxxxxx: mancano ";
var date_string = '{0} giorni, {1} ore, {2} minuti, {3} secondi'.format(giorni_mancanti, ore_mancanti, minuti_mancanti, secondi_mancanti);
document.getElementById('countdown').textContent = stringa + date_string;
//change background color
var random_color = String.prototype.format.apply('rgb({0},{1},{2})', [256, 256, 256].map(function(v) {
return Math.floor(v*Math.random());
}));
//document.body.style.backgroundColor = random_color;
}, 1000);
</script>
