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:
<html>
<head>
<meta charset="utf-8" />
<title>Conto alla rovescia in jQuery | Iwebdesigner.it Demo</title>
<!-- Our CSS stylesheet file -->
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300" />
<link rel="stylesheet" href="assets/css/styles.css" />
<link rel="stylesheet" href="assets/countdown/jquery.countdown.css" />
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div id="countdown"></div>
<p id="note"></p>
<footer>
<h2><i>Tutorial:</i> Conto alla rovescia in jQuery</h2>
<a class="iwd" href="http://www.iwebdesigner.it">Torna al blog <i><b>iwebdesigner.it</b></i> per scaricare l'esempio</a>
</footer>
<!-- JavaScript includes -->
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="assets/countdown/jquery.countdown.js"></script>
<script src="assets/js/script.js"></script>
</body>
</html>
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('<span class="countDiv countDiv'+i+'"></span>');
}
});
}
// 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 ? '':'' ) + " <br />";
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.
Condividi
Potrebbe interessarti anche:
Costruire menu animato con jQuery
Regolazione livelli in Photoshop
Creare modulo contatti in Php MySql e jQuery
Creare un cartone animato in Flash: le espressioni del volto
Cutter (6)
katia (4)
Fabrizio (3)
kkkioe (3)
Paola (3)
barbara (2)
Jimmy (2)![[Valid RSS]](http://feedvalidator.org/images/valid-rss-rogers.png "Validate my RSS feed")
4 comments
Ma il countdown parte sempre dallo stesso punto e cioè ogni volta che apri la pagina web riprende sempre da capo, come mai ? Saluti Marco
Prova a cambiare la data dalla seguente riga del file script.js:
ts = new Date(2012, 0, 1),
Cambiando ad esempio in
ts = new Date(2013, 0, 1),
javascript inizierà a contare dalla data impostata sul tuo sistema, in countdown fino al 2013, funzionando perfettamente ad ogni refresh.
Ciao ma è possibile avere 3 cifre per i giorni?
purtroppo lo script non lo prevede.
prova quest’altro countdown jquery.
Lascia un Commento
Allowed tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>