Daily Countdown Timer for Shipping hours
Trying to build a daily "order by" countdown until daily shipping cutoff time.
(prefer to keep vanilla js) - on this particular application, server side scripting is not an option.
1: I'm trying to ensure how to set the time to a specific EST time (6pm daily) and not sure if that's possible with vanilla JS?
2: when the timer is counting down and get under an hour left, it reads like 0:mm:ss - is it possible to just hide the hour when it's 0 and only show the mm:ss?
FIDDLE: http://jsfiddle.net/bill9000/rwet0o5f/96/
if (document.getElementById('countdownTimer')) {
pad = function(n, len) { // leading 0's
var s = n.toString();
return (new Array( (len - s.length + 1) ).join('0')) + s;
};
var timerRunning = setInterval(
function countDown() {
var now = new Date();
if ( (now.getDay() >= 1) && (now.getDay() <= 5) ) { // Monday to Friday only
var target = 15; // 15:00hrs is the cut-off point -------- Trying to get 6pm EST regardless of user time zone
if (now.getHours() < target) { // would be best if could hide the whole counter if past cutoff point each day
var hrs = (target - 1) - now.getHours();
//if (hrs < 0) hrs = 0;
if (hrs = 0) '';
var mins = 59 - now.getMinutes();
if (mins < 0) mins = 0;
var secs = 59 - now.getSeconds();
if (secs < 0) secs = 0;
var str = 'Order in the next <strong>' + hrs + ':' + pad(mins, 2) + ':' + pad(secs, 2) + '</strong> to ship <strong>today</strong>.' ;
document.getElementById('countdownTimer').innerHTML = str;
}
}
}, 1000
);
}
javascript timer countdown
add a comment |
Trying to build a daily "order by" countdown until daily shipping cutoff time.
(prefer to keep vanilla js) - on this particular application, server side scripting is not an option.
1: I'm trying to ensure how to set the time to a specific EST time (6pm daily) and not sure if that's possible with vanilla JS?
2: when the timer is counting down and get under an hour left, it reads like 0:mm:ss - is it possible to just hide the hour when it's 0 and only show the mm:ss?
FIDDLE: http://jsfiddle.net/bill9000/rwet0o5f/96/
if (document.getElementById('countdownTimer')) {
pad = function(n, len) { // leading 0's
var s = n.toString();
return (new Array( (len - s.length + 1) ).join('0')) + s;
};
var timerRunning = setInterval(
function countDown() {
var now = new Date();
if ( (now.getDay() >= 1) && (now.getDay() <= 5) ) { // Monday to Friday only
var target = 15; // 15:00hrs is the cut-off point -------- Trying to get 6pm EST regardless of user time zone
if (now.getHours() < target) { // would be best if could hide the whole counter if past cutoff point each day
var hrs = (target - 1) - now.getHours();
//if (hrs < 0) hrs = 0;
if (hrs = 0) '';
var mins = 59 - now.getMinutes();
if (mins < 0) mins = 0;
var secs = 59 - now.getSeconds();
if (secs < 0) secs = 0;
var str = 'Order in the next <strong>' + hrs + ':' + pad(mins, 2) + ':' + pad(secs, 2) + '</strong> to ship <strong>today</strong>.' ;
document.getElementById('countdownTimer').innerHTML = str;
}
}
}, 1000
);
}
javascript timer countdown
For the 1st question, this answer may help you: stackoverflow.com/questions/36206260/…
– Nelson Teixeira
Dec 28 '18 at 14:56
1
Store the different countdown parts in an array if they are > 0. When buildingstr
use.join(":")
to concatenate the different parts of the array:if (hrs > 0) { countdownParts.push(hrs); } if (mins >= 0) { countdownParts.push(pad(mins, 2)); } if (secs >= 0) { countdownParts.push(pad(secs, 2)); } str = /*...*/ + countdownParts.join(":") + /*...*/;
– Andreas
Dec 28 '18 at 15:07
if (hrs > 0 || mins > 0) { countdownParts.push(pad(mins, 2)); }
...
– MrJ
Dec 28 '18 at 21:14
add a comment |
Trying to build a daily "order by" countdown until daily shipping cutoff time.
(prefer to keep vanilla js) - on this particular application, server side scripting is not an option.
1: I'm trying to ensure how to set the time to a specific EST time (6pm daily) and not sure if that's possible with vanilla JS?
2: when the timer is counting down and get under an hour left, it reads like 0:mm:ss - is it possible to just hide the hour when it's 0 and only show the mm:ss?
FIDDLE: http://jsfiddle.net/bill9000/rwet0o5f/96/
if (document.getElementById('countdownTimer')) {
pad = function(n, len) { // leading 0's
var s = n.toString();
return (new Array( (len - s.length + 1) ).join('0')) + s;
};
var timerRunning = setInterval(
function countDown() {
var now = new Date();
if ( (now.getDay() >= 1) && (now.getDay() <= 5) ) { // Monday to Friday only
var target = 15; // 15:00hrs is the cut-off point -------- Trying to get 6pm EST regardless of user time zone
if (now.getHours() < target) { // would be best if could hide the whole counter if past cutoff point each day
var hrs = (target - 1) - now.getHours();
//if (hrs < 0) hrs = 0;
if (hrs = 0) '';
var mins = 59 - now.getMinutes();
if (mins < 0) mins = 0;
var secs = 59 - now.getSeconds();
if (secs < 0) secs = 0;
var str = 'Order in the next <strong>' + hrs + ':' + pad(mins, 2) + ':' + pad(secs, 2) + '</strong> to ship <strong>today</strong>.' ;
document.getElementById('countdownTimer').innerHTML = str;
}
}
}, 1000
);
}
javascript timer countdown
Trying to build a daily "order by" countdown until daily shipping cutoff time.
(prefer to keep vanilla js) - on this particular application, server side scripting is not an option.
1: I'm trying to ensure how to set the time to a specific EST time (6pm daily) and not sure if that's possible with vanilla JS?
2: when the timer is counting down and get under an hour left, it reads like 0:mm:ss - is it possible to just hide the hour when it's 0 and only show the mm:ss?
FIDDLE: http://jsfiddle.net/bill9000/rwet0o5f/96/
if (document.getElementById('countdownTimer')) {
pad = function(n, len) { // leading 0's
var s = n.toString();
return (new Array( (len - s.length + 1) ).join('0')) + s;
};
var timerRunning = setInterval(
function countDown() {
var now = new Date();
if ( (now.getDay() >= 1) && (now.getDay() <= 5) ) { // Monday to Friday only
var target = 15; // 15:00hrs is the cut-off point -------- Trying to get 6pm EST regardless of user time zone
if (now.getHours() < target) { // would be best if could hide the whole counter if past cutoff point each day
var hrs = (target - 1) - now.getHours();
//if (hrs < 0) hrs = 0;
if (hrs = 0) '';
var mins = 59 - now.getMinutes();
if (mins < 0) mins = 0;
var secs = 59 - now.getSeconds();
if (secs < 0) secs = 0;
var str = 'Order in the next <strong>' + hrs + ':' + pad(mins, 2) + ':' + pad(secs, 2) + '</strong> to ship <strong>today</strong>.' ;
document.getElementById('countdownTimer').innerHTML = str;
}
}
}, 1000
);
}
javascript timer countdown
javascript timer countdown
edited Dec 28 '18 at 14:48
Nelson Teixeira
3,70421742
3,70421742
asked Dec 28 '18 at 14:44
M21M21
11112
11112
For the 1st question, this answer may help you: stackoverflow.com/questions/36206260/…
– Nelson Teixeira
Dec 28 '18 at 14:56
1
Store the different countdown parts in an array if they are > 0. When buildingstr
use.join(":")
to concatenate the different parts of the array:if (hrs > 0) { countdownParts.push(hrs); } if (mins >= 0) { countdownParts.push(pad(mins, 2)); } if (secs >= 0) { countdownParts.push(pad(secs, 2)); } str = /*...*/ + countdownParts.join(":") + /*...*/;
– Andreas
Dec 28 '18 at 15:07
if (hrs > 0 || mins > 0) { countdownParts.push(pad(mins, 2)); }
...
– MrJ
Dec 28 '18 at 21:14
add a comment |
For the 1st question, this answer may help you: stackoverflow.com/questions/36206260/…
– Nelson Teixeira
Dec 28 '18 at 14:56
1
Store the different countdown parts in an array if they are > 0. When buildingstr
use.join(":")
to concatenate the different parts of the array:if (hrs > 0) { countdownParts.push(hrs); } if (mins >= 0) { countdownParts.push(pad(mins, 2)); } if (secs >= 0) { countdownParts.push(pad(secs, 2)); } str = /*...*/ + countdownParts.join(":") + /*...*/;
– Andreas
Dec 28 '18 at 15:07
if (hrs > 0 || mins > 0) { countdownParts.push(pad(mins, 2)); }
...
– MrJ
Dec 28 '18 at 21:14
For the 1st question, this answer may help you: stackoverflow.com/questions/36206260/…
– Nelson Teixeira
Dec 28 '18 at 14:56
For the 1st question, this answer may help you: stackoverflow.com/questions/36206260/…
– Nelson Teixeira
Dec 28 '18 at 14:56
1
1
Store the different countdown parts in an array if they are > 0. When building
str
use .join(":")
to concatenate the different parts of the array: if (hrs > 0) { countdownParts.push(hrs); } if (mins >= 0) { countdownParts.push(pad(mins, 2)); } if (secs >= 0) { countdownParts.push(pad(secs, 2)); } str = /*...*/ + countdownParts.join(":") + /*...*/;
– Andreas
Dec 28 '18 at 15:07
Store the different countdown parts in an array if they are > 0. When building
str
use .join(":")
to concatenate the different parts of the array: if (hrs > 0) { countdownParts.push(hrs); } if (mins >= 0) { countdownParts.push(pad(mins, 2)); } if (secs >= 0) { countdownParts.push(pad(secs, 2)); } str = /*...*/ + countdownParts.join(":") + /*...*/;
– Andreas
Dec 28 '18 at 15:07
if (hrs > 0 || mins > 0) { countdownParts.push(pad(mins, 2)); }
...– MrJ
Dec 28 '18 at 21:14
if (hrs > 0 || mins > 0) { countdownParts.push(pad(mins, 2)); }
...– MrJ
Dec 28 '18 at 21:14
add a comment |
2 Answers
2
active
oldest
votes
You can use the getUTC...
functions to get the UTC time parts and then adjust them to the time zone you're looking for. You can get the UTC date then adjust it to get EST time.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/getUTCDay
// create a date based on the user's timezone
d = new Date();
// get the universal time, then remove the difference between UTC and EST, to get the EST hours
elem.innerHTML = d.getUTCHours() - 5;
To hide the date parts just add the parts in an array and join using ':', that will handle the concatenation for you without you needed to add more logic.
You can also use the array length to work out the correct unit
var arr_parts = ;
var hrs = (target - 1) - now.getHours();
var mins = 59 - now.getMinutes();
var secs = 59 - now.getSeconds();
if ( hrs ) {
arr_parts.push( hrs );
}
arr_parts.push( pad( mins, 2 ) );
arr_parts.push( pad( secs, 2 ) );
// number of parts to the countdown
// 3 = h:m:s
// 2 = m:s
// 1 = s
part_length = arr_parts.length;
// the biggest unit for the countdown
// so length of 1 means we need seconds at index 0)
arr_units = [ 'seconds', 'minutes', 'hours' ]
str_unit = arr_units[ part_length - 1 ];
var str = 'Order within the next <strong>'
+ arr_parts.join( ':' )
+ ' ' + str_unit
+ '</strong> to ship <strong>today</strong>.';
Here's the modified version of the JSfiddle I used (cut off time changed so it works when I last used the fiddle)
http://jsfiddle.net/gwxptbfh/
wrong display for minutes + no need to test for second (always displayed= + no clearInterval !!
– MrJ
Dec 28 '18 at 18:23
@andreas got carried away copy/pasting, didn't mean to check minutes and seconds, only hours as per the original question
– Pete
Dec 30 '18 at 19:35
@MrJ I didn't want to post the complete solution and end up refactoring the entire piece, just the snippet for joining the arr_parts
– Pete
Dec 30 '18 at 19:36
_@ Pete it does not matter, the algorithm remains false. if hrs = 0, mins = 0 and secs = 7, this gives 00:07 minutes and not 07 seconds, as falsely indicated
– MrJ
Dec 30 '18 at 22:20
add a comment |
lately i've been thinking... (it's working everywhere on the earth)
const
CountDownZone = document.querySelector('#count-down-Timer strong'),
TimeTarget = 15 // 15:00hrs is the cut-off point
;
function pad(n, len) { // leading 0's
let s = n.toString();
return '0'.repeat(Math.max(len - s.length, 0)) + s;
};
var timerRunning = setInterval(countDown, 1000);
function countDown() {
let
localTime = new Date(), // get your local time
utcTime = localTime.getUTCHours(), // find UTC hours
estTime = new Date() // create a new date object for the EST time
;
estTime.setHours(utcTime-5); // adjust it for EST hours.
if (
(estTime.getDay() > 0) && (estTime.getDay() < 6) // Monday to Friday only
&& (estTime.getHours() < TimeTarget)
)
{
let
count_HM = ,
hrs = (TimeTarget - 1) - estTime.getHours(),
mins = 59 - estTime.getMinutes(),
secs = 59 - estTime.getSeconds()
;
if (hrs > 0) { count_HM.push(hrs + ' hour(s)'); }
if (hrs > 0 || mins > 0) { count_HM.push(pad(mins, 2)+ ' minute(s)'); }
count_HM.push(pad(secs, 2)+ ' second(s)');
CountDownZone.textContent = count_HM.join(' - ');
}
else {
document.getElementById('count-down-Timer').textContent = 'count down Timer is off';
clearInterval(timerRunning);
}
}
#count-down-Timer {
padding: 20px 10px 20px 10px;
background-color: #afc8c5
}
<div id="count-down-Timer">Order in the next <strong>0.00.00</strong> to ship <strong>today</strong>.</div>
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53960268%2fdaily-countdown-timer-for-shipping-hours%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
You can use the getUTC...
functions to get the UTC time parts and then adjust them to the time zone you're looking for. You can get the UTC date then adjust it to get EST time.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/getUTCDay
// create a date based on the user's timezone
d = new Date();
// get the universal time, then remove the difference between UTC and EST, to get the EST hours
elem.innerHTML = d.getUTCHours() - 5;
To hide the date parts just add the parts in an array and join using ':', that will handle the concatenation for you without you needed to add more logic.
You can also use the array length to work out the correct unit
var arr_parts = ;
var hrs = (target - 1) - now.getHours();
var mins = 59 - now.getMinutes();
var secs = 59 - now.getSeconds();
if ( hrs ) {
arr_parts.push( hrs );
}
arr_parts.push( pad( mins, 2 ) );
arr_parts.push( pad( secs, 2 ) );
// number of parts to the countdown
// 3 = h:m:s
// 2 = m:s
// 1 = s
part_length = arr_parts.length;
// the biggest unit for the countdown
// so length of 1 means we need seconds at index 0)
arr_units = [ 'seconds', 'minutes', 'hours' ]
str_unit = arr_units[ part_length - 1 ];
var str = 'Order within the next <strong>'
+ arr_parts.join( ':' )
+ ' ' + str_unit
+ '</strong> to ship <strong>today</strong>.';
Here's the modified version of the JSfiddle I used (cut off time changed so it works when I last used the fiddle)
http://jsfiddle.net/gwxptbfh/
wrong display for minutes + no need to test for second (always displayed= + no clearInterval !!
– MrJ
Dec 28 '18 at 18:23
@andreas got carried away copy/pasting, didn't mean to check minutes and seconds, only hours as per the original question
– Pete
Dec 30 '18 at 19:35
@MrJ I didn't want to post the complete solution and end up refactoring the entire piece, just the snippet for joining the arr_parts
– Pete
Dec 30 '18 at 19:36
_@ Pete it does not matter, the algorithm remains false. if hrs = 0, mins = 0 and secs = 7, this gives 00:07 minutes and not 07 seconds, as falsely indicated
– MrJ
Dec 30 '18 at 22:20
add a comment |
You can use the getUTC...
functions to get the UTC time parts and then adjust them to the time zone you're looking for. You can get the UTC date then adjust it to get EST time.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/getUTCDay
// create a date based on the user's timezone
d = new Date();
// get the universal time, then remove the difference between UTC and EST, to get the EST hours
elem.innerHTML = d.getUTCHours() - 5;
To hide the date parts just add the parts in an array and join using ':', that will handle the concatenation for you without you needed to add more logic.
You can also use the array length to work out the correct unit
var arr_parts = ;
var hrs = (target - 1) - now.getHours();
var mins = 59 - now.getMinutes();
var secs = 59 - now.getSeconds();
if ( hrs ) {
arr_parts.push( hrs );
}
arr_parts.push( pad( mins, 2 ) );
arr_parts.push( pad( secs, 2 ) );
// number of parts to the countdown
// 3 = h:m:s
// 2 = m:s
// 1 = s
part_length = arr_parts.length;
// the biggest unit for the countdown
// so length of 1 means we need seconds at index 0)
arr_units = [ 'seconds', 'minutes', 'hours' ]
str_unit = arr_units[ part_length - 1 ];
var str = 'Order within the next <strong>'
+ arr_parts.join( ':' )
+ ' ' + str_unit
+ '</strong> to ship <strong>today</strong>.';
Here's the modified version of the JSfiddle I used (cut off time changed so it works when I last used the fiddle)
http://jsfiddle.net/gwxptbfh/
wrong display for minutes + no need to test for second (always displayed= + no clearInterval !!
– MrJ
Dec 28 '18 at 18:23
@andreas got carried away copy/pasting, didn't mean to check minutes and seconds, only hours as per the original question
– Pete
Dec 30 '18 at 19:35
@MrJ I didn't want to post the complete solution and end up refactoring the entire piece, just the snippet for joining the arr_parts
– Pete
Dec 30 '18 at 19:36
_@ Pete it does not matter, the algorithm remains false. if hrs = 0, mins = 0 and secs = 7, this gives 00:07 minutes and not 07 seconds, as falsely indicated
– MrJ
Dec 30 '18 at 22:20
add a comment |
You can use the getUTC...
functions to get the UTC time parts and then adjust them to the time zone you're looking for. You can get the UTC date then adjust it to get EST time.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/getUTCDay
// create a date based on the user's timezone
d = new Date();
// get the universal time, then remove the difference between UTC and EST, to get the EST hours
elem.innerHTML = d.getUTCHours() - 5;
To hide the date parts just add the parts in an array and join using ':', that will handle the concatenation for you without you needed to add more logic.
You can also use the array length to work out the correct unit
var arr_parts = ;
var hrs = (target - 1) - now.getHours();
var mins = 59 - now.getMinutes();
var secs = 59 - now.getSeconds();
if ( hrs ) {
arr_parts.push( hrs );
}
arr_parts.push( pad( mins, 2 ) );
arr_parts.push( pad( secs, 2 ) );
// number of parts to the countdown
// 3 = h:m:s
// 2 = m:s
// 1 = s
part_length = arr_parts.length;
// the biggest unit for the countdown
// so length of 1 means we need seconds at index 0)
arr_units = [ 'seconds', 'minutes', 'hours' ]
str_unit = arr_units[ part_length - 1 ];
var str = 'Order within the next <strong>'
+ arr_parts.join( ':' )
+ ' ' + str_unit
+ '</strong> to ship <strong>today</strong>.';
Here's the modified version of the JSfiddle I used (cut off time changed so it works when I last used the fiddle)
http://jsfiddle.net/gwxptbfh/
You can use the getUTC...
functions to get the UTC time parts and then adjust them to the time zone you're looking for. You can get the UTC date then adjust it to get EST time.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/getUTCDay
// create a date based on the user's timezone
d = new Date();
// get the universal time, then remove the difference between UTC and EST, to get the EST hours
elem.innerHTML = d.getUTCHours() - 5;
To hide the date parts just add the parts in an array and join using ':', that will handle the concatenation for you without you needed to add more logic.
You can also use the array length to work out the correct unit
var arr_parts = ;
var hrs = (target - 1) - now.getHours();
var mins = 59 - now.getMinutes();
var secs = 59 - now.getSeconds();
if ( hrs ) {
arr_parts.push( hrs );
}
arr_parts.push( pad( mins, 2 ) );
arr_parts.push( pad( secs, 2 ) );
// number of parts to the countdown
// 3 = h:m:s
// 2 = m:s
// 1 = s
part_length = arr_parts.length;
// the biggest unit for the countdown
// so length of 1 means we need seconds at index 0)
arr_units = [ 'seconds', 'minutes', 'hours' ]
str_unit = arr_units[ part_length - 1 ];
var str = 'Order within the next <strong>'
+ arr_parts.join( ':' )
+ ' ' + str_unit
+ '</strong> to ship <strong>today</strong>.';
Here's the modified version of the JSfiddle I used (cut off time changed so it works when I last used the fiddle)
http://jsfiddle.net/gwxptbfh/
edited Dec 30 '18 at 19:34
answered Dec 28 '18 at 15:28
PetePete
2,59673765
2,59673765
wrong display for minutes + no need to test for second (always displayed= + no clearInterval !!
– MrJ
Dec 28 '18 at 18:23
@andreas got carried away copy/pasting, didn't mean to check minutes and seconds, only hours as per the original question
– Pete
Dec 30 '18 at 19:35
@MrJ I didn't want to post the complete solution and end up refactoring the entire piece, just the snippet for joining the arr_parts
– Pete
Dec 30 '18 at 19:36
_@ Pete it does not matter, the algorithm remains false. if hrs = 0, mins = 0 and secs = 7, this gives 00:07 minutes and not 07 seconds, as falsely indicated
– MrJ
Dec 30 '18 at 22:20
add a comment |
wrong display for minutes + no need to test for second (always displayed= + no clearInterval !!
– MrJ
Dec 28 '18 at 18:23
@andreas got carried away copy/pasting, didn't mean to check minutes and seconds, only hours as per the original question
– Pete
Dec 30 '18 at 19:35
@MrJ I didn't want to post the complete solution and end up refactoring the entire piece, just the snippet for joining the arr_parts
– Pete
Dec 30 '18 at 19:36
_@ Pete it does not matter, the algorithm remains false. if hrs = 0, mins = 0 and secs = 7, this gives 00:07 minutes and not 07 seconds, as falsely indicated
– MrJ
Dec 30 '18 at 22:20
wrong display for minutes + no need to test for second (always displayed= + no clearInterval !!
– MrJ
Dec 28 '18 at 18:23
wrong display for minutes + no need to test for second (always displayed= + no clearInterval !!
– MrJ
Dec 28 '18 at 18:23
@andreas got carried away copy/pasting, didn't mean to check minutes and seconds, only hours as per the original question
– Pete
Dec 30 '18 at 19:35
@andreas got carried away copy/pasting, didn't mean to check minutes and seconds, only hours as per the original question
– Pete
Dec 30 '18 at 19:35
@MrJ I didn't want to post the complete solution and end up refactoring the entire piece, just the snippet for joining the arr_parts
– Pete
Dec 30 '18 at 19:36
@MrJ I didn't want to post the complete solution and end up refactoring the entire piece, just the snippet for joining the arr_parts
– Pete
Dec 30 '18 at 19:36
_@ Pete it does not matter, the algorithm remains false. if hrs = 0, mins = 0 and secs = 7, this gives 00:07 minutes and not 07 seconds, as falsely indicated
– MrJ
Dec 30 '18 at 22:20
_@ Pete it does not matter, the algorithm remains false. if hrs = 0, mins = 0 and secs = 7, this gives 00:07 minutes and not 07 seconds, as falsely indicated
– MrJ
Dec 30 '18 at 22:20
add a comment |
lately i've been thinking... (it's working everywhere on the earth)
const
CountDownZone = document.querySelector('#count-down-Timer strong'),
TimeTarget = 15 // 15:00hrs is the cut-off point
;
function pad(n, len) { // leading 0's
let s = n.toString();
return '0'.repeat(Math.max(len - s.length, 0)) + s;
};
var timerRunning = setInterval(countDown, 1000);
function countDown() {
let
localTime = new Date(), // get your local time
utcTime = localTime.getUTCHours(), // find UTC hours
estTime = new Date() // create a new date object for the EST time
;
estTime.setHours(utcTime-5); // adjust it for EST hours.
if (
(estTime.getDay() > 0) && (estTime.getDay() < 6) // Monday to Friday only
&& (estTime.getHours() < TimeTarget)
)
{
let
count_HM = ,
hrs = (TimeTarget - 1) - estTime.getHours(),
mins = 59 - estTime.getMinutes(),
secs = 59 - estTime.getSeconds()
;
if (hrs > 0) { count_HM.push(hrs + ' hour(s)'); }
if (hrs > 0 || mins > 0) { count_HM.push(pad(mins, 2)+ ' minute(s)'); }
count_HM.push(pad(secs, 2)+ ' second(s)');
CountDownZone.textContent = count_HM.join(' - ');
}
else {
document.getElementById('count-down-Timer').textContent = 'count down Timer is off';
clearInterval(timerRunning);
}
}
#count-down-Timer {
padding: 20px 10px 20px 10px;
background-color: #afc8c5
}
<div id="count-down-Timer">Order in the next <strong>0.00.00</strong> to ship <strong>today</strong>.</div>
add a comment |
lately i've been thinking... (it's working everywhere on the earth)
const
CountDownZone = document.querySelector('#count-down-Timer strong'),
TimeTarget = 15 // 15:00hrs is the cut-off point
;
function pad(n, len) { // leading 0's
let s = n.toString();
return '0'.repeat(Math.max(len - s.length, 0)) + s;
};
var timerRunning = setInterval(countDown, 1000);
function countDown() {
let
localTime = new Date(), // get your local time
utcTime = localTime.getUTCHours(), // find UTC hours
estTime = new Date() // create a new date object for the EST time
;
estTime.setHours(utcTime-5); // adjust it for EST hours.
if (
(estTime.getDay() > 0) && (estTime.getDay() < 6) // Monday to Friday only
&& (estTime.getHours() < TimeTarget)
)
{
let
count_HM = ,
hrs = (TimeTarget - 1) - estTime.getHours(),
mins = 59 - estTime.getMinutes(),
secs = 59 - estTime.getSeconds()
;
if (hrs > 0) { count_HM.push(hrs + ' hour(s)'); }
if (hrs > 0 || mins > 0) { count_HM.push(pad(mins, 2)+ ' minute(s)'); }
count_HM.push(pad(secs, 2)+ ' second(s)');
CountDownZone.textContent = count_HM.join(' - ');
}
else {
document.getElementById('count-down-Timer').textContent = 'count down Timer is off';
clearInterval(timerRunning);
}
}
#count-down-Timer {
padding: 20px 10px 20px 10px;
background-color: #afc8c5
}
<div id="count-down-Timer">Order in the next <strong>0.00.00</strong> to ship <strong>today</strong>.</div>
add a comment |
lately i've been thinking... (it's working everywhere on the earth)
const
CountDownZone = document.querySelector('#count-down-Timer strong'),
TimeTarget = 15 // 15:00hrs is the cut-off point
;
function pad(n, len) { // leading 0's
let s = n.toString();
return '0'.repeat(Math.max(len - s.length, 0)) + s;
};
var timerRunning = setInterval(countDown, 1000);
function countDown() {
let
localTime = new Date(), // get your local time
utcTime = localTime.getUTCHours(), // find UTC hours
estTime = new Date() // create a new date object for the EST time
;
estTime.setHours(utcTime-5); // adjust it for EST hours.
if (
(estTime.getDay() > 0) && (estTime.getDay() < 6) // Monday to Friday only
&& (estTime.getHours() < TimeTarget)
)
{
let
count_HM = ,
hrs = (TimeTarget - 1) - estTime.getHours(),
mins = 59 - estTime.getMinutes(),
secs = 59 - estTime.getSeconds()
;
if (hrs > 0) { count_HM.push(hrs + ' hour(s)'); }
if (hrs > 0 || mins > 0) { count_HM.push(pad(mins, 2)+ ' minute(s)'); }
count_HM.push(pad(secs, 2)+ ' second(s)');
CountDownZone.textContent = count_HM.join(' - ');
}
else {
document.getElementById('count-down-Timer').textContent = 'count down Timer is off';
clearInterval(timerRunning);
}
}
#count-down-Timer {
padding: 20px 10px 20px 10px;
background-color: #afc8c5
}
<div id="count-down-Timer">Order in the next <strong>0.00.00</strong> to ship <strong>today</strong>.</div>
lately i've been thinking... (it's working everywhere on the earth)
const
CountDownZone = document.querySelector('#count-down-Timer strong'),
TimeTarget = 15 // 15:00hrs is the cut-off point
;
function pad(n, len) { // leading 0's
let s = n.toString();
return '0'.repeat(Math.max(len - s.length, 0)) + s;
};
var timerRunning = setInterval(countDown, 1000);
function countDown() {
let
localTime = new Date(), // get your local time
utcTime = localTime.getUTCHours(), // find UTC hours
estTime = new Date() // create a new date object for the EST time
;
estTime.setHours(utcTime-5); // adjust it for EST hours.
if (
(estTime.getDay() > 0) && (estTime.getDay() < 6) // Monday to Friday only
&& (estTime.getHours() < TimeTarget)
)
{
let
count_HM = ,
hrs = (TimeTarget - 1) - estTime.getHours(),
mins = 59 - estTime.getMinutes(),
secs = 59 - estTime.getSeconds()
;
if (hrs > 0) { count_HM.push(hrs + ' hour(s)'); }
if (hrs > 0 || mins > 0) { count_HM.push(pad(mins, 2)+ ' minute(s)'); }
count_HM.push(pad(secs, 2)+ ' second(s)');
CountDownZone.textContent = count_HM.join(' - ');
}
else {
document.getElementById('count-down-Timer').textContent = 'count down Timer is off';
clearInterval(timerRunning);
}
}
#count-down-Timer {
padding: 20px 10px 20px 10px;
background-color: #afc8c5
}
<div id="count-down-Timer">Order in the next <strong>0.00.00</strong> to ship <strong>today</strong>.</div>
const
CountDownZone = document.querySelector('#count-down-Timer strong'),
TimeTarget = 15 // 15:00hrs is the cut-off point
;
function pad(n, len) { // leading 0's
let s = n.toString();
return '0'.repeat(Math.max(len - s.length, 0)) + s;
};
var timerRunning = setInterval(countDown, 1000);
function countDown() {
let
localTime = new Date(), // get your local time
utcTime = localTime.getUTCHours(), // find UTC hours
estTime = new Date() // create a new date object for the EST time
;
estTime.setHours(utcTime-5); // adjust it for EST hours.
if (
(estTime.getDay() > 0) && (estTime.getDay() < 6) // Monday to Friday only
&& (estTime.getHours() < TimeTarget)
)
{
let
count_HM = ,
hrs = (TimeTarget - 1) - estTime.getHours(),
mins = 59 - estTime.getMinutes(),
secs = 59 - estTime.getSeconds()
;
if (hrs > 0) { count_HM.push(hrs + ' hour(s)'); }
if (hrs > 0 || mins > 0) { count_HM.push(pad(mins, 2)+ ' minute(s)'); }
count_HM.push(pad(secs, 2)+ ' second(s)');
CountDownZone.textContent = count_HM.join(' - ');
}
else {
document.getElementById('count-down-Timer').textContent = 'count down Timer is off';
clearInterval(timerRunning);
}
}
#count-down-Timer {
padding: 20px 10px 20px 10px;
background-color: #afc8c5
}
<div id="count-down-Timer">Order in the next <strong>0.00.00</strong> to ship <strong>today</strong>.</div>
const
CountDownZone = document.querySelector('#count-down-Timer strong'),
TimeTarget = 15 // 15:00hrs is the cut-off point
;
function pad(n, len) { // leading 0's
let s = n.toString();
return '0'.repeat(Math.max(len - s.length, 0)) + s;
};
var timerRunning = setInterval(countDown, 1000);
function countDown() {
let
localTime = new Date(), // get your local time
utcTime = localTime.getUTCHours(), // find UTC hours
estTime = new Date() // create a new date object for the EST time
;
estTime.setHours(utcTime-5); // adjust it for EST hours.
if (
(estTime.getDay() > 0) && (estTime.getDay() < 6) // Monday to Friday only
&& (estTime.getHours() < TimeTarget)
)
{
let
count_HM = ,
hrs = (TimeTarget - 1) - estTime.getHours(),
mins = 59 - estTime.getMinutes(),
secs = 59 - estTime.getSeconds()
;
if (hrs > 0) { count_HM.push(hrs + ' hour(s)'); }
if (hrs > 0 || mins > 0) { count_HM.push(pad(mins, 2)+ ' minute(s)'); }
count_HM.push(pad(secs, 2)+ ' second(s)');
CountDownZone.textContent = count_HM.join(' - ');
}
else {
document.getElementById('count-down-Timer').textContent = 'count down Timer is off';
clearInterval(timerRunning);
}
}
#count-down-Timer {
padding: 20px 10px 20px 10px;
background-color: #afc8c5
}
<div id="count-down-Timer">Order in the next <strong>0.00.00</strong> to ship <strong>today</strong>.</div>
edited Dec 30 '18 at 22:23
answered Dec 28 '18 at 17:29
MrJMrJ
39418
39418
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53960268%2fdaily-countdown-timer-for-shipping-hours%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
For the 1st question, this answer may help you: stackoverflow.com/questions/36206260/…
– Nelson Teixeira
Dec 28 '18 at 14:56
1
Store the different countdown parts in an array if they are > 0. When building
str
use.join(":")
to concatenate the different parts of the array:if (hrs > 0) { countdownParts.push(hrs); } if (mins >= 0) { countdownParts.push(pad(mins, 2)); } if (secs >= 0) { countdownParts.push(pad(secs, 2)); } str = /*...*/ + countdownParts.join(":") + /*...*/;
– Andreas
Dec 28 '18 at 15:07
if (hrs > 0 || mins > 0) { countdownParts.push(pad(mins, 2)); }
...– MrJ
Dec 28 '18 at 21:14