Utilizzo jQuery per creare un plug-in che permette di visualizzare su schermo un orologio live.
Creo un file js che chiamo jquery.time.js con il seguente codice:
Codice Javascript
(function($){
$.fn.time = function(options) {
var dataintera = new Date();
var HH = dataintera.getHours();
var MM = dataintera.getMinutes();
var SS = dataintera.getSeconds();
var defaults = {font_size:22 , color:'red'};
var options = $.extend(defaults, options);
return this.each(function() {
var str = '<span class="hh"></span> : <span class="mm"></span> : <span class="ss"></span>';
$(this).html(str)
.css({'font-size': options.font_size+'px', 'color': options.color});
if(SS<=9){
$(' span.ss').html('0'+SS);
}
else{
$(' span.ss').html(SS);
};
if(MM<=9){
$(' span.mm').html('0'+MM);
}else{
$(' span.mm').html(MM);
};
if(HH<=9){
$(' span.hh').html('0'+HH);
}else{
$(' span.hh').html(HH);
};
setInterval(function(){
var data = new Date();
var h = dataintera.getHours();
var m = dataintera.getMinutes();
var s = dataintera.getSeconds();
if(s<=9){$('span.ss').html('0'+s);
} else{$('span.ss').html(s);
};
if(m<=9){$('span.mm').html('0'+m);
}else{$('span.mm').html(m);
};
if(h<=9){$('span.hh').html('0'+h);
}else{$('span.hh').html(h);
};
},1000);
});
};
})(jQuery);la variabile dataintera è la data e l'ora attuale che ricavo utilizzando new Date(), da questa data ricavo l'ora (HH), i minuti (MM), i secondi (SS), utilizzando rispettivamente i metodi getHours(), getMinutes(), getSeconds(), imposto un valore di default del "font-size" e "color" dell'orologio definendo la variabile defaults, il font-size e il color possono essere definiti a proprio piacere, pertanto
$.extend(defaults, options);
sovrascrive i valori di default con quelli passati tramite options.
La variabile str contiene il codice html, tre tag <span> per l'ora, i minuti e i secondi attuali, rispettivamente con classe hh, mm, ss.
$(this) é l'oggetto del DOM nel quale viene inserito il codice html della variabile str, a cui viene applicato anche la formattazione con il metodo css(), il font-size e il color.
Il metodo setInterval() cambia il valore dell'ora, dei minuti e dei secondi ogni secondo, il valore è espresso in millisecondi (1000).
Il codice html è il seguente:
Codice HTML
<html>
<head></head>
<title>JQuery Time Plug-in</title>
<body>
<div class="watch"></div>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.time.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.watch').time({font_size:50 , color:'blue'});
});
</script>
</body>
</html>ho definito un contenitore div con classe .watch, jquery.js è la versione corrente della libreria.