Altro appuntamento con un tutorial jQuery semplice, ma molto utile per il lancio di un nuovo sito internet o portale, il conto alla rovescia. Un Countdown puo’ creare molte aspettative da parte dell’utente, quindi deve essere sviluppato con tutti i carismi per essere utile, accattivante ed originale. Grazie al codice jQuery riusciamo a rendere il nostro conto alla rovescia unico, efficace e di design. Eccoci quindi ad iniziare il nostro tutorial Countdown jQuery. Oggi, come preannunciato, vogliamo costruire un conto alla rovescia in jQuery che puo’ essere utilizzato per definire quanti giorni mancano al lancio di una pagina web all’interno di una coming soon page. Il nostro conto alla rovescia dovra’ mostrare giorni, ore, minuti e secondi mancanti all’evento prescelto.
Iniziamo subito!
DEMO
CODICE HTML
Qui di seguito il codice Html, molto semplice e facile da capire:
Conto alla rovescia in jQuery | Iwebdesigner.it Demo
<!-- Our CSS stylesheet file -->
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<footer>
<h2><em>Tutorial:</em> Conto alla rovescia in jQuery</h2>
<a class="iwd" href="http://www.iwebdesigner.it">Torna al blog <em><strong>iwebdesigner.it</strong></em> per scaricare l'esempio</a></footer>
<!-- JavaScript includes --><script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="assets/countdown/jquery.countdown.js"></script><script type="text/javascript" src="assets/js/script.js"></script>
La cosa importante in questo codice e’ il DIV countdown. A questo DIV viene applicata una classe CountdownHolder attraverso il codice jQuery contenuto nel file jquery.countdown.js, che analizziamo in seguito, e gestito tutto dal file CSS jquery.countdown.css che ci fa vedere i bottoni, le cifre e le dimensioni dei caratteri. Ecco il codice:
.countdownHolder{
width:450px;
margin:0 auto;
font: 40px/1.5 'Open Sans Condensed',sans-serif;
text-align:center;
letter-spacing:-3px;
}
.position{
display: inline-block;
height: 1.6em;
overflow: hidden;
position: relative;
width: 1.05em;
}
.digit{
position:absolute;
display:block;
width:1em;
background-color:#444;
border-radius:0.2em;
text-align:center;
color:#fff;
letter-spacing:-1px;
}
.digit.static{
box-shadow:1px 1px 1px rgba(4, 4, 4, 0.35);
background-image: linear-gradient(bottom, #3A3A3A 50%, #444444 50%);
background-image: -o-linear-gradient(bottom, #3A3A3A 50%, #444444 50%);
background-image: -moz-linear-gradient(bottom, #3A3A3A 50%, #444444 50%);
background-image: -webkit-linear-gradient(bottom, #3A3A3A 50%, #444444 50%);
background-image: -ms-linear-gradient(bottom, #3A3A3A 50%, #444444 50%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.5, #3A3A3A),
color-stop(0.5, #444444)
);
}
/**
* You can use these classes to hide parts
* of the countdown that you don't need.
*/
.countDays{ /* display:none !important;*/ }
.countDiv0{ /* display:none !important;*/ }
.countHours{}
.countDiv1{}
.countMinutes{}
.countDiv2{}
.countSeconds{}
.countDiv{
display:inline-block;
width:16px;
height:1.6em;
position:relative;
}
.countDiv:before,
.countDiv:after{
position:absolute;
width:5px;
height:5px;
background-color:#444;
border-radius:50%;
left:50%;
margin-left:-3px;
top:0.5em;
box-shadow:1px 1px 1px rgba(4, 4, 4, 0.5);
content:'';
}
.countDiv:after{
top:0.9em;
}
CODICE JQUERY
Analizziamo il codice jQuery del file jquery.countdown.js:
function init(elem, options){
elem.addClass('countdownHolder');
// Creating the markup inside the container
$.each(['Days','Hours','Minutes','Seconds'],function(i){
$('<span class="count'+this+'">').html(
'<span class="position">\
<span class="digit static">0</span>\
</span>\
<span class="position">\
<span class="digit static">0</span>\
</span>'
).appendTo(elem);
if(this!="Seconds"){
elem.append('');
}
});
}
// Creates an animated transition between the two numbers
function switchDigit(position,number){
var digit = position.find('.digit')
if(digit.is(':animated')){
return false;
}
if(position.data('digit') == number){
// We are already showing this number
return false;
}
position.data('digit', number);
var replacement = $('<span>',{
'class':'digit',
css:{
top:'-2.1em',
opacity:0
},
html:number
});
// The .static class is added when the animation
// completes. This makes it run smoother.
digit
.before(replacement)
.removeClass('static')
.animate({top:'2.5em',opacity:0},'fast',function(){
digit.remove();
})
replacement
.delay(100)
.animate({top:0,opacity:1},'fast',function(){
replacement.addClass('static');
});
}
})(jQuery);
La funzione init ci fa assumere il markup del nostro file CSS, come detto in precedenza; la funzione swichtDigit anima le cifre all’interno del markup
(function($){
// Number of seconds in every time division
var days = 24*60*60,
hours = 60*60,
minutes = 60;
// Creating the plugin
$.fn.countdown = function(prop){
var options = $.extend({
callback : function(){},
timestamp : 0
},prop);
var left, d, h, m, s, positions;
// Initialize the plugin
init(this, options);
positions = this.find('.position');
(function tick(){
// Time left
left = Math.floor((options.timestamp - (new Date())) / 1000);
if(left < 0){
left = 0;
}
// Number of days left
d = Math.floor(left / days);
updateDuo(0, 1, d);
left -= d*days;
// Number of hours left
h = Math.floor(left / hours);
updateDuo(2, 3, h);
left -= h*hours;
// Number of minutes left
m = Math.floor(left / minutes);
updateDuo(4, 5, m);
left -= m*minutes;
// Number of seconds left
s = left;
updateDuo(6, 7, s);
// Calling an optional user supplied callback
options.callback(d, h, m, s);
// Scheduling another call of this function in 1s
setTimeout(tick, 1000);
})();
// This function updates two digit positions at once
function updateDuo(minor,major,value){
switchDigit(positions.eq(minor),Math.floor(value/10)%10);
switchDigit(positions.eq(major),value%10);
}
return this;
};
/* The two helper functions go here */
La funzione tick si richiama da sola ogni secondo. Al suo interno viene calcolata la differenza dal tempo Timestamp dato a quello corrente. Con la funzione updateDuo vengono aggiornate le cifre dei giorni, ore, minuti e secondi.
Il plugin e’ pronto ci manca solo il file Script.js :
$(function(){
var note = $('#note'),
ts = new Date(2012, 0, 1),
newYear = true;
if((new Date()) > ts){
// The new year is here! Count towards something else.
// Notice the *1000 at the end - time must be in milliseconds
ts = (new Date()).getTime() + 10*24*60*60*1000;
newYear = false;
}
$('#countdown').countdown({
timestamp : ts,
callback : function(days, hours, minutes, seconds){
var message = "";
message += days + " giorni" + ( days==1 ? '':'' ) + ", ";
message += hours + " ore" + ( hours==1 ? '':'' ) + ", ";
message += minutes + " minuti" + ( minutes==1 ? '':'' ) + " and ";
message += seconds + " secondi" + ( seconds==1 ? '':'' ) + "
";
if(newYear){
message += "mancano prima di fine anno!";
}
else {
message += "mancano 10 giorni da adesso!";
}
note.html(message);
}
});
});
Ecco fatto adesso funziona!
DEMO
DOWNLOAD
Abbiamo creato un conto alla rovescia in jQuery con l’uso dei CSS che possiamo elaborare e personalizzare a nostro piacimento.
