Javascript Countdown Timer Based on User Input
I am trying to figure out the best way to capture a users input from a selected date that will then be generated into a countdown timer. The code below is what I have so far for the Javascript:
var deadline = '2018-11-16';
// Calculate the Time Remaining
function getTimeRemaining(endtime) {
var t = Date.parse(endtime) - Date.parse(new Date());
var seconds = Math.floor( (t/1000) % 60 );
var minutes = Math.floor( (t/1000/60) % 60);
var hours = Math.floor( (t/(1000*60*60)) % 24);
var days = Math.floor( t/(1000*60*60*24) );
return {
'total': t,
'days': days,
'hours': hours,
'minutes': minutes,
'seconds': seconds
};
}
function initializeClock(clockdiv, endtime) {
var clock = document.getElementById(clockdiv);
var timeinterval = setInterval(function(){
var t = getTimeRemaining(endtime);
clock.innerHTML = 'days: ' + t.days + '<br>' + 'hours: ' + t.hours + '<br>' + 'minutes: ' + t.minutes + '<br>' + 'seconds: ' + t.seconds;
if(t.total<=0){
clearInterval(timeinterval);
}
},1000);
}
initializeClock('clockdiv', deadline);
Basically I am trying to capture a selected date from an HTML input by the user and pass it into the deadline variable to create a custom countdown timer.
Also, I am making this post on 11/15/2018, and just to test I have set the deadline variable to 11/16/2018, but the countdown is now negative. How would I fix that?
UPDATE:
The updated HTML is below:
<body>
<div id="formdiv">
<form action="" id="div" method="POST">
<input id="myDate" type="date">
<input type="submit" id="submit" onclick="getTimeRemaining()">
</form>
</div>
<div id="clockdiv"></div>
</body>
And the updated JS is below:
function getTimeRemaining(endtime) {
var deadline = document.getElementById('myDate').value;
var t = Date.parse(endtime).getTime() - (new Date()).getTime();
var seconds = Math.floor( (t/1000) % 60 );
var minutes = Math.floor( (t/1000/60) % 60);
var hours = Math.floor( (t/(1000*60*60)) % 24);
var days = Math.floor( t/(1000*60*60*24) );
return {
'total': t,
'days': days,
'hours': hours,
'minutes': minutes,
'seconds': seconds
};
function initializeClock(id, endtime) {
var clock = document.getElementById(id);
var timeinterval = setInterval(function(){
var t = getTimeRemaining(endtime);
clock.innerHTML = 'days: ' + t.days + '<br>' + 'hours: ' + t.hours + '<br>' + 'minutes: ' + t.minutes + '<br>' + 'seconds: ' + t.seconds;
if(t.total<=0){
clearInterval(timeinterval);
}
},1000);
}
initializeClock('clockdiv', deadline);
}
javascript
asked Nov 16 '18 at 3:37
EataSandwhichEataSandwhich
125
add a comment |
I am trying to figure out the best way to capture a users input from a selected date that will then be generated into a countdown timer. The code below is what I have so far for the Javascript:
var deadline = '2018-11-16';
// Calculate the Time Remaining
function getTimeRemaining(endtime) {
var t = Date.parse(endtime) - Date.parse(new Date());
var seconds = Math.floor( (t/1000) % 60 );
var minutes = Math.floor( (t/1000/60) % 60);
var hours = Math.floor( (t/(1000*60*60)) % 24);
var days = Math.floor( t/(1000*60*60*24) );
return {
'total': t,
'days': days,
'hours': hours,
'minutes': minutes,
'seconds': seconds
};
}
function initializeClock(clockdiv, endtime) {
var clock = document.getElementById(clockdiv);
var timeinterval = setInterval(function(){
var t = getTimeRemaining(endtime);
clock.innerHTML = 'days: ' + t.days + '<br>' + 'hours: ' + t.hours + '<br>' + 'minutes: ' + t.minutes + '<br>' + 'seconds: ' + t.seconds;
if(t.total<=0){
clearInterval(timeinterval);
}
},1000);
}
initializeClock('clockdiv', deadline);
Basically I am trying to capture a selected date from an HTML input by the user and pass it into the deadline variable to create a custom countdown timer.
Also, I am making this post on 11/15/2018, and just to test I have set the deadline variable to 11/16/2018, but the countdown is now negative. How would I fix that?
UPDATE:
The updated HTML is below:
<body>
<div id="formdiv">
<form action="" id="div" method="POST">
<input id="myDate" type="date">
<input type="submit" id="submit" onclick="getTimeRemaining()">
</form>
</div>
<div id="clockdiv"></div>
</body>
And the updated JS is below:
function getTimeRemaining(endtime) {
var deadline = document.getElementById('myDate').value;
var t = Date.parse(endtime).getTime() - (new Date()).getTime();
var seconds = Math.floor( (t/1000) % 60 );
var minutes = Math.floor( (t/1000/60) % 60);
var hours = Math.floor( (t/(1000*60*60)) % 24);
var days = Math.floor( t/(1000*60*60*24) );
return {
'total': t,
'days': days,
'hours': hours,
'minutes': minutes,
'seconds': seconds
};
function initializeClock(id, endtime) {
var clock = document.getElementById(id);
var timeinterval = setInterval(function(){
var t = getTimeRemaining(endtime);
clock.innerHTML = 'days: ' + t.days + '<br>' + 'hours: ' + t.hours + '<br>' + 'minutes: ' + t.minutes + '<br>' + 'seconds: ' + t.seconds;
if(t.total<=0){
clearInterval(timeinterval);
}
},1000);
}
initializeClock('clockdiv', deadline);
}
javascript
asked Nov 16 '18 at 3:37
EataSandwhichEataSandwhich
125
add a comment |
I am trying to figure out the best way to capture a users input from a selected date that will then be generated into a countdown timer. The code below is what I have so far for the Javascript:
var deadline = '2018-11-16';
// Calculate the Time Remaining
function getTimeRemaining(endtime) {
var t = Date.parse(endtime) - Date.parse(new Date());
var seconds = Math.floor( (t/1000) % 60 );
var minutes = Math.floor( (t/1000/60) % 60);
var hours = Math.floor( (t/(1000*60*60)) % 24);
var days = Math.floor( t/(1000*60*60*24) );
return {
'total': t,
'days': days,
'hours': hours,
'minutes': minutes,
'seconds': seconds
};
}
function initializeClock(clockdiv, endtime) {
var clock = document.getElementById(clockdiv);
var timeinterval = setInterval(function(){
var t = getTimeRemaining(endtime);
clock.innerHTML = 'days: ' + t.days + '<br>' + 'hours: ' + t.hours + '<br>' + 'minutes: ' + t.minutes + '<br>' + 'seconds: ' + t.seconds;
if(t.total<=0){
clearInterval(timeinterval);
}
},1000);
}
initializeClock('clockdiv', deadline);
Basically I am trying to capture a selected date from an HTML input by the user and pass it into the deadline variable to create a custom countdown timer.
Also, I am making this post on 11/15/2018, and just to test I have set the deadline variable to 11/16/2018, but the countdown is now negative. How would I fix that?
UPDATE:
The updated HTML is below:
<body>
<div id="formdiv">
<form action="" id="div" method="POST">
<input id="myDate" type="date">
<input type="submit" id="submit" onclick="getTimeRemaining()">
</form>
</div>
<div id="clockdiv"></div>
</body>
And the updated JS is below:
function getTimeRemaining(endtime) {
var deadline = document.getElementById('myDate').value;
var t = Date.parse(endtime).getTime() - (new Date()).getTime();
var seconds = Math.floor( (t/1000) % 60 );
var minutes = Math.floor( (t/1000/60) % 60);
var hours = Math.floor( (t/(1000*60*60)) % 24);
var days = Math.floor( t/(1000*60*60*24) );
return {
'total': t,
'days': days,
'hours': hours,
'minutes': minutes,
'seconds': seconds
};
function initializeClock(id, endtime) {
var clock = document.getElementById(id);
var timeinterval = setInterval(function(){
var t = getTimeRemaining(endtime);
clock.innerHTML = 'days: ' + t.days + '<br>' + 'hours: ' + t.hours + '<br>' + 'minutes: ' + t.minutes + '<br>' + 'seconds: ' + t.seconds;
if(t.total<=0){
clearInterval(timeinterval);
}
},1000);
}
initializeClock('clockdiv', deadline);
}
javascript
asked Nov 16 '18 at 3:37
EataSandwhichEataSandwhich
125
I am trying to figure out the best way to capture a users input from a selected date that will then be generated into a countdown timer. The code below is what I have so far for the Javascript:
var deadline = '2018-11-16';
// Calculate the Time Remaining
function getTimeRemaining(endtime) {
var t = Date.parse(endtime) - Date.parse(new Date());
var seconds = Math.floor( (t/1000) % 60 );
var minutes = Math.floor( (t/1000/60) % 60);
var hours = Math.floor( (t/(1000*60*60)) % 24);
var days = Math.floor( t/(1000*60*60*24) );
return {
'total': t,
'days': days,
'hours': hours,
'minutes': minutes,
'seconds': seconds
};
}
function initializeClock(clockdiv, endtime) {
var clock = document.getElementById(clockdiv);
var timeinterval = setInterval(function(){
var t = getTimeRemaining(endtime);
clock.innerHTML = 'days: ' + t.days + '<br>' + 'hours: ' + t.hours + '<br>' + 'minutes: ' + t.minutes + '<br>' + 'seconds: ' + t.seconds;
if(t.total<=0){
clearInterval(timeinterval);
}
},1000);
}
initializeClock('clockdiv', deadline);
Basically I am trying to capture a selected date from an HTML input by the user and pass it into the deadline variable to create a custom countdown timer.
Also, I am making this post on 11/15/2018, and just to test I have set the deadline variable to 11/16/2018, but the countdown is now negative. How would I fix that?
UPDATE:
The updated HTML is below:
<body>
<div id="formdiv">
<form action="" id="div" method="POST">
<input id="myDate" type="date">
<input type="submit" id="submit" onclick="getTimeRemaining()">
</form>
</div>
<div id="clockdiv"></div>
</body>
And the updated JS is below:
function getTimeRemaining(endtime) {
var deadline = document.getElementById('myDate').value;
var t = Date.parse(endtime).getTime() - (new Date()).getTime();
var seconds = Math.floor( (t/1000) % 60 );
var minutes = Math.floor( (t/1000/60) % 60);
var hours = Math.floor( (t/(1000*60*60)) % 24);
var days = Math.floor( t/(1000*60*60*24) );
return {
'total': t,
'days': days,
'hours': hours,
'minutes': minutes,
'seconds': seconds
};
function initializeClock(id, endtime) {
var clock = document.getElementById(id);
var timeinterval = setInterval(function(){
var t = getTimeRemaining(endtime);
clock.innerHTML = 'days: ' + t.days + '<br>' + 'hours: ' + t.hours + '<br>' + 'minutes: ' + t.minutes + '<br>' + 'seconds: ' + t.seconds;
if(t.total<=0){
clearInterval(timeinterval);
}
},1000);
}
initializeClock('clockdiv', deadline);
}
javascript
javascript
asked Nov 16 '18 at 3:37
EataSandwhichEataSandwhich
125
asked Nov 16 '18 at 3:37
EataSandwhichEataSandwhich
125
edited Nov 16 '18 at 4:53
EataSandwhich
asked Nov 16 '18 at 3:37
EataSandwhichEataSandwhich
125
asked Nov 16 '18 at 3:37
EataSandwhichEataSandwhich
125
asked Nov 16 '18 at 3:37
EataSandwhichEataSandwhich
125
125
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
The problem is in how you are using the javascript Date class.
Try replacing line 1 of getTimeRemaining() with
var t = Date.parse(endtime).getTime() - (new Date()).getTime();
UPDATE in response to your recent update.
You almost had it. But with moving the functions around, you have lost track of a few variables: deadline and endtime are the same thing, but just in different scopes. They can be merged into one. And there is a problem on the final line of getTimeRemaining() (where it calls initializeClock()), because it will re-initialise the clock every time round the interval.
Here is an updated version to try:
HTML
<div id="formdiv">
<input id="myDate" type="date">
<button onclick="window.initializeClock('clockdiv', 'myDate')">Start</button>
</div>
<div id="clockdiv"></div>
Javascript
window.initializeClock = function(clockId, dateId) {
var getTimeRemaining = function(endtime) {
var t = Date.parse(endtime) - (new Date()).getTime();
var seconds = Math.floor( (t/1000) % 60 );
var minutes = Math.floor( (t/1000/60) % 60);
var hours = Math.floor( (t/(1000*60*60)) % 24);
var days = Math.floor( t/(1000*60*60*24) );
return {
'total': t,
'days': days,
'hours': hours,
'minutes': minutes,
'seconds': seconds
};
}
var clock = document.getElementById(clockId);
var deadline = document.getElementById(dateId).value;
var timeinterval = setInterval(function(){
var t = getTimeRemaining(deadline);
clock.innerHTML = 'days: ' + t.days + '<br>' + 'hours: ' + t.hours + '<br>' + 'minutes: ' + t.minutes + '<br>' + 'seconds: ' + t.seconds;
if(t.total<=0){
clearInterval(timeinterval);
}
}, 1000);
}
Note that my earlier answer had an error -- Date.parse() returns the number of milliseconds since 1970, so the call to getTime() was unnecessary. But the (new Date()).getTime() is correct. The vagaries of javascript dates are never-ending!
Here's a link to a working jsfiddle
answered Nov 16 '18 at 3:44
Julian SuggateJulian Suggate
315138
Thank you, @JulianSuggate! I have now had to place the deadline variable within the getTimeRemaining function as well as the initializeClock function and have added a date input and submit input. However, after the date is submitted it appears that the input is being captured since the page refreshes, but the function is not running. New Deadline variable: var deadline = document.getElementById('myDate').value; Form inputs: <input id="myDate" type="date"> <input type="submit" id="submit" onclick="getTimeRemaining()">
– EataSandwhich
Nov 16 '18 at 4:28
May I ask you to edit your questionn, since it sounds like you have changed the code around? And then I'll be happy to edit my answer so it applies to your new solution.
– Julian Suggate
Nov 16 '18 at 4:37
Of course! The post has been updated. I really appreciate it.
– EataSandwhich
Nov 16 '18 at 4:53
I'm just driving but will update when I get home.
– Julian Suggate
Nov 16 '18 at 5:16
Thank you so so much! This has really helped me. Now I just need to figure out how to properly calculate the time remaining while setting the default to 12:00am on the date selected, and how to get the time remaining to be accurate. I am still seeing negative numbers when the date is a day away. I will try to work this out. Again, I really appreciate your quick and detailed responses. They have helped tremendously!
– EataSandwhich
Nov 16 '18 at 19:03
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%2f53331062%2fjavascript-countdown-timer-based-on-user-input%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
The problem is in how you are using the javascript Date class.
Try replacing line 1 of getTimeRemaining() with
var t = Date.parse(endtime).getTime() - (new Date()).getTime();
UPDATE in response to your recent update.
You almost had it. But with moving the functions around, you have lost track of a few variables: deadline and endtime are the same thing, but just in different scopes. They can be merged into one. And there is a problem on the final line of getTimeRemaining() (where it calls initializeClock()), because it will re-initialise the clock every time round the interval.
Here is an updated version to try:
HTML
<div id="formdiv">
<input id="myDate" type="date">
<button onclick="window.initializeClock('clockdiv', 'myDate')">Start</button>
</div>
<div id="clockdiv"></div>
Javascript
window.initializeClock = function(clockId, dateId) {
var getTimeRemaining = function(endtime) {
var t = Date.parse(endtime) - (new Date()).getTime();
var seconds = Math.floor( (t/1000) % 60 );
var minutes = Math.floor( (t/1000/60) % 60);
var hours = Math.floor( (t/(1000*60*60)) % 24);
var days = Math.floor( t/(1000*60*60*24) );
return {
'total': t,
'days': days,
'hours': hours,
'minutes': minutes,
'seconds': seconds
};
}
var clock = document.getElementById(clockId);
var deadline = document.getElementById(dateId).value;
var timeinterval = setInterval(function(){
var t = getTimeRemaining(deadline);
clock.innerHTML = 'days: ' + t.days + '<br>' + 'hours: ' + t.hours + '<br>' + 'minutes: ' + t.minutes + '<br>' + 'seconds: ' + t.seconds;
if(t.total<=0){
clearInterval(timeinterval);
}
}, 1000);
}
Note that my earlier answer had an error -- Date.parse() returns the number of milliseconds since 1970, so the call to getTime() was unnecessary. But the (new Date()).getTime() is correct. The vagaries of javascript dates are never-ending!
Here's a link to a working jsfiddle
answered Nov 16 '18 at 3:44
Julian SuggateJulian Suggate
315138
Thank you, @JulianSuggate! I have now had to place the deadline variable within the getTimeRemaining function as well as the initializeClock function and have added a date input and submit input. However, after the date is submitted it appears that the input is being captured since the page refreshes, but the function is not running. New Deadline variable: var deadline = document.getElementById('myDate').value; Form inputs: <input id="myDate" type="date"> <input type="submit" id="submit" onclick="getTimeRemaining()">
– EataSandwhich
Nov 16 '18 at 4:28
May I ask you to edit your questionn, since it sounds like you have changed the code around? And then I'll be happy to edit my answer so it applies to your new solution.
– Julian Suggate
Nov 16 '18 at 4:37
Of course! The post has been updated. I really appreciate it.
– EataSandwhich
Nov 16 '18 at 4:53
I'm just driving but will update when I get home.
– Julian Suggate
Nov 16 '18 at 5:16
Thank you so so much! This has really helped me. Now I just need to figure out how to properly calculate the time remaining while setting the default to 12:00am on the date selected, and how to get the time remaining to be accurate. I am still seeing negative numbers when the date is a day away. I will try to work this out. Again, I really appreciate your quick and detailed responses. They have helped tremendously!
– EataSandwhich
Nov 16 '18 at 19:03
add a comment |
The problem is in how you are using the javascript Date class.
Try replacing line 1 of getTimeRemaining() with
var t = Date.parse(endtime).getTime() - (new Date()).getTime();
UPDATE in response to your recent update.
You almost had it. But with moving the functions around, you have lost track of a few variables: deadline and endtime are the same thing, but just in different scopes. They can be merged into one. And there is a problem on the final line of getTimeRemaining() (where it calls initializeClock()), because it will re-initialise the clock every time round the interval.
Here is an updated version to try:
HTML
<div id="formdiv">
<input id="myDate" type="date">
<button onclick="window.initializeClock('clockdiv', 'myDate')">Start</button>
</div>
<div id="clockdiv"></div>
Javascript
window.initializeClock = function(clockId, dateId) {
var getTimeRemaining = function(endtime) {
var t = Date.parse(endtime) - (new Date()).getTime();
var seconds = Math.floor( (t/1000) % 60 );
var minutes = Math.floor( (t/1000/60) % 60);
var hours = Math.floor( (t/(1000*60*60)) % 24);
var days = Math.floor( t/(1000*60*60*24) );
return {
'total': t,
'days': days,
'hours': hours,
'minutes': minutes,
'seconds': seconds
};
}
var clock = document.getElementById(clockId);
var deadline = document.getElementById(dateId).value;
var timeinterval = setInterval(function(){
var t = getTimeRemaining(deadline);
clock.innerHTML = 'days: ' + t.days + '<br>' + 'hours: ' + t.hours + '<br>' + 'minutes: ' + t.minutes + '<br>' + 'seconds: ' + t.seconds;
if(t.total<=0){
clearInterval(timeinterval);
}
}, 1000);
}
Note that my earlier answer had an error -- Date.parse() returns the number of milliseconds since 1970, so the call to getTime() was unnecessary. But the (new Date()).getTime() is correct. The vagaries of javascript dates are never-ending!
Here's a link to a working jsfiddle
answered Nov 16 '18 at 3:44
Julian SuggateJulian Suggate
315138
Thank you, @JulianSuggate! I have now had to place the deadline variable within the getTimeRemaining function as well as the initializeClock function and have added a date input and submit input. However, after the date is submitted it appears that the input is being captured since the page refreshes, but the function is not running. New Deadline variable: var deadline = document.getElementById('myDate').value; Form inputs: <input id="myDate" type="date"> <input type="submit" id="submit" onclick="getTimeRemaining()">
– EataSandwhich
Nov 16 '18 at 4:28
May I ask you to edit your questionn, since it sounds like you have changed the code around? And then I'll be happy to edit my answer so it applies to your new solution.
– Julian Suggate
Nov 16 '18 at 4:37
Of course! The post has been updated. I really appreciate it.
– EataSandwhich
Nov 16 '18 at 4:53
I'm just driving but will update when I get home.
– Julian Suggate
Nov 16 '18 at 5:16
Thank you so so much! This has really helped me. Now I just need to figure out how to properly calculate the time remaining while setting the default to 12:00am on the date selected, and how to get the time remaining to be accurate. I am still seeing negative numbers when the date is a day away. I will try to work this out. Again, I really appreciate your quick and detailed responses. They have helped tremendously!
– EataSandwhich
Nov 16 '18 at 19:03
add a comment |
The problem is in how you are using the javascript Date class.
Try replacing line 1 of getTimeRemaining() with
var t = Date.parse(endtime).getTime() - (new Date()).getTime();
UPDATE in response to your recent update.
You almost had it. But with moving the functions around, you have lost track of a few variables: deadline and endtime are the same thing, but just in different scopes. They can be merged into one. And there is a problem on the final line of getTimeRemaining() (where it calls initializeClock()), because it will re-initialise the clock every time round the interval.
Here is an updated version to try:
HTML
<div id="formdiv">
<input id="myDate" type="date">
<button onclick="window.initializeClock('clockdiv', 'myDate')">Start</button>
</div>
<div id="clockdiv"></div>
Javascript
window.initializeClock = function(clockId, dateId) {
var getTimeRemaining = function(endtime) {
var t = Date.parse(endtime) - (new Date()).getTime();
var seconds = Math.floor( (t/1000) % 60 );
var minutes = Math.floor( (t/1000/60) % 60);
var hours = Math.floor( (t/(1000*60*60)) % 24);
var days = Math.floor( t/(1000*60*60*24) );
return {
'total': t,
'days': days,
'hours': hours,
'minutes': minutes,
'seconds': seconds
};
}
var clock = document.getElementById(clockId);
var deadline = document.getElementById(dateId).value;
var timeinterval = setInterval(function(){
var t = getTimeRemaining(deadline);
clock.innerHTML = 'days: ' + t.days + '<br>' + 'hours: ' + t.hours + '<br>' + 'minutes: ' + t.minutes + '<br>' + 'seconds: ' + t.seconds;
if(t.total<=0){
clearInterval(timeinterval);
}
}, 1000);
}
Note that my earlier answer had an error -- Date.parse() returns the number of milliseconds since 1970, so the call to getTime() was unnecessary. But the (new Date()).getTime() is correct. The vagaries of javascript dates are never-ending!
Here's a link to a working jsfiddle
answered Nov 16 '18 at 3:44
Julian SuggateJulian Suggate
315138
The problem is in how you are using the javascript Date class.
Try replacing line 1 of getTimeRemaining() with
var t = Date.parse(endtime).getTime() - (new Date()).getTime();
UPDATE in response to your recent update.
You almost had it. But with moving the functions around, you have lost track of a few variables: deadline and endtime are the same thing, but just in different scopes. They can be merged into one. And there is a problem on the final line of getTimeRemaining() (where it calls initializeClock()), because it will re-initialise the clock every time round the interval.
Here is an updated version to try:
HTML
<div id="formdiv">
<input id="myDate" type="date">
<button onclick="window.initializeClock('clockdiv', 'myDate')">Start</button>
</div>
<div id="clockdiv"></div>
Javascript
window.initializeClock = function(clockId, dateId) {
var getTimeRemaining = function(endtime) {
var t = Date.parse(endtime) - (new Date()).getTime();
var seconds = Math.floor( (t/1000) % 60 );
var minutes = Math.floor( (t/1000/60) % 60);
var hours = Math.floor( (t/(1000*60*60)) % 24);
var days = Math.floor( t/(1000*60*60*24) );
return {
'total': t,
'days': days,
'hours': hours,
'minutes': minutes,
'seconds': seconds
};
}
var clock = document.getElementById(clockId);
var deadline = document.getElementById(dateId).value;
var timeinterval = setInterval(function(){
var t = getTimeRemaining(deadline);
clock.innerHTML = 'days: ' + t.days + '<br>' + 'hours: ' + t.hours + '<br>' + 'minutes: ' + t.minutes + '<br>' + 'seconds: ' + t.seconds;
if(t.total<=0){
clearInterval(timeinterval);
}
}, 1000);
}
Note that my earlier answer had an error -- Date.parse() returns the number of milliseconds since 1970, so the call to getTime() was unnecessary. But the (new Date()).getTime() is correct. The vagaries of javascript dates are never-ending!
Here's a link to a working jsfiddle
answered Nov 16 '18 at 3:44
Julian SuggateJulian Suggate
315138
edited Nov 16 '18 at 6:02
answered Nov 16 '18 at 3:44
Julian SuggateJulian Suggate
315138
answered Nov 16 '18 at 3:44
Julian SuggateJulian Suggate
315138
answered Nov 16 '18 at 3:44
Julian SuggateJulian Suggate
315138
315138
Thank you, @JulianSuggate! I have now had to place the deadline variable within the getTimeRemaining function as well as the initializeClock function and have added a date input and submit input. However, after the date is submitted it appears that the input is being captured since the page refreshes, but the function is not running. New Deadline variable: var deadline = document.getElementById('myDate').value; Form inputs: <input id="myDate" type="date"> <input type="submit" id="submit" onclick="getTimeRemaining()">
– EataSandwhich
Nov 16 '18 at 4:28
May I ask you to edit your questionn, since it sounds like you have changed the code around? And then I'll be happy to edit my answer so it applies to your new solution.
– Julian Suggate
Nov 16 '18 at 4:37
Of course! The post has been updated. I really appreciate it.
– EataSandwhich
Nov 16 '18 at 4:53
I'm just driving but will update when I get home.
– Julian Suggate
Nov 16 '18 at 5:16
Thank you so so much! This has really helped me. Now I just need to figure out how to properly calculate the time remaining while setting the default to 12:00am on the date selected, and how to get the time remaining to be accurate. I am still seeing negative numbers when the date is a day away. I will try to work this out. Again, I really appreciate your quick and detailed responses. They have helped tremendously!
– EataSandwhich
Nov 16 '18 at 19:03
add a comment |
Thank you, @JulianSuggate! I have now had to place the deadline variable within the getTimeRemaining function as well as the initializeClock function and have added a date input and submit input. However, after the date is submitted it appears that the input is being captured since the page refreshes, but the function is not running. New Deadline variable: var deadline = document.getElementById('myDate').value; Form inputs: <input id="myDate" type="date"> <input type="submit" id="submit" onclick="getTimeRemaining()">
– EataSandwhich
Nov 16 '18 at 4:28
May I ask you to edit your questionn, since it sounds like you have changed the code around? And then I'll be happy to edit my answer so it applies to your new solution.
– Julian Suggate
Nov 16 '18 at 4:37
Of course! The post has been updated. I really appreciate it.
– EataSandwhich
Nov 16 '18 at 4:53
I'm just driving but will update when I get home.
– Julian Suggate
Nov 16 '18 at 5:16
Thank you so so much! This has really helped me. Now I just need to figure out how to properly calculate the time remaining while setting the default to 12:00am on the date selected, and how to get the time remaining to be accurate. I am still seeing negative numbers when the date is a day away. I will try to work this out. Again, I really appreciate your quick and detailed responses. They have helped tremendously!
– EataSandwhich
Nov 16 '18 at 19:03
Thank you, @JulianSuggate! I have now had to place the deadline variable within the getTimeRemaining function as well as the initializeClock function and have added a date input and submit input. However, after the date is submitted it appears that the input is being captured since the page refreshes, but the function is not running. New Deadline variable: var deadline = document.getElementById('myDate').value; Form inputs: <input id="myDate" type="date"> <input type="submit" id="submit" onclick="getTimeRemaining()">
– EataSandwhich
Nov 16 '18 at 4:28
Thank you, @JulianSuggate! I have now had to place the deadline variable within the getTimeRemaining function as well as the initializeClock function and have added a date input and submit input. However, after the date is submitted it appears that the input is being captured since the page refreshes, but the function is not running. New Deadline variable: var deadline = document.getElementById('myDate').value; Form inputs: <input id="myDate" type="date"> <input type="submit" id="submit" onclick="getTimeRemaining()">
– EataSandwhich
Nov 16 '18 at 4:28
May I ask you to edit your questionn, since it sounds like you have changed the code around? And then I'll be happy to edit my answer so it applies to your new solution.
– Julian Suggate
Nov 16 '18 at 4:37
May I ask you to edit your questionn, since it sounds like you have changed the code around? And then I'll be happy to edit my answer so it applies to your new solution.
– Julian Suggate
Nov 16 '18 at 4:37
Of course! The post has been updated. I really appreciate it.
– EataSandwhich
Nov 16 '18 at 4:53
Of course! The post has been updated. I really appreciate it.
– EataSandwhich
Nov 16 '18 at 4:53
I'm just driving but will update when I get home.
– Julian Suggate
Nov 16 '18 at 5:16
I'm just driving but will update when I get home.
– Julian Suggate
Nov 16 '18 at 5:16
Thank you so so much! This has really helped me. Now I just need to figure out how to properly calculate the time remaining while setting the default to 12:00am on the date selected, and how to get the time remaining to be accurate. I am still seeing negative numbers when the date is a day away. I will try to work this out. Again, I really appreciate your quick and detailed responses. They have helped tremendously!
– EataSandwhich
Nov 16 '18 at 19:03
Thank you so so much! This has really helped me. Now I just need to figure out how to properly calculate the time remaining while setting the default to 12:00am on the date selected, and how to get the time remaining to be accurate. I am still seeing negative numbers when the date is a day away. I will try to work this out. Again, I really appreciate your quick and detailed responses. They have helped tremendously!
– EataSandwhich
Nov 16 '18 at 19:03
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%2f53331062%2fjavascript-countdown-timer-based-on-user-input%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
