Oggi 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
Tutorial: Conto alla rovescia in jQuery
Torna al blog iwebdesigner.it per scaricare l'esempio
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){
$('').html(
'\
0\
\
\
0\
'
).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 = $('',{
'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 create un conto alla rovescia in jQuery con l’uso dei CSS che possiamo elaborare e personalizzare a nostro piacimento.