├── countdown ├── jquery.countdown.css └── jquery.countdown.js └── readme.md /countdown/jquery.countdown.css: -------------------------------------------------------------------------------- 1 | .countdownHolder{ 2 | width:450px; 3 | margin:0 auto; 4 | font: 40px/1.5 'Open Sans Condensed',sans-serif; 5 | text-align:center; 6 | letter-spacing:-3px; 7 | } 8 | 9 | .position{ 10 | display: inline-block; 11 | height: 1.6em; 12 | overflow: hidden; 13 | position: relative; 14 | width: 1.05em; 15 | } 16 | 17 | .digit{ 18 | position:absolute; 19 | display:block; 20 | width:1em; 21 | background-color:#444; 22 | border-radius:0.2em; 23 | text-align:center; 24 | color:#fff; 25 | letter-spacing:-1px; 26 | } 27 | 28 | .digit.static{ 29 | box-shadow:1px 1px 1px rgba(4, 4, 4, 0.35); 30 | 31 | background-image: linear-gradient(bottom, #3A3A3A 50%, #444444 50%); 32 | background-image: -o-linear-gradient(bottom, #3A3A3A 50%, #444444 50%); 33 | background-image: -moz-linear-gradient(bottom, #3A3A3A 50%, #444444 50%); 34 | background-image: -webkit-linear-gradient(bottom, #3A3A3A 50%, #444444 50%); 35 | background-image: -ms-linear-gradient(bottom, #3A3A3A 50%, #444444 50%); 36 | 37 | background-image: -webkit-gradient( 38 | linear, 39 | left bottom, 40 | left top, 41 | color-stop(0.5, #3A3A3A), 42 | color-stop(0.5, #444444) 43 | ); 44 | } 45 | 46 | /** 47 | * You can use these classes to hide parts 48 | * of the countdown that you don't need. 49 | */ 50 | 51 | .countDays{ /* display:none !important;*/ } 52 | .countDiv0{ /* display:none !important;*/ } 53 | .countHours{} 54 | .countDiv1{} 55 | .countMinutes{} 56 | .countDiv2{} 57 | .countSeconds{} 58 | 59 | 60 | .countDiv{ 61 | display:inline-block; 62 | width:16px; 63 | height:1.6em; 64 | position:relative; 65 | } 66 | 67 | .countDiv:before, 68 | .countDiv:after{ 69 | position:absolute; 70 | width:5px; 71 | height:5px; 72 | background-color:#444; 73 | border-radius:50%; 74 | left:50%; 75 | margin-left:-3px; 76 | top:0.5em; 77 | box-shadow:1px 1px 1px rgba(4, 4, 4, 0.5); 78 | content:''; 79 | } 80 | 81 | .countDiv:after{ 82 | top:0.9em; 83 | } -------------------------------------------------------------------------------- /countdown/jquery.countdown.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @name jQuery Countdown Plugin 3 | * @author Martin Angelov 4 | * @version 1.0 5 | * @url http://tutorialzine.com/2011/12/countdown-jquery/ 6 | * @license MIT License 7 | */ 8 | 9 | (function($){ 10 | 11 | // Number of seconds in every time division 12 | var days = 24*60*60, 13 | hours = 60*60, 14 | minutes = 60; 15 | 16 | // Creating the plugin 17 | $.fn.countdown = function(prop){ 18 | 19 | var options = $.extend({ 20 | callback : function(){}, 21 | timestamp : 0 22 | },prop); 23 | 24 | var left, d, h, m, s, positions; 25 | 26 | // Initialize the plugin 27 | init(this, options); 28 | 29 | positions = this.find('.position'); 30 | 31 | (function tick(){ 32 | 33 | // Time left 34 | left = Math.floor((options.timestamp - (new Date())) / 1000); 35 | 36 | if(left < 0){ 37 | left = 0; 38 | } 39 | 40 | // Number of days left 41 | d = Math.floor(left / days); 42 | updateDuo(0, 1, d); 43 | left -= d*days; 44 | 45 | // Number of hours left 46 | h = Math.floor(left / hours); 47 | updateDuo(2, 3, h); 48 | left -= h*hours; 49 | 50 | // Number of minutes left 51 | m = Math.floor(left / minutes); 52 | updateDuo(4, 5, m); 53 | left -= m*minutes; 54 | 55 | // Number of seconds left 56 | s = left; 57 | updateDuo(6, 7, s); 58 | 59 | // Calling an optional user supplied callback 60 | options.callback(d, h, m, s); 61 | 62 | // Scheduling another call of this function in 1s 63 | setTimeout(tick, 1000); 64 | })(); 65 | 66 | // This function updates two digit positions at once 67 | function updateDuo(minor,major,value){ 68 | switchDigit(positions.eq(minor),Math.floor(value/10)%10); 69 | switchDigit(positions.eq(major),value%10); 70 | } 71 | 72 | return this; 73 | }; 74 | 75 | 76 | function init(elem, options){ 77 | elem.addClass('countdownHolder'); 78 | 79 | // Creating the markup inside the container 80 | $.each(['Days','Hours','Minutes','Seconds'],function(i){ 81 | $('').html( 82 | '\ 83 | 0\ 84 | \ 85 | \ 86 | 0\ 87 | ' 88 | ).appendTo(elem); 89 | 90 | if(this!="Seconds"){ 91 | elem.append(''); 92 | } 93 | }); 94 | 95 | } 96 | 97 | // Creates an animated transition between the two numbers 98 | function switchDigit(position,number){ 99 | 100 | var digit = position.find('.digit') 101 | 102 | if(digit.is(':animated')){ 103 | return false; 104 | } 105 | 106 | if(position.data('digit') == number){ 107 | // We are already showing this number 108 | return false; 109 | } 110 | 111 | position.data('digit', number); 112 | 113 | var replacement = $('',{ 114 | 'class':'digit', 115 | css:{ 116 | top:'-2.1em', 117 | opacity:0 118 | }, 119 | html:number 120 | }); 121 | 122 | // The .static class is added when the animation 123 | // completes. This makes it run smoother. 124 | 125 | digit 126 | .before(replacement) 127 | .removeClass('static') 128 | .animate({top:'2.5em',opacity:0},'fast',function(){ 129 | digit.remove(); 130 | }) 131 | 132 | replacement 133 | .delay(100) 134 | .animate({top:0,opacity:1},'fast',function(){ 135 | replacement.addClass('static'); 136 | }); 137 | } 138 | })(jQuery); -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | # jQuery Countdown 2 | 3 | A simple jQuery plugin for creating a countdown timer. Example: 4 | 5 | ```js 6 | $(function(){ 7 | 8 | var note = $('#note'), 9 | ts = new Date(2012, 0, 1), 10 | newYear = true; 11 | 12 | if((new Date()) > ts){ 13 | // The new year is here! Count towards something else. 14 | // Notice the *1000 at the end - time must be in milliseconds 15 | ts = (new Date()).getTime() + 10*24*60*60*1000; 16 | newYear = false; 17 | } 18 | 19 | $('#countdown').countdown({ 20 | timestamp : ts, 21 | callback : function(days, hours, minutes, seconds){ 22 | 23 | var message = ""; 24 | 25 | message += days + " day" + ( days==1 ? '':'s' ) + ", "; 26 | message += hours + " hour" + ( hours==1 ? '':'s' ) + ", "; 27 | message += minutes + " minute" + ( minutes==1 ? '':'s' ) + " and "; 28 | message += seconds + " second" + ( seconds==1 ? '':'s' ) + "
"; 29 | 30 | if(newYear){ 31 | message += "left until the new year!"; 32 | } 33 | else { 34 | message += "left to 10 days from now!"; 35 | } 36 | 37 | note.html(message); 38 | } 39 | }); 40 | 41 | }); 42 | ``` 43 | For more examples go to the plugin homepage on [Tutorialzine](http://tutorialzine.com/2011/12/countdown-jquery/). 44 | --------------------------------------------------------------------------------