From 719e738d23c694f89370b8c934657047b736e89c Mon Sep 17 00:00:00 2001 From: Lito Date: Wed, 26 Dec 2012 16:58:47 +0100 Subject: [PATCH 01/21] Added continuously countdown and fixed non stop at end --- README.md | 12 +++++++++ js/jquery.countdown.js | 51 ++++++++++++++++++++++++-------------- js/jquery.countdown.min.js | 7 ++++-- 3 files changed, 49 insertions(+), 21 deletions(-) diff --git a/README.md b/README.md index 6671be2..5f7edd8 100644 --- a/README.md +++ b/README.md @@ -23,6 +23,18 @@ This project is still at beta stage, and probably it will remain that way :(. No }); ``` +### Added continuously countdown + +```javascript + $('#counter').countdown({ + format: 'sss', + startTime: "120", + continuous: true, + timerEnd: function() { alert('end!!'); }, + image: "digits.png" + }); +``` + Did I mention that js code weighs just **1.7 KB**? ### Author diff --git a/js/jquery.countdown.js b/js/jquery.countdown.js index df916a6..a6ee4eb 100644 --- a/js/jquery.countdown.js +++ b/js/jquery.countdown.js @@ -4,6 +4,9 @@ * Copyright (c) 2009 Martin Conte Mac Donell * Dual licensed under the MIT and GPL licenses. * http://docs.jquery.com/License + * + * Forked by Lito in Github + * https://github.com/eusonlito/jquery-countdown */ jQuery.fn.countdown = function(userOptions) @@ -19,7 +22,8 @@ jQuery.fn.countdown = function(userOptions) digitWidth: 67, digitHeight: 90, timerEnd: function(){}, - image: "digits.png" + image: "digits.png", + continuous: false }; var digits = [], intervals = []; @@ -45,26 +49,34 @@ jQuery.fn.countdown = function(userOptions) margin(c, -elem.current * options.digitHeight * options.digitImages); - // Add max digits, for example, first digit of minutes (mm) has - // a max of 5. Conditional max is used when the left digit has reach - // the max. For example second "hours" digit has a conditional max of 4 - switch (options.format[i]) + if (options.continuous === true) + { + digits[c]._max = function(){ return 9; }; + } + else { - case 'h': - digits[c]._max = function(pos, isStart) { - if (pos % 2 == 0) - return 2; - else - return (isStart) ? 3: 9; - }; - break; - case 'd': - digits[c]._max = function(){ return 9; }; - break; - case 'm': - case 's': - digits[c]._max = function(pos){ return (pos % 2 == 0) ? 5: 9; }; + // Add max digits, for example, first digit of minutes (mm) has + // a max of 5. Conditional max is used when the left digit has reach + // the max. For example second "hours" digit has a conditional max of 4 + switch (options.format[i]) + { + case 'h': + digits[c]._max = function(pos, isStart) { + if (pos % 2 == 0) + return 2; + else + return (isStart) ? 3: 9; + }; + break; + case 'd': + digits[c]._max = function(){ return 9; }; + break; + case 'm': + case 's': + digits[c]._max = function(pos){ return (pos % 2 == 0) ? 5: 9; }; + } } + ++c; } else @@ -134,6 +146,7 @@ jQuery.fn.countdown = function(userOptions) for (var i = 0; i < digits.length; i++) { clearInterval(intervals[i]); + clearInterval(intervals.main); margin(i, 0); } options.timerEnd(); diff --git a/js/jquery.countdown.min.js b/js/jquery.countdown.min.js index 928f7de..25f8e70 100644 --- a/js/jquery.countdown.min.js +++ b/js/jquery.countdown.min.js @@ -1,8 +1,11 @@ /* - * jquery-counter plugin + * jquery-countdown plugin * * Copyright (c) 2009 Martin Conte Mac Donell * Dual licensed under the MIT and GPL licenses. * http://docs.jquery.com/License + * + * Forked by Lito in Github + * https://github.com/eusonlito/jquery-countdown */ -jQuery.fn.countdown=function(a){var b={stepTime:60,format:"dd:hh:mm:ss",startTime:"01:12:32:55",digitImages:6,digitWidth:67,digitHeight:90,timerEnd:function(){},image:"digits.png"};var c=[],d=[];var e=function(a){var d=0;for(var e=0;e=0){elem=$('
').css({height:b.digitHeight,"float":"left",background:"url('"+b.image+"')",width:b.digitWidth});elem.current=parseInt(b.startTime[e]);c.push(elem);f(d,-elem.current*b.digitHeight*b.digitImages);switch(b.format[e]){case"h":c[d]._max=function(a,b){if(a%2==0)return 2;else return b?3:9};break;case"d":c[d]._max=function(){return 9};break;case"m":case"s":c[d]._max=function(a){return a%2==0?5:9}}++d}else{elem=$('
').css({"float":"left"}).text(b.startTime[e])}a.append(elem)}};var f=function(a,b){if(b!==undefined){c[a].margin=b;return c[a].css({backgroundPosition:"0 "+b+"px"})}return c[a].margin||0};var g=function(a,e,g){if(d[a])window.clearInterval(d[a]);var h=-(b.digitHeight*b.digitImages*c[a].current);f(a,h);c[a].current=c[a].current+(g?e:-e);var i=0;d[a]=setInterval(function(){if(i++===b.digitImages*e){window.clearInterval(d[a]);delete d[a];return}var c=g?-b.digitHeight:b.digitHeight;f(a,h+i*c)},b.stepTime/e)};var h=function(a){if(c[a].current==0){if(a>0){var e=c[a-1].current==0;g(a,c[a]._max(a,e),true);h(a-1)}else{for(var i=0;i=0){elem=$('
').css({height:options.digitHeight,float:'left',background:'url(\''+options.image+'\')',width:options.digitWidth});elem.current=parseInt(options.startTime[i]);digits.push(elem);margin(c,-elem.current*options.digitHeight*options.digitImages);if(options.continuous===true){digits[c]._max=function(){return 9}}else{switch(options.format[i]){case'h':digits[c]._max=function(pos,isStart){if(pos%2==0)return 2;else return(isStart)?3:9};break;case'd':digits[c]._max=function(){return 9};break;case'm':case's':digits[c]._max=function(pos){return(pos%2==0)?5:9}}}++c}else{elem=$('
').css({float:'left'}).text(options.startTime[i])}where.append(elem)}};var margin=function(elem,val){if(val!==undefined){digits[elem].margin=val;return digits[elem].css({'backgroundPosition':'0 '+val+'px'})}return digits[elem].margin||0};var makeMovement=function(elem,steps,isForward){if(intervals[elem])window.clearInterval(intervals[elem]);var initialPos=-(options.digitHeight*options.digitImages*digits[elem].current);margin(elem,initialPos);digits[elem].current=digits[elem].current+((isForward)?steps:-steps);var x=0;intervals[elem]=setInterval(function(){if(x++===options.digitImages*steps){window.clearInterval(intervals[elem]);delete intervals[elem];return}var diff=isForward?-options.digitHeight:options.digitHeight;margin(elem,initialPos+(x*diff))},options.stepTime/steps)};var moveDigit=function(elem){if(digits[elem].current==0){if(elem>0){var isStart=(digits[elem-1].current==0);makeMovement(elem,digits[elem]._max(elem,isStart),true);moveDigit(elem-1)}else{for(var i=0;i Date: Sat, 18 May 2013 19:31:25 -0600 Subject: [PATCH 02/21] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 5f7edd8..8b30e80 100644 --- a/README.md +++ b/README.md @@ -39,7 +39,7 @@ Did I mention that js code weighs just **1.7 KB**? ### Author -Martín Conte Mac Donell - [@Reflejo](https://twitter.com/reflejo) +Martín Conte Mac Donell - [@fz](https://twitter.com/fz) ### Demo From b8ee1ba3f0af3b4967e9e5f7f1b03c800e6e06ba Mon Sep 17 00:00:00 2001 From: Matt Neary Date: Tue, 16 Jul 2013 04:21:56 -0400 Subject: [PATCH 03/21] endTime --- README.md | 23 ++++++++++++++ index.html | 4 +-- js/jquery.countdown.js | 65 +++++++++++++++++++++++++++++++++++++- js/jquery.countdown.min.js | 2 +- 4 files changed, 90 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index 8b30e80..90f3dcd 100644 --- a/README.md +++ b/README.md @@ -35,6 +35,29 @@ This project is still at beta stage, and probably it will remain that way :(. No }); ``` +###Countdown to a Date + +Relative to current hour: + +```javascript + $('#counter').countdown({ + image: "digits.png", + format: "mm:ss", + endTime: '50:00' + }); +``` + +An absolute date: + + +```javascript + $('#counter').countdown({ + image: "digits.png", + format: "mm:ss", + endTime: new Date('07/16/13 05:00:00') + }); +``` + Did I mention that js code weighs just **1.7 KB**? ### Author diff --git a/index.html b/index.html index 11edf18..fa471de 100644 --- a/index.html +++ b/index.html @@ -1,4 +1,4 @@ - + jquery-countdown plugin test @@ -10,7 +10,7 @@ $(".digits").countdown({ image: "img/digits.png", format: "mm:ss", - startTime: "25:14" + endTime: "50:00" }); }); diff --git a/js/jquery.countdown.js b/js/jquery.countdown.js index a6ee4eb..96eb670 100644 --- a/js/jquery.countdown.js +++ b/js/jquery.countdown.js @@ -157,7 +157,70 @@ jQuery.fn.countdown = function(userOptions) makeMovement(elem, 1); }; - + + // add leading zeros + var pad = function(x){return (1e15+""+x).substr(-2)}; + + // convert a date object to the format specified + var formatCompute = function(d) { + var format = userOptions.format||options.format; + var parse = { + d: d.getDate(), + h: d.getHours(), + m: d.getMinutes(), + s: d.getSeconds() + }; + return format.replace(/(dd|hh|mm|ss)/g, function($0, form) { + return pad(parse[form[0]]); + }); + }; + + // parses a date of the form hh:mm:ss, for example, where + // ... precision is the same as the format. + var parseRelativeDate = function(form) { + // give the date the values of now by default + var now = new Date(); + var d = now.getDate(); + var m = now.getMonth() + 1; + var y = now.getFullYear(); + var h = now.getHours(), mm, s; + + // read in components and render based on format + var format = userOptions.format||options.format; + var parts = form.split(':'); + if( format.indexOf('dd') == 0 ) { + d = parts[0]; + parts = parts.slice(1); + format = format.substr(3); + } + if( format.indexOf('hh') == 0 ) { + h = parts[0]; + parts = parts.slice(1); + format = format.substr(3); + } + if( format.indexOf('mm') == 0 ) { + mm = parts[0]; + parts = parts.slice(1); + format = format.substr(3); + } + if( format.indexOf('ss') == 0 ) { + s = parts[0]; + parts = parts.slice(1); + format = format.substr(3); + } + // return our constructed date object + return new Date([m, d, y].join('/') + ' ' + [h, mm, s].map(pad).join(':')); + }; + + // if an endTime is provided... + if( userOptions.endTime ) { + // calculate the difference between endTime and present time + var endDate = userOptions.endTime instanceof Date ? userOptions.endTime : parseRelativeDate(userOptions.endTime); + var diff = endDate.getTime() - (new Date()).getTime(); + // and set that as the startTime + userOptions.startTime = formatCompute(new Date(diff)); + delete userOptions.endTime; + } $.extend(options, userOptions); createDigits(this); intervals.main = setInterval(function(){ moveDigit(digits.length - 1); }, diff --git a/js/jquery.countdown.min.js b/js/jquery.countdown.min.js index 25f8e70..0433ea5 100644 --- a/js/jquery.countdown.min.js +++ b/js/jquery.countdown.min.js @@ -8,4 +8,4 @@ * Forked by Lito in Github * https://github.com/eusonlito/jquery-countdown */ -jQuery.fn.countdown=function(userOptions){var options={stepTime:60,format:"dd:hh:mm:ss",startTime:"01:12:32:55",digitImages:6,digitWidth:67,digitHeight:90,timerEnd:function(){},image:"digits.png",continuous:false};var digits=[],intervals=[];var createDigits=function(where){var c=0;for(var i=0;i=0){elem=$('
').css({height:options.digitHeight,float:'left',background:'url(\''+options.image+'\')',width:options.digitWidth});elem.current=parseInt(options.startTime[i]);digits.push(elem);margin(c,-elem.current*options.digitHeight*options.digitImages);if(options.continuous===true){digits[c]._max=function(){return 9}}else{switch(options.format[i]){case'h':digits[c]._max=function(pos,isStart){if(pos%2==0)return 2;else return(isStart)?3:9};break;case'd':digits[c]._max=function(){return 9};break;case'm':case's':digits[c]._max=function(pos){return(pos%2==0)?5:9}}}++c}else{elem=$('
').css({float:'left'}).text(options.startTime[i])}where.append(elem)}};var margin=function(elem,val){if(val!==undefined){digits[elem].margin=val;return digits[elem].css({'backgroundPosition':'0 '+val+'px'})}return digits[elem].margin||0};var makeMovement=function(elem,steps,isForward){if(intervals[elem])window.clearInterval(intervals[elem]);var initialPos=-(options.digitHeight*options.digitImages*digits[elem].current);margin(elem,initialPos);digits[elem].current=digits[elem].current+((isForward)?steps:-steps);var x=0;intervals[elem]=setInterval(function(){if(x++===options.digitImages*steps){window.clearInterval(intervals[elem]);delete intervals[elem];return}var diff=isForward?-options.digitHeight:options.digitHeight;margin(elem,initialPos+(x*diff))},options.stepTime/steps)};var moveDigit=function(elem){if(digits[elem].current==0){if(elem>0){var isStart=(digits[elem-1].current==0);makeMovement(elem,digits[elem]._max(elem,isStart),true);moveDigit(elem-1)}else{for(var i=0;i=0){if(elem=$('
').css({height:b.digitHeight,"float":"left",background:"url('"+b.image+"')",width:b.digitWidth}),elem.current=parseInt(b.startTime[e]),c.push(elem),f(d,-elem.current*b.digitHeight*b.digitImages),b.continuous===!0)c[d]._max=function(){return 9};else switch(b.format[e]){case"h":c[d]._max=function(a,b){return 0==a%2?2:b?3:9};break;case"d":c[d]._max=function(){return 9};break;case"m":case"s":c[d]._max=function(a){return 0==a%2?5:9}}++d}else elem=$('
').css({"float":"left"}).text(b.startTime[e]);a.append(elem)}},f=function(a,b){return void 0!==b?(c[a].margin=b,c[a].css({backgroundPosition:"0 "+b+"px"})):c[a].margin||0},g=function(a,e,g){d[a]&&window.clearInterval(d[a]);var h=-(b.digitHeight*b.digitImages*c[a].current);f(a,h),c[a].current=c[a].current+(g?e:-e);var i=0;d[a]=setInterval(function(){if(i++===b.digitImages*e)return window.clearInterval(d[a]),delete d[a],void 0;var c=g?-b.digitHeight:b.digitHeight;f(a,h+i*c)},b.stepTime/e)},h=function(a){if(0!=c[a].current)g(a,1);else if(a>0){var e=0==c[a-1].current;g(a,c[a]._max(a,e),!0),h(a-1)}else{for(var i=0;i Date: Tue, 16 Jul 2013 04:37:00 -0400 Subject: [PATCH 04/21] hour handling corrected with timezoning --- css/media.css | 2 +- index.html | 4 ++-- js/jquery.countdown.js | 2 +- js/jquery.countdown.min.js | 2 +- 4 files changed, 5 insertions(+), 5 deletions(-) diff --git a/css/media.css b/css/media.css index 8d52b74..545acaa 100644 --- a/css/media.css +++ b/css/media.css @@ -16,7 +16,7 @@ html, body, .wrapper { #holder { background: url(../img/time-placeholder.png) no-repeat; - width: 383px; + width: 503px; height: 383px; margin: auto; } diff --git a/index.html b/index.html index fa471de..7b80628 100644 --- a/index.html +++ b/index.html @@ -9,8 +9,8 @@ $(function(){ $(".digits").countdown({ image: "img/digits.png", - format: "mm:ss", - endTime: "50:00" + format: "hh:mm:ss", + endTime: '04:50:00' }); }); diff --git a/js/jquery.countdown.js b/js/jquery.countdown.js index 96eb670..1fafda6 100644 --- a/js/jquery.countdown.js +++ b/js/jquery.countdown.js @@ -209,7 +209,7 @@ jQuery.fn.countdown = function(userOptions) format = format.substr(3); } // return our constructed date object - return new Date([m, d, y].join('/') + ' ' + [h, mm, s].map(pad).join(':')); + return new Date([m, d, y].join('/') + ' ' + [h, mm, s].map(pad).join(':') + ' GMT-0900'); }; // if an endTime is provided... diff --git a/js/jquery.countdown.min.js b/js/jquery.countdown.min.js index 0433ea5..350b40e 100644 --- a/js/jquery.countdown.min.js +++ b/js/jquery.countdown.min.js @@ -8,4 +8,4 @@ * Forked by Lito in Github * https://github.com/eusonlito/jquery-countdown */ -jQuery.fn.countdown=function(a){var b={stepTime:60,format:"dd:hh:mm:ss",startTime:"01:12:32:55",digitImages:6,digitWidth:67,digitHeight:90,timerEnd:function(){},image:"digits.png",continuous:!1},c=[],d=[],e=function(a){for(var d=0,e=0;e=0){if(elem=$('
').css({height:b.digitHeight,"float":"left",background:"url('"+b.image+"')",width:b.digitWidth}),elem.current=parseInt(b.startTime[e]),c.push(elem),f(d,-elem.current*b.digitHeight*b.digitImages),b.continuous===!0)c[d]._max=function(){return 9};else switch(b.format[e]){case"h":c[d]._max=function(a,b){return 0==a%2?2:b?3:9};break;case"d":c[d]._max=function(){return 9};break;case"m":case"s":c[d]._max=function(a){return 0==a%2?5:9}}++d}else elem=$('
').css({"float":"left"}).text(b.startTime[e]);a.append(elem)}},f=function(a,b){return void 0!==b?(c[a].margin=b,c[a].css({backgroundPosition:"0 "+b+"px"})):c[a].margin||0},g=function(a,e,g){d[a]&&window.clearInterval(d[a]);var h=-(b.digitHeight*b.digitImages*c[a].current);f(a,h),c[a].current=c[a].current+(g?e:-e);var i=0;d[a]=setInterval(function(){if(i++===b.digitImages*e)return window.clearInterval(d[a]),delete d[a],void 0;var c=g?-b.digitHeight:b.digitHeight;f(a,h+i*c)},b.stepTime/e)},h=function(a){if(0!=c[a].current)g(a,1);else if(a>0){var e=0==c[a-1].current;g(a,c[a]._max(a,e),!0),h(a-1)}else{for(var i=0;i=0){if(elem=$('
').css({height:b.digitHeight,"float":"left",background:"url('"+b.image+"')",width:b.digitWidth}),elem.current=parseInt(b.startTime[e]),c.push(elem),f(d,-elem.current*b.digitHeight*b.digitImages),b.continuous===!0)c[d]._max=function(){return 9};else switch(b.format[e]){case"h":c[d]._max=function(a,b){return 0==a%2?2:b?3:9};break;case"d":c[d]._max=function(){return 9};break;case"m":case"s":c[d]._max=function(a){return 0==a%2?5:9}}++d}else elem=$('
').css({"float":"left"}).text(b.startTime[e]);a.append(elem)}},f=function(a,b){return void 0!==b?(c[a].margin=b,c[a].css({backgroundPosition:"0 "+b+"px"})):c[a].margin||0},g=function(a,e,g){d[a]&&window.clearInterval(d[a]);var h=-(b.digitHeight*b.digitImages*c[a].current);f(a,h),c[a].current=c[a].current+(g?e:-e);var i=0;d[a]=setInterval(function(){if(i++===b.digitImages*e)return window.clearInterval(d[a]),delete d[a],void 0;var c=g?-b.digitHeight:b.digitHeight;f(a,h+i*c)},b.stepTime/e)},h=function(a){if(0!=c[a].current)g(a,1);else if(a>0){var e=0==c[a-1].current;g(a,c[a]._max(a,e),!0),h(a-1)}else{for(var i=0;i Date: Fri, 25 Oct 2013 00:20:24 -0400 Subject: [PATCH 05/21] removed slots because with three columns they don't match up --- css/media.css | 1 - 1 file changed, 1 deletion(-) diff --git a/css/media.css b/css/media.css index 545acaa..5249d2f 100644 --- a/css/media.css +++ b/css/media.css @@ -15,7 +15,6 @@ html, body, .wrapper { } #holder { - background: url(../img/time-placeholder.png) no-repeat; width: 503px; height: 383px; margin: auto; From 68ba9797f6695f03d915977c4ea21e08e32c30a2 Mon Sep 17 00:00:00 2001 From: Yuri Druzhkov Date: Thu, 31 Oct 2013 14:50:38 +0400 Subject: [PATCH 06/21] day non be zero --- js/jquery.countdown.js | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/js/jquery.countdown.js b/js/jquery.countdown.js index 1fafda6..7086ba6 100644 --- a/js/jquery.countdown.js +++ b/js/jquery.countdown.js @@ -58,7 +58,7 @@ jQuery.fn.countdown = function(userOptions) // Add max digits, for example, first digit of minutes (mm) has // a max of 5. Conditional max is used when the left digit has reach // the max. For example second "hours" digit has a conditional max of 4 - switch (options.format[i]) + switch (options.format[i]) { case 'h': digits[c]._max = function(pos, isStart) { @@ -157,15 +157,15 @@ jQuery.fn.countdown = function(userOptions) makeMovement(elem, 1); }; - + // add leading zeros var pad = function(x){return (1e15+""+x).substr(-2)}; - + // convert a date object to the format specified var formatCompute = function(d) { var format = userOptions.format||options.format; var parse = { - d: d.getDate(), + d: d.getDate() - 1, // date can not be zero h: d.getHours(), m: d.getMinutes(), s: d.getSeconds() @@ -174,7 +174,7 @@ jQuery.fn.countdown = function(userOptions) return pad(parse[form[0]]); }); }; - + // parses a date of the form hh:mm:ss, for example, where // ... precision is the same as the format. var parseRelativeDate = function(form) { @@ -184,7 +184,7 @@ jQuery.fn.countdown = function(userOptions) var m = now.getMonth() + 1; var y = now.getFullYear(); var h = now.getHours(), mm, s; - + // read in components and render based on format var format = userOptions.format||options.format; var parts = form.split(':'); @@ -211,9 +211,9 @@ jQuery.fn.countdown = function(userOptions) // return our constructed date object return new Date([m, d, y].join('/') + ' ' + [h, mm, s].map(pad).join(':') + ' GMT-0900'); }; - + // if an endTime is provided... - if( userOptions.endTime ) { + if( userOptions.endTime ) { // calculate the difference between endTime and present time var endDate = userOptions.endTime instanceof Date ? userOptions.endTime : parseRelativeDate(userOptions.endTime); var diff = endDate.getTime() - (new Date()).getTime(); From 678600b93067a7fcdb5be020c3bd17c7477042e2 Mon Sep 17 00:00:00 2001 From: Yuri Druzhkov Date: Thu, 31 Oct 2013 15:30:34 +0400 Subject: [PATCH 07/21] fixes UTC timestamp diff --- js/jquery.countdown.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/js/jquery.countdown.js b/js/jquery.countdown.js index 7086ba6..8ec99aa 100644 --- a/js/jquery.countdown.js +++ b/js/jquery.countdown.js @@ -165,10 +165,10 @@ jQuery.fn.countdown = function(userOptions) var formatCompute = function(d) { var format = userOptions.format||options.format; var parse = { - d: d.getDate() - 1, // date can not be zero - h: d.getHours(), - m: d.getMinutes(), - s: d.getSeconds() + d: d.getUTCDate() - 1, + h: d.getUTCHours(), + m: d.getUTCMinutes(), + s: d.getUTCSeconds() }; return format.replace(/(dd|hh|mm|ss)/g, function($0, form) { return pad(parse[form[0]]); From f3e6ca1b5b280c9a344640c7367538aaabf9501b Mon Sep 17 00:00:00 2001 From: Matt Neary Date: Sun, 1 Dec 2013 20:10:35 -0500 Subject: [PATCH 08/21] functions separated out to cut out complexity --- js/jquery.countdown.js | 360 +++++++++++++++++++++-------------------- 1 file changed, 182 insertions(+), 178 deletions(-) diff --git a/js/jquery.countdown.js b/js/jquery.countdown.js index 8ec99aa..ea970d4 100644 --- a/js/jquery.countdown.js +++ b/js/jquery.countdown.js @@ -5,211 +5,215 @@ * Dual licensed under the MIT and GPL licenses. * http://docs.jquery.com/License * - * Forked by Lito in Github - * https://github.com/eusonlito/jquery-countdown */ -jQuery.fn.countdown = function(userOptions) -{ - // Default options - var options = { - stepTime: 60, - // startTime and format MUST follow the same format. - // also you cannot specify a format unordered (e.g. hh:ss:mm is wrong) - format: "dd:hh:mm:ss", - startTime: "01:12:32:55", - digitImages: 6, - digitWidth: 67, - digitHeight: 90, - timerEnd: function(){}, - image: "digits.png", - continuous: false - }; - var digits = [], intervals = []; - // Draw digits in given container - var createDigits = function(where) +// Draw digits in given container +var createDigits = function(where, options) +{ + var c = 0; + // Iterate each startTime digit, if it is not a digit + // we'll asume that it's a separator + for (var i = 0; i < options.startTime.length; i++) { - var c = 0; - // Iterate each startTime digit, if it is not a digit - // we'll asume that it's a separator - for (var i = 0; i < options.startTime.length; i++) + if (parseInt(options.startTime[i]) >= 0) { - if (parseInt(options.startTime[i]) >= 0) + elem = $('
').css({ + height: options.digitHeight, + float: 'left', + background: 'url(\'' + options.image + '\')', + width: options.digitWidth + }); + + elem.current = parseInt(options.startTime[i]); + digits.push(elem); + + margin(c, -elem.current * options.digitHeight * options.digitImages); + + if (options.continuous === true) { - elem = $('
').css({ - height: options.digitHeight, - float: 'left', - background: 'url(\'' + options.image + '\')', - width: options.digitWidth - }); - - elem.current = parseInt(options.startTime[i]); - digits.push(elem); - - margin(c, -elem.current * options.digitHeight * options.digitImages); - - if (options.continuous === true) - { - digits[c]._max = function(){ return 9; }; - } - else - { - // Add max digits, for example, first digit of minutes (mm) has - // a max of 5. Conditional max is used when the left digit has reach - // the max. For example second "hours" digit has a conditional max of 4 - switch (options.format[i]) - { - case 'h': - digits[c]._max = function(pos, isStart) { - if (pos % 2 == 0) - return 2; - else - return (isStart) ? 3: 9; - }; - break; - case 'd': - digits[c]._max = function(){ return 9; }; - break; - case 'm': - case 's': - digits[c]._max = function(pos){ return (pos % 2 == 0) ? 5: 9; }; - } - } - - ++c; + digits[c]._max = function(){ return 9; }; } else { - elem = $('
').css({float: 'left'}) - .text(options.startTime[i]); + // Add max digits, for example, first digit of minutes (mm) has + // a max of 5. Conditional max is used when the left digit has reach + // the max. For example second "hours" digit has a conditional max of 4 + switch (options.format[i]) + { + case 'h': + digits[c]._max = function(pos, isStart) { + if (pos % 2 == 0) + return 2; + else + return (isStart) ? 3: 9; + }; + break; + case 'd': + digits[c]._max = function(){ return 9; }; + break; + case 'm': + case 's': + digits[c]._max = function(pos){ return (pos % 2 == 0) ? 5: 9; }; + } } - where.append(elem) + ++c; } - }; - - // Set or get element margin - var margin = function(elem, val) - { - if (val !== undefined) + else { - digits[elem].margin = val; - return digits[elem].css({'backgroundPosition': '0 ' + val + 'px'}); + elem = $('
').css({float: 'left'}) + .text(options.startTime[i]); } - return digits[elem].margin || 0; - }; + where.append(elem) + } +}; - var makeMovement = function(elem, steps, isForward) - { - // Stop any other movement over the same digit. - if (intervals[elem]) +var makeMovement = function(elem, steps, isForward, options) +{ + // Stop any other movement over the same digit. + if (intervals[elem]) + window.clearInterval(intervals[elem]); + + // Move to the initial position (We force that because in chrome + // there are some scenarios where digits lost sync) + var initialPos = -(options.digitHeight * options.digitImages * + digits[elem].current); + margin(elem, initialPos); + digits[elem].current = digits[elem].current + ((isForward) ? steps: -steps); + + var x = 0; + intervals[elem] = setInterval(function(){ + if (x++ === options.digitImages * steps) + { window.clearInterval(intervals[elem]); + delete intervals[elem]; + return; + } - // Move to the initial position (We force that because in chrome - // there are some scenarios where digits lost sync) - var initialPos = -(options.digitHeight * options.digitImages * - digits[elem].current); - margin(elem, initialPos); - digits[elem].current = digits[elem].current + ((isForward) ? steps: -steps); + var diff = isForward ? -options.digitHeight: options.digitHeight; + margin(elem, initialPos + (x * diff)); + }, options.stepTime / steps); +}; - var x = 0; - intervals[elem] = setInterval(function(){ - if (x++ === options.digitImages * steps) - { - window.clearInterval(intervals[elem]); - delete intervals[elem]; - return; - } +// Set or get element margin +var margin = function(elem, val) +{ + if (val !== undefined) + { + digits[elem].margin = val; + return digits[elem].css({'backgroundPosition': '0 ' + val + 'px'}); + } - var diff = isForward ? -options.digitHeight: options.digitHeight; - margin(elem, initialPos + (x * diff)); - }, options.stepTime / steps); - }; + return digits[elem].margin || 0; +}; - // Makes the movement. This is done by "digitImages" steps. - var moveDigit = function(elem) + +// Makes the movement. This is done by "digitImages" steps. +var moveDigit = function(elem, options) +{ + if (digits[elem].current == 0) { - if (digits[elem].current == 0) + // Is there still time left? + if (elem > 0) { - // Is there still time left? - if (elem > 0) - { - var isStart = (digits[elem - 1].current == 0); + var isStart = (digits[elem - 1].current == 0); - makeMovement(elem, digits[elem]._max(elem, isStart), true); - moveDigit(elem - 1); - } - else // That condition means that we reach the end! 00:00. + makeMovement(elem, digits[elem]._max(elem, isStart), true, options); + moveDigit(elem - 1, options); + } + else // That condition means that we reach the end! 00:00. + { + for (var i = 0; i < digits.length; i++) { - for (var i = 0; i < digits.length; i++) - { - clearInterval(intervals[i]); - clearInterval(intervals.main); - margin(i, 0); - } - options.timerEnd(); + clearInterval(intervals[i]); + clearInterval(intervals.main); + margin(i, 0); } - - return; + options.timerEnd(); } - makeMovement(elem, 1); - }; + return; + } - // add leading zeros - var pad = function(x){return (1e15+""+x).substr(-2)}; - - // convert a date object to the format specified - var formatCompute = function(d) { - var format = userOptions.format||options.format; - var parse = { - d: d.getUTCDate() - 1, - h: d.getUTCHours(), - m: d.getUTCMinutes(), - s: d.getUTCSeconds() - }; - return format.replace(/(dd|hh|mm|ss)/g, function($0, form) { - return pad(parse[form[0]]); - }); - }; + makeMovement(elem, 1, false, options); +}; - // parses a date of the form hh:mm:ss, for example, where - // ... precision is the same as the format. - var parseRelativeDate = function(form) { - // give the date the values of now by default - var now = new Date(); - var d = now.getDate(); - var m = now.getMonth() + 1; - var y = now.getFullYear(); - var h = now.getHours(), mm, s; - - // read in components and render based on format - var format = userOptions.format||options.format; - var parts = form.split(':'); - if( format.indexOf('dd') == 0 ) { - d = parts[0]; - parts = parts.slice(1); - format = format.substr(3); - } - if( format.indexOf('hh') == 0 ) { - h = parts[0]; - parts = parts.slice(1); - format = format.substr(3); - } - if( format.indexOf('mm') == 0 ) { - mm = parts[0]; - parts = parts.slice(1); - format = format.substr(3); - } - if( format.indexOf('ss') == 0 ) { - s = parts[0]; - parts = parts.slice(1); - format = format.substr(3); - } - // return our constructed date object - return new Date([m, d, y].join('/') + ' ' + [h, mm, s].map(pad).join(':') + ' GMT-0900'); + + +// parses a date of the form hh:mm:ss, for example, where +// ... precision is the same as the format. +var parseRelativeDate = function(form) { + // give the date the values of now by default + var now = new Date(); + var d = now.getDate(); + var m = now.getMonth() + 1; + var y = now.getFullYear(); + var h = now.getHours(), mm, s; + + // read in components and render based on format + var format = userOptions.format||options.format; + var parts = form.split(':'); + if( format.indexOf('dd') == 0 ) { + d = parts[0]; + parts = parts.slice(1); + format = format.substr(3); + } + if( format.indexOf('hh') == 0 ) { + h = parts[0]; + parts = parts.slice(1); + format = format.substr(3); + } + if( format.indexOf('mm') == 0 ) { + mm = parts[0]; + parts = parts.slice(1); + format = format.substr(3); + } + if( format.indexOf('ss') == 0 ) { + s = parts[0]; + parts = parts.slice(1); + format = format.substr(3); + } + // return our constructed date object + return new Date([m, d, y].join('/') + ' ' + [h, mm, s].map(pad).join(':') + ' GMT-0900'); +}; + + +// convert a date object to the format specified +var formatCompute = function(d, options) { + var format = options.format; + var parse = { + d: d.getUTCDate() - 1, + h: d.getUTCHours(), + m: d.getUTCMinutes(), + s: d.getUTCSeconds() + }; + return format.replace(/(dd|hh|mm|ss)/g, function($0, form) { + return pad(parse[form[0]]); + }); +}; + +// add leading zeros +var pad = function(x){return (1e15+""+x).substr(-2)}; + +var digits = []; +var intervals = []; +jQuery.fn.countdown = function(userOptions) +{ + // Default options + var options = { + stepTime: 60, + // startTime and format MUST follow the same format. + // also you cannot specify a format unordered (e.g. hh:ss:mm is wrong) + format: "dd:hh:mm:ss", + startTime: "01:12:32:55", + digitImages: 6, + digitWidth: 67, + digitHeight: 90, + timerEnd: function(){}, + image: "digits.png", + continuous: false }; // if an endTime is provided... @@ -218,11 +222,11 @@ jQuery.fn.countdown = function(userOptions) var endDate = userOptions.endTime instanceof Date ? userOptions.endTime : parseRelativeDate(userOptions.endTime); var diff = endDate.getTime() - (new Date()).getTime(); // and set that as the startTime - userOptions.startTime = formatCompute(new Date(diff)); + userOptions.startTime = formatCompute(new Date(diff), options); delete userOptions.endTime; } $.extend(options, userOptions); - createDigits(this); - intervals.main = setInterval(function(){ moveDigit(digits.length - 1); }, + createDigits(this, options); + intervals.main = setInterval(function(){ moveDigit(digits.length - 1, options); }, 1000); }; From 446f5dded25ac2ad2701a39cdeae9651d1a67c80 Mon Sep 17 00:00:00 2001 From: Matt Neary Date: Sun, 1 Dec 2013 20:38:28 -0500 Subject: [PATCH 09/21] correct digit maximum tracking, some stylistic changes --- js/jquery.countdown.js | 84 ++++++++++++++++++------------------------ 1 file changed, 35 insertions(+), 49 deletions(-) diff --git a/js/jquery.countdown.js b/js/jquery.countdown.js index ea970d4..b68a031 100644 --- a/js/jquery.countdown.js +++ b/js/jquery.countdown.js @@ -9,16 +9,14 @@ // Draw digits in given container -var createDigits = function(where, options) -{ - var c = 0; +var createDigits = function(where, options) { + var counter = 0; // Iterate each startTime digit, if it is not a digit // we'll asume that it's a separator - for (var i = 0; i < options.startTime.length; i++) - { - if (parseInt(options.startTime[i]) >= 0) - { - elem = $('
').css({ + var mFirstPos, sFirstPos; + for (var i = 0; i < options.startTime.length; i++) { + if (parseInt(options.startTime[i]) >= 0) { + elem = $('
').css({ height: options.digitHeight, float: 'left', background: 'url(\'' + options.image + '\')', @@ -28,21 +26,17 @@ var createDigits = function(where, options) elem.current = parseInt(options.startTime[i]); digits.push(elem); - margin(c, -elem.current * options.digitHeight * options.digitImages); + margin(counter, -elem.current * options.digitHeight * options.digitImages); - if (options.continuous === true) - { - digits[c]._max = function(){ return 9; }; - } - else - { + if (options.continuous === true) { + digits[counter]._max = function() { return 9; }; + } else { // Add max digits, for example, first digit of minutes (mm) has // a max of 5. Conditional max is used when the left digit has reach // the max. For example second "hours" digit has a conditional max of 4 - switch (options.format[i]) - { + switch (options.format[i]) { case 'h': - digits[c]._max = function(pos, isStart) { + digits[counter]._max = function(pos, isStart) { if (pos % 2 == 0) return 2; else @@ -50,28 +44,32 @@ var createDigits = function(where, options) }; break; case 'd': - digits[c]._max = function(){ return 9; }; + digits[counter]._max = function() { return 9; }; break; case 'm': + digits[counter]._max = function(pos) { + if(!mFirstPos) { mFirstPos = pos; } + return pos == mFirstPos ? 9 : 5; + }; + break; case 's': - digits[c]._max = function(pos){ return (pos % 2 == 0) ? 5: 9; }; + digits[counter]._max = function(pos) { + if(!sFirstPos) { sFirstPos = pos; } + return pos == sFirstPos ? 9 : 5; + }; } } - ++c; - } - else - { + counter += 1; + } else { elem = $('
').css({float: 'left'}) .text(options.startTime[i]); } - where.append(elem) } }; -var makeMovement = function(elem, steps, isForward, options) -{ +var makeMovement = function(elem, steps, isForward, options) { // Stop any other movement over the same digit. if (intervals[elem]) window.clearInterval(intervals[elem]); @@ -84,9 +82,8 @@ var makeMovement = function(elem, steps, isForward, options) digits[elem].current = digits[elem].current + ((isForward) ? steps: -steps); var x = 0; - intervals[elem] = setInterval(function(){ - if (x++ === options.digitImages * steps) - { + intervals[elem] = setInterval(function() { + if (x++ === options.digitImages * steps) { window.clearInterval(intervals[elem]); delete intervals[elem]; return; @@ -98,10 +95,8 @@ var makeMovement = function(elem, steps, isForward, options) }; // Set or get element margin -var margin = function(elem, val) -{ - if (val !== undefined) - { +var margin = function(elem, val) { + if (val !== undefined) { digits[elem].margin = val; return digits[elem].css({'backgroundPosition': '0 ' + val + 'px'}); } @@ -111,32 +106,24 @@ var margin = function(elem, val) // Makes the movement. This is done by "digitImages" steps. -var moveDigit = function(elem, options) -{ - if (digits[elem].current == 0) - { +var moveDigit = function(elem, options) { + if (digits[elem].current == 0) { // Is there still time left? - if (elem > 0) - { + if (elem > 0) { var isStart = (digits[elem - 1].current == 0); makeMovement(elem, digits[elem]._max(elem, isStart), true, options); moveDigit(elem - 1, options); - } - else // That condition means that we reach the end! 00:00. - { - for (var i = 0; i < digits.length; i++) - { + } else { // That condition means that we reach the end! 00:00. + for (var i = 0; i < digits.length; i++) { clearInterval(intervals[i]); clearInterval(intervals.main); margin(i, 0); } options.timerEnd(); } - return; } - makeMovement(elem, 1, false, options); }; @@ -199,8 +186,7 @@ var pad = function(x){return (1e15+""+x).substr(-2)}; var digits = []; var intervals = []; -jQuery.fn.countdown = function(userOptions) -{ +jQuery.fn.countdown = function(userOptions) { // Default options var options = { stepTime: 60, From 654c7fe5d0a09a23aad3dbffd20a824b29f3983b Mon Sep 17 00:00:00 2001 From: Matt Neary Date: Sun, 1 Dec 2013 20:48:04 -0500 Subject: [PATCH 10/21] day example --- css/media.css | 2 +- index.html | 4 ++-- js/jquery.countdown.js | 6 +++--- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/css/media.css b/css/media.css index 5249d2f..8495c53 100644 --- a/css/media.css +++ b/css/media.css @@ -15,7 +15,7 @@ html, body, .wrapper { } #holder { - width: 503px; + width: 603px; height: 383px; margin: auto; } diff --git a/index.html b/index.html index 7b80628..5da8d41 100644 --- a/index.html +++ b/index.html @@ -9,8 +9,8 @@ $(function(){ $(".digits").countdown({ image: "img/digits.png", - format: "hh:mm:ss", - endTime: '04:50:00' + format: "dd:hh:mm:ss", + endTime: new Date(2013, 12, 25) }); }); diff --git a/js/jquery.countdown.js b/js/jquery.countdown.js index b68a031..94a6747 100644 --- a/js/jquery.countdown.js +++ b/js/jquery.countdown.js @@ -131,7 +131,7 @@ var moveDigit = function(elem, options) { // parses a date of the form hh:mm:ss, for example, where // ... precision is the same as the format. -var parseRelativeDate = function(form) { +var parseRelativeDate = function(form, options) { // give the date the values of now by default var now = new Date(); var d = now.getDate(); @@ -140,7 +140,7 @@ var parseRelativeDate = function(form) { var h = now.getHours(), mm, s; // read in components and render based on format - var format = userOptions.format||options.format; + var format = options.format; var parts = form.split(':'); if( format.indexOf('dd') == 0 ) { d = parts[0]; @@ -205,7 +205,7 @@ jQuery.fn.countdown = function(userOptions) { // if an endTime is provided... if( userOptions.endTime ) { // calculate the difference between endTime and present time - var endDate = userOptions.endTime instanceof Date ? userOptions.endTime : parseRelativeDate(userOptions.endTime); + var endDate = userOptions.endTime instanceof Date ? userOptions.endTime : parseRelativeDate(userOptions.endTime, options); var diff = endDate.getTime() - (new Date()).getTime(); // and set that as the startTime userOptions.startTime = formatCompute(new Date(diff), options); From ef86b69a6d6157cf660a34ff45f62c6df1a64d4d Mon Sep 17 00:00:00 2001 From: Matt Neary Date: Sun, 1 Dec 2013 21:03:46 -0500 Subject: [PATCH 11/21] user format utilized in endTime computation, some whitespace adjustments --- index.html | 2 +- js/jquery.countdown.js | 15 ++++++++------- 2 files changed, 9 insertions(+), 8 deletions(-) diff --git a/index.html b/index.html index 5da8d41..1742180 100644 --- a/index.html +++ b/index.html @@ -10,7 +10,7 @@ $(".digits").countdown({ image: "img/digits.png", format: "dd:hh:mm:ss", - endTime: new Date(2013, 12, 25) + endTime: new Date(2013, 12, 2) }); }); diff --git a/js/jquery.countdown.js b/js/jquery.countdown.js index 94a6747..1bd80a3 100644 --- a/js/jquery.countdown.js +++ b/js/jquery.countdown.js @@ -133,11 +133,11 @@ var moveDigit = function(elem, options) { // ... precision is the same as the format. var parseRelativeDate = function(form, options) { // give the date the values of now by default - var now = new Date(); - var d = now.getDate(); - var m = now.getMonth() + 1; - var y = now.getFullYear(); - var h = now.getHours(), mm, s; + var now = new Date(); + var d = now.getDate(); + var m = now.getMonth() + 1; + var y = now.getFullYear(); + var h = now.getHours(), mm, s; // read in components and render based on format var format = options.format; @@ -201,15 +201,16 @@ jQuery.fn.countdown = function(userOptions) { image: "digits.png", continuous: false }; + $.extend(options, userOptions); // if an endTime is provided... if( userOptions.endTime ) { // calculate the difference between endTime and present time var endDate = userOptions.endTime instanceof Date ? userOptions.endTime : parseRelativeDate(userOptions.endTime, options); - var diff = endDate.getTime() - (new Date()).getTime(); + var diff = endDate.getTime() - (new Date()).getTime(); // and set that as the startTime userOptions.startTime = formatCompute(new Date(diff), options); - delete userOptions.endTime; + delete userOptions.endTime; } $.extend(options, userOptions); createDigits(this, options); From 652888a9358fdcb651580dcc333c796a2751fd19 Mon Sep 17 00:00:00 2001 From: Matt Neary Date: Sun, 1 Dec 2013 21:29:06 -0500 Subject: [PATCH 12/21] minified version updated --- js/jquery.countdown.js | 1 - js/jquery.countdown.min.js | 12 +----------- 2 files changed, 1 insertion(+), 12 deletions(-) diff --git a/js/jquery.countdown.js b/js/jquery.countdown.js index 1bd80a3..295c5ea 100644 --- a/js/jquery.countdown.js +++ b/js/jquery.countdown.js @@ -7,7 +7,6 @@ * */ - // Draw digits in given container var createDigits = function(where, options) { var counter = 0; diff --git a/js/jquery.countdown.min.js b/js/jquery.countdown.min.js index 350b40e..acad382 100644 --- a/js/jquery.countdown.min.js +++ b/js/jquery.countdown.min.js @@ -1,11 +1 @@ -/* - * jquery-countdown plugin - * - * Copyright (c) 2009 Martin Conte Mac Donell - * Dual licensed under the MIT and GPL licenses. - * http://docs.jquery.com/License - * - * Forked by Lito in Github - * https://github.com/eusonlito/jquery-countdown - */ -jQuery.fn.countdown=function(a){var b={stepTime:60,format:"dd:hh:mm:ss",startTime:"01:12:32:55",digitImages:6,digitWidth:67,digitHeight:90,timerEnd:function(){},image:"digits.png",continuous:!1},c=[],d=[],e=function(a){for(var d=0,e=0;e=0){if(elem=$('
').css({height:b.digitHeight,"float":"left",background:"url('"+b.image+"')",width:b.digitWidth}),elem.current=parseInt(b.startTime[e]),c.push(elem),f(d,-elem.current*b.digitHeight*b.digitImages),b.continuous===!0)c[d]._max=function(){return 9};else switch(b.format[e]){case"h":c[d]._max=function(a,b){return 0==a%2?2:b?3:9};break;case"d":c[d]._max=function(){return 9};break;case"m":case"s":c[d]._max=function(a){return 0==a%2?5:9}}++d}else elem=$('
').css({"float":"left"}).text(b.startTime[e]);a.append(elem)}},f=function(a,b){return void 0!==b?(c[a].margin=b,c[a].css({backgroundPosition:"0 "+b+"px"})):c[a].margin||0},g=function(a,e,g){d[a]&&window.clearInterval(d[a]);var h=-(b.digitHeight*b.digitImages*c[a].current);f(a,h),c[a].current=c[a].current+(g?e:-e);var i=0;d[a]=setInterval(function(){if(i++===b.digitImages*e)return window.clearInterval(d[a]),delete d[a],void 0;var c=g?-b.digitHeight:b.digitHeight;f(a,h+i*c)},b.stepTime/e)},h=function(a){if(0!=c[a].current)g(a,1);else if(a>0){var e=0==c[a-1].current;g(a,c[a]._max(a,e),!0),h(a-1)}else{for(var i=0;i=0){if(elem=$('
').css({height:b.digitHeight,"float":"left",background:"url('"+b.image+"')",width:b.digitWidth}),elem.current=parseInt(b.startTime[f]),digits.push(elem),margin(c,-elem.current*b.digitHeight*b.digitImages),b.continuous===!0)digits[c]._max=function(){return 9};else switch(b.format[f]){case"h":digits[c]._max=function(a,b){return 0==a%2?2:b?3:9};break;case"d":digits[c]._max=function(){return 9};break;case"m":digits[c]._max=function(a){return d||(d=a),a==d?9:5};break;case"s":digits[c]._max=function(a){return e||(e=a),a==e?9:5}}c+=1}else elem=$('
').css({"float":"left"}).text(b.startTime[f]);a.append(elem)}},makeMovement=function(a,b,c,d){intervals[a]&&window.clearInterval(intervals[a]);var e=-(d.digitHeight*d.digitImages*digits[a].current);margin(a,e),digits[a].current=digits[a].current+(c?b:-b);var f=0;intervals[a]=setInterval(function(){if(f++===d.digitImages*b)return window.clearInterval(intervals[a]),delete intervals[a],void 0;var g=c?-d.digitHeight:d.digitHeight;margin(a,e+f*g)},d.stepTime/b)},margin=function(a,b){return void 0!==b?(digits[a].margin=b,digits[a].css({backgroundPosition:"0 "+b+"px"})):digits[a].margin||0},moveDigit=function(a,b){if(0!=digits[a].current)makeMovement(a,1,!1,b);else if(a>0){var c=0==digits[a-1].current;makeMovement(a,digits[a]._max(a,c),!0,b),moveDigit(a-1,b)}else{for(var d=0;d Date: Sun, 1 Dec 2013 21:34:21 -0500 Subject: [PATCH 13/21] readme english updated and made to reflect some updates --- README.md | 17 ++++++++++------- 1 file changed, 10 insertions(+), 7 deletions(-) diff --git a/README.md b/README.md index 90f3dcd..e59bdf3 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,7 @@ -Take a look to the [demostration](http://reflejo.github.com/jquery-countdown/). This countdown has an amazing animation. +jQuery Countdown is a countdown library with an amazing animation. Take a look +at the [demonstration](http://reflejo.github.com/jquery-countdown/) -This project is still at beta stage, and probably it will remain that way :(. Now you can download the PSD file (It's [here](https://github.com/Reflejo/jquery-countdown/blob/master/img/digits.psd)) +Now you can download the PSD file [here](https://github.com/Reflejo/jquery-countdown/blob/master/img/digits.psd). ### Basic usage: @@ -23,7 +24,7 @@ This project is still at beta stage, and probably it will remain that way :(. No }); ``` -### Added continuously countdown +### Added continuous countdown ```javascript $('#counter').countdown({ @@ -35,7 +36,7 @@ This project is still at beta stage, and probably it will remain that way :(. No }); ``` -###Countdown to a Date +### Countdown to a Date Relative to current hour: @@ -58,12 +59,14 @@ An absolute date: }); ``` -Did I mention that js code weighs just **1.7 KB**? +Did I mention that js code weighs just **2.8 KB**? -### Author +### Developers Martín Conte Mac Donell - [@fz](https://twitter.com/fz) +[Matt Neary](mattneary.com) ### Demo -See the [demo](http://reflejo.github.com/jquery-countdown/) !!. +Look at the [demo](http://reflejo.github.com/jquery-countdown/). + From 2da405bf9d573c38c50ba5e78812f49fb4f9f6c1 Mon Sep 17 00:00:00 2001 From: Matt Neary Date: Sun, 1 Dec 2013 21:35:00 -0500 Subject: [PATCH 14/21] header --- README.md | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index e59bdf3..6411274 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,5 @@ +# jQuery Countdown + jQuery Countdown is a countdown library with an amazing animation. Take a look at the [demonstration](http://reflejo.github.com/jquery-countdown/) @@ -63,8 +65,8 @@ Did I mention that js code weighs just **2.8 KB**? ### Developers -Martín Conte Mac Donell - [@fz](https://twitter.com/fz) -[Matt Neary](mattneary.com) +- Martín Conte Mac Donell - [@fz](https://twitter.com/fz) +- [Matt Neary](mattneary.com) ### Demo From 91c84d15241f6510779bd488c71cecd9d91984a5 Mon Sep 17 00:00:00 2001 From: Matt Neary Date: Sun, 1 Dec 2013 21:38:14 -0500 Subject: [PATCH 15/21] markdown tweaks --- README.md | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 6411274..9bf1df9 100644 --- a/README.md +++ b/README.md @@ -3,7 +3,8 @@ jQuery Countdown is a countdown library with an amazing animation. Take a look at the [demonstration](http://reflejo.github.com/jquery-countdown/) -Now you can download the PSD file [here](https://github.com/Reflejo/jquery-countdown/blob/master/img/digits.psd). +Now you can download the PSD file +[here](https://github.com/Reflejo/jquery-countdown/blob/master/img/digits.psd). ### Basic usage: @@ -65,8 +66,8 @@ Did I mention that js code weighs just **2.8 KB**? ### Developers -- Martín Conte Mac Donell - [@fz](https://twitter.com/fz) -- [Matt Neary](mattneary.com) +- Martín Conte Mac Donell - - [@fz](https://twitter.com/fz) +- [Matt Neary](http://mattneary.com) - ### Demo From 16b40ee6dfb08ee82595858eeeca07db56eca6c8 Mon Sep 17 00:00:00 2001 From: Everton Cardoso Date: Thu, 9 Jan 2014 09:13:14 -0300 Subject: [PATCH 16/21] reseting digits array to evict problems with page that doesn't reload --- js/jquery.countdown.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/js/jquery.countdown.js b/js/jquery.countdown.js index 295c5ea..da2e095 100644 --- a/js/jquery.countdown.js +++ b/js/jquery.countdown.js @@ -13,6 +13,8 @@ var createDigits = function(where, options) { // Iterate each startTime digit, if it is not a digit // we'll asume that it's a separator var mFirstPos, sFirstPos; + // reset digits array. + digits = []; for (var i = 0; i < options.startTime.length; i++) { if (parseInt(options.startTime[i]) >= 0) { elem = $('
').css({ From d895923529cea41c8c9ddf2c2fe4fd40e5ce42e5 Mon Sep 17 00:00:00 2001 From: Everton Cardoso Date: Thu, 9 Jan 2014 09:48:39 -0300 Subject: [PATCH 17/21] intervals array reset and clear actual interval main when recreate the counter --- js/jquery.countdown.js | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/js/jquery.countdown.js b/js/jquery.countdown.js index da2e095..0e1ce21 100644 --- a/js/jquery.countdown.js +++ b/js/jquery.countdown.js @@ -13,8 +13,10 @@ var createDigits = function(where, options) { // Iterate each startTime digit, if it is not a digit // we'll asume that it's a separator var mFirstPos, sFirstPos; - // reset digits array. + // reset digits and intervals array. digits = []; + intervals = []; + for (var i = 0; i < options.startTime.length; i++) { if (parseInt(options.startTime[i]) >= 0) { elem = $('
').css({ @@ -214,7 +216,10 @@ jQuery.fn.countdown = function(userOptions) { delete userOptions.endTime; } $.extend(options, userOptions); - createDigits(this, options); - intervals.main = setInterval(function(){ moveDigit(digits.length - 1, options); }, - 1000); + if (this.length) { + clearInterval(intervals.main); + createDigits(this, options); + intervals.main = setInterval(function(){ moveDigit(digits.length - 1, options); }, + 1000); + } }; From 837b17edd75618819110b61e945fee3f524ca82a Mon Sep 17 00:00:00 2001 From: zanderi Date: Mon, 9 Jun 2014 09:55:58 -0600 Subject: [PATCH 18/21] Fixed IE8 issue where substr -2 equates to 0 value returning whole string. Replaced with slice which returns last two values always --- js/jquery.countdown.js | 2 +- js/jquery.countdown.min.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/js/jquery.countdown.js b/js/jquery.countdown.js index 0e1ce21..05ab98a 100644 --- a/js/jquery.countdown.js +++ b/js/jquery.countdown.js @@ -185,7 +185,7 @@ var formatCompute = function(d, options) { }; // add leading zeros -var pad = function(x){return (1e15+""+x).substr(-2)}; +var pad = function(x){return (1e15+""+x).slice(-2)}; var digits = []; var intervals = []; diff --git a/js/jquery.countdown.min.js b/js/jquery.countdown.min.js index acad382..ef6e0c4 100644 --- a/js/jquery.countdown.min.js +++ b/js/jquery.countdown.min.js @@ -1 +1 @@ -var createDigits=function(a,b){for(var d,e,c=0,f=0;f=0){if(elem=$('
').css({height:b.digitHeight,"float":"left",background:"url('"+b.image+"')",width:b.digitWidth}),elem.current=parseInt(b.startTime[f]),digits.push(elem),margin(c,-elem.current*b.digitHeight*b.digitImages),b.continuous===!0)digits[c]._max=function(){return 9};else switch(b.format[f]){case"h":digits[c]._max=function(a,b){return 0==a%2?2:b?3:9};break;case"d":digits[c]._max=function(){return 9};break;case"m":digits[c]._max=function(a){return d||(d=a),a==d?9:5};break;case"s":digits[c]._max=function(a){return e||(e=a),a==e?9:5}}c+=1}else elem=$('
').css({"float":"left"}).text(b.startTime[f]);a.append(elem)}},makeMovement=function(a,b,c,d){intervals[a]&&window.clearInterval(intervals[a]);var e=-(d.digitHeight*d.digitImages*digits[a].current);margin(a,e),digits[a].current=digits[a].current+(c?b:-b);var f=0;intervals[a]=setInterval(function(){if(f++===d.digitImages*b)return window.clearInterval(intervals[a]),delete intervals[a],void 0;var g=c?-d.digitHeight:d.digitHeight;margin(a,e+f*g)},d.stepTime/b)},margin=function(a,b){return void 0!==b?(digits[a].margin=b,digits[a].css({backgroundPosition:"0 "+b+"px"})):digits[a].margin||0},moveDigit=function(a,b){if(0!=digits[a].current)makeMovement(a,1,!1,b);else if(a>0){var c=0==digits[a-1].current;makeMovement(a,digits[a]._max(a,c),!0,b),moveDigit(a-1,b)}else{for(var d=0;d=0){if(elem=$('
').css({height:b.digitHeight,"float":"left",background:"url('"+b.image+"')",width:b.digitWidth}),elem.current=parseInt(b.startTime[f]),digits.push(elem),margin(c,-elem.current*b.digitHeight*b.digitImages),b.continuous===!0)digits[c]._max=function(){return 9};else switch(b.format[f]){case"h":digits[c]._max=function(a,b){return 0==a%2?2:b?3:9};break;case"d":digits[c]._max=function(){return 9};break;case"m":digits[c]._max=function(a){return d||(d=a),a==d?9:5};break;case"s":digits[c]._max=function(a){return e||(e=a),a==e?9:5}}c+=1}else elem=$('
').css({"float":"left"}).text(b.startTime[f]);a.append(elem)}},makeMovement=function(a,b,c,d){intervals[a]&&window.clearInterval(intervals[a]);var e=-(d.digitHeight*d.digitImages*digits[a].current);margin(a,e),digits[a].current=digits[a].current+(c?b:-b);var f=0;intervals[a]=setInterval(function(){if(f++===d.digitImages*b)return window.clearInterval(intervals[a]),delete intervals[a],void 0;var g=c?-d.digitHeight:d.digitHeight;margin(a,e+f*g)},d.stepTime/b)},margin=function(a,b){return void 0!==b?(digits[a].margin=b,digits[a].css({backgroundPosition:"0 "+b+"px"})):digits[a].margin||0},moveDigit=function(a,b){if(0!=digits[a].current)makeMovement(a,1,!1,b);else if(a>0){var c=0==digits[a-1].current;makeMovement(a,digits[a]._max(a,c),!0,b),moveDigit(a-1,b)}else{for(var d=0;d Date: Thu, 20 Nov 2014 12:12:36 -0500 Subject: [PATCH 19/21] Making work for dates longer than a month --- js/jquery.countdown.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/jquery.countdown.js b/js/jquery.countdown.js index 05ab98a..9ddcd82 100644 --- a/js/jquery.countdown.js +++ b/js/jquery.countdown.js @@ -174,7 +174,7 @@ var parseRelativeDate = function(form, options) { var formatCompute = function(d, options) { var format = options.format; var parse = { - d: d.getUTCDate() - 1, + d: Math.floor( ( d - new Date( d.getFullYear(), 0, 1 ) ) / ( 1000 * 60 * 60 * 24 ) ), h: d.getUTCHours(), m: d.getUTCMinutes(), s: d.getUTCSeconds() From 8fcf8806d67c9ae9ad9b84d8fbb22474267f7147 Mon Sep 17 00:00:00 2001 From: Abdiel Carrazana Date: Fri, 7 Aug 2015 17:01:36 -0400 Subject: [PATCH 20/21] Update jquery.countdown.js --- js/jquery.countdown.js | 35 +++++++++++++++++++---------------- 1 file changed, 19 insertions(+), 16 deletions(-) diff --git a/js/jquery.countdown.js b/js/jquery.countdown.js index 9ddcd82..c2d72b8 100644 --- a/js/jquery.countdown.js +++ b/js/jquery.countdown.js @@ -189,21 +189,22 @@ var pad = function(x){return (1e15+""+x).slice(-2)}; var digits = []; var intervals = []; + +// Default options +var options = { + stepTime: 60, + // startTime and format MUST follow the same format. + // also you cannot specify a format unordered (e.g. hh:ss:mm is wrong) + format: "dd:hh:mm:ss", + startTime: "01:12:32:55", + digitImages: 6, + digitWidth: 67, + digitHeight: 90, + timerEnd: function(){}, + image: "digits.png", + continuous: false +}; jQuery.fn.countdown = function(userOptions) { - // Default options - var options = { - stepTime: 60, - // startTime and format MUST follow the same format. - // also you cannot specify a format unordered (e.g. hh:ss:mm is wrong) - format: "dd:hh:mm:ss", - startTime: "01:12:32:55", - digitImages: 6, - digitWidth: 67, - digitHeight: 90, - timerEnd: function(){}, - image: "digits.png", - continuous: false - }; $.extend(options, userOptions); // if an endTime is provided... @@ -219,7 +220,9 @@ jQuery.fn.countdown = function(userOptions) { if (this.length) { clearInterval(intervals.main); createDigits(this, options); - intervals.main = setInterval(function(){ moveDigit(digits.length - 1, options); }, - 1000); } }; +jQuery.fn.start = function() { + intervals.main = setInterval(function(){ moveDigit(digits.length - 1, options); }, + 1000); +}; From 778b06be529848e1abee6cb837b20a3195a89de5 Mon Sep 17 00:00:00 2001 From: Abdiel Carrazana Date: Mon, 10 Aug 2015 10:15:52 -0400 Subject: [PATCH 21/21] --- README.md | 16 +++++++++++- js/jquery.countdown.js | 51 ++++++++++++++++++++++++-------------- js/jquery.countdown.min.js | 2 +- 3 files changed, 49 insertions(+), 20 deletions(-) diff --git a/README.md b/README.md index 9bf1df9..0ce5d87 100644 --- a/README.md +++ b/README.md @@ -62,7 +62,21 @@ An absolute date: }); ``` -Did I mention that js code weighs just **2.8 KB**? +Start manually the counter: + +```javascript + $('#counter').countdown({ + image: "digits.png", + format: "mm:ss", + endTime: new Date('07/16/13 05:00:00'), + start: false + }); + $("#startButton").click(function (e) { + $('#counter').start(); + }); +``` + +Did I mention that js code weighs just **4.0 KB**? ### Developers diff --git a/js/jquery.countdown.js b/js/jquery.countdown.js index c2d72b8..532668e 100644 --- a/js/jquery.countdown.js +++ b/js/jquery.countdown.js @@ -187,24 +187,34 @@ var formatCompute = function(d, options) { // add leading zeros var pad = function(x){return (1e15+""+x).slice(-2)}; +var start = function (element) { + if (element.attr('started') != 'true') { + element.attr('started', true) + intervals.main = setInterval(function () { + moveDigit(digits.length - 1, element.data('options')); + }, + 1000); + } +}; + var digits = []; var intervals = []; - -// Default options -var options = { - stepTime: 60, - // startTime and format MUST follow the same format. - // also you cannot specify a format unordered (e.g. hh:ss:mm is wrong) - format: "dd:hh:mm:ss", - startTime: "01:12:32:55", - digitImages: 6, - digitWidth: 67, - digitHeight: 90, - timerEnd: function(){}, - image: "digits.png", - continuous: false -}; jQuery.fn.countdown = function(userOptions) { + // Default options + var options = { + stepTime: 60, + // startTime and format MUST follow the same format. + // also you cannot specify a format unordered (e.g. hh:ss:mm is wrong) + format: "dd:hh:mm:ss", + startTime: "01:12:32:55", + digitImages: 6, + digitWidth: 67, + digitHeight: 90, + timerEnd: function(){}, + image: "digits.png", + continuous: false, + start: true + }; $.extend(options, userOptions); // if an endTime is provided... @@ -220,9 +230,14 @@ jQuery.fn.countdown = function(userOptions) { if (this.length) { clearInterval(intervals.main); createDigits(this, options); + this.data('options', options); + if (options.start === true) { + start(this); + } } }; -jQuery.fn.start = function() { - intervals.main = setInterval(function(){ moveDigit(digits.length - 1, options); }, - 1000); + +// start the counter +jQuery.fn.start = function () { + start(this); }; diff --git a/js/jquery.countdown.min.js b/js/jquery.countdown.min.js index ef6e0c4..644ced6 100644 --- a/js/jquery.countdown.min.js +++ b/js/jquery.countdown.min.js @@ -1 +1 @@ -var createDigits=function(a,b){for(var d,e,c=0,f=0;f=0){if(elem=$('
').css({height:b.digitHeight,"float":"left",background:"url('"+b.image+"')",width:b.digitWidth}),elem.current=parseInt(b.startTime[f]),digits.push(elem),margin(c,-elem.current*b.digitHeight*b.digitImages),b.continuous===!0)digits[c]._max=function(){return 9};else switch(b.format[f]){case"h":digits[c]._max=function(a,b){return 0==a%2?2:b?3:9};break;case"d":digits[c]._max=function(){return 9};break;case"m":digits[c]._max=function(a){return d||(d=a),a==d?9:5};break;case"s":digits[c]._max=function(a){return e||(e=a),a==e?9:5}}c+=1}else elem=$('
').css({"float":"left"}).text(b.startTime[f]);a.append(elem)}},makeMovement=function(a,b,c,d){intervals[a]&&window.clearInterval(intervals[a]);var e=-(d.digitHeight*d.digitImages*digits[a].current);margin(a,e),digits[a].current=digits[a].current+(c?b:-b);var f=0;intervals[a]=setInterval(function(){if(f++===d.digitImages*b)return window.clearInterval(intervals[a]),delete intervals[a],void 0;var g=c?-d.digitHeight:d.digitHeight;margin(a,e+f*g)},d.stepTime/b)},margin=function(a,b){return void 0!==b?(digits[a].margin=b,digits[a].css({backgroundPosition:"0 "+b+"px"})):digits[a].margin||0},moveDigit=function(a,b){if(0!=digits[a].current)makeMovement(a,1,!1,b);else if(a>0){var c=0==digits[a-1].current;makeMovement(a,digits[a]._max(a,c),!0,b),moveDigit(a-1,b)}else{for(var d=0;d=0){if(elem=$('
').css({height:e.digitHeight,"float":"left",background:"url('"+e.image+"')",width:e.digitWidth}),elem.current=parseInt(e.startTime[a]),digits.push(elem),margin(r,-elem.current*e.digitHeight*e.digitImages),e.continuous===!0)digits[r]._max=function(){return 9};else switch(e.format[a]){case"h":digits[r]._max=function(t,e){return t%2==0?2:e?3:9};break;case"d":digits[r]._max=function(){return 9};break;case"m":digits[r]._max=function(t){return i||(i=t),t==i?9:5};break;case"s":digits[r]._max=function(t){return n||(n=t),t==n?9:5}}r+=1}else elem=$('
').css({"float":"left"}).text(e.startTime[a]);t.append(elem)}},makeMovement=function(t,e,i,n){intervals[t]&&window.clearInterval(intervals[t]);var r=-(n.digitHeight*n.digitImages*digits[t].current);margin(t,r),digits[t].current=digits[t].current+(i?e:-e);var a=0;intervals[t]=setInterval(function(){if(a++===n.digitImages*e)return window.clearInterval(intervals[t]),void delete intervals[t];var s=i?-n.digitHeight:n.digitHeight;margin(t,r+a*s)},n.stepTime/e)},margin=function(t,e){return void 0!==e?(digits[t].margin=e,digits[t].css({backgroundPosition:"0 "+e+"px"})):digits[t].margin||0},moveDigit=function(t,e){if(0!=digits[t].current)makeMovement(t,1,!1,e);else if(t>0){var i=0==digits[t-1].current;makeMovement(t,digits[t]._max(t,i),!0,e),moveDigit(t-1,e)}else{for(var n=0;n