Creare un conto alla rovescia con jQuery

Creare-un-conto-alla-rovescia-con-jQuery

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!