Like the title says, I need to get the difference between two dates and display the hours, minutes, seconds that counts down to the finish date. I have this:
function timer(){
'use strict'
var date1 = new Date().getTime();
var date2 = new Date("05/29/2017").getTime();
var diff = date2 - date1;
var seconds = diff / 1000;
var minutes = (diff / 1000) / 60;
var hours = minutes / 60;
var message = 'Hours: ' + Math.floor(hours) + " Minutes: " + Math.floor(minutes) + " Seconds: " + Math.floor(seconds);
var output = document.getElementById('output');
if (output.textContent !== undefined) {
output.textContent = message;
} else {
output.innerText = message;
}
}
setInterval("timer()", 1000);
window.onload = timer;<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>hi</title>
<!--[if lt IE 9]>
<script src=".js"></script>
<![endif]-->
<link rel="stylesheet" href="css/form.css">
</head>
<body>
<!-- auction.html -->
<form action="#" method="post" id="theForm">
<fieldset><legend>Auction ends on May 29, 2017</legend>
<p>Refresh page for updated times.</p>
<div id="output"></div>
<input type="submit" value="Refresh" id="submit">
</fieldset>
</form>
<script src="js/auction.js"></script>
</body>
</html>Like the title says, I need to get the difference between two dates and display the hours, minutes, seconds that counts down to the finish date. I have this:
function timer(){
'use strict'
var date1 = new Date().getTime();
var date2 = new Date("05/29/2017").getTime();
var diff = date2 - date1;
var seconds = diff / 1000;
var minutes = (diff / 1000) / 60;
var hours = minutes / 60;
var message = 'Hours: ' + Math.floor(hours) + " Minutes: " + Math.floor(minutes) + " Seconds: " + Math.floor(seconds);
var output = document.getElementById('output');
if (output.textContent !== undefined) {
output.textContent = message;
} else {
output.innerText = message;
}
}
setInterval("timer()", 1000);
window.onload = timer;<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>hi</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="css/form.css">
</head>
<body>
<!-- auction.html -->
<form action="#" method="post" id="theForm">
<fieldset><legend>Auction ends on May 29, 2017</legend>
<p>Refresh page for updated times.</p>
<div id="output"></div>
<input type="submit" value="Refresh" id="submit">
</fieldset>
</form>
<script src="js/auction.js"></script>
</body>
</html>The instructions for my assignment state that I need to: "Choose an end date in the future (several weeks after assignment is due) and use UTC. Display the hours, minutes, and seconds left until the auction ends." I'm kind of lost on how to implement the UTC and create a proper countdown? I'm not even sure if I did any of it right (I am just starting to learn j.s). How should I fix my code?
Share Improve this question asked Feb 25, 2017 at 10:03 user7621056user7621056 2 |2 Answers
Reset to default 14In your code you have:
var date1 = new Date().getTime();
There's no need to use getTime in this case. But it is helpful to use meaningful variable names:
var now = new Date();
Then there's:
var date2 = new Date("05/29/2017").getTime();
Don't use the Date constructor (or Date.parse) to parse strings as it's mostly implementation dependent and inconsistent. If you have a specific date, pass values directly to the constructor.
Regarding "use UTC", that's a bit confusing as ECMAScript Date objects are UTC. They use the host timezone offset to calculate an internal UTC time value, and also to display "local" date and time values. The only way I can interpret "use UTC" is to use Date.UTC to create a date instance, e.g.:
var endDate = new Date(Date.UTC(2017,4,29)); // 2017-05-29T00:00:00Z
Now you can get the difference between then an now using:
var diff = endDate - now;
When trying to get the hours, minutes and seconds you have:
var seconds = diff / 1000;
var minutes = (diff / 1000) / 60;
var hours = minutes / 60;
That converts the entire difference to each of hours, minutes and seconds so the total time is about 3 times what it should be. What you need is just the components, so:
var hours = Math.floor(diff / 3.6e5);
var minutes = Math.floor(diff % 3.6e5) / 6e4);
var seconds = Math.floor(diff % 6e4) / 1000;
Putting it all together in one function:
function timeLeft() {
var now = new Date();
var endDate = new Date(Date.UTC(2017,4,29)); // 2017-05-29T00:00:00Z
var diff = endDate - now;
var hours = Math.floor(diff / 3.6e6);
var minutes = Math.floor((diff % 3.6e6) / 6e4);
var seconds = Math.floor((diff % 6e4) / 1000);
console.log('Time remaining to ' + endDate.toISOString() +
' or\n' + endDate.toString() + ' local is\n' +
hours + ' hours, ' + minutes + ' minutes and ' +
seconds + ' seconds');
}
timeLeft()There are many, many questions and answers here about timers and date differences, do some searches.
You should really use momentjs for any datetime operation in javascript
var now = "04/09/2013 15:00:00";
var then = "04/09/2013 14:20:30";
moment.utc(moment(now,"DD/MM/YYYY HH:mm:ss").diff(moment(then,"DD/MM/YYYY HH:mm:ss"))).format("HH:mm:ss")
// outputs: "00:39:30"
Date.UTCfunction. (b) Ask yourself whether your seconds, minutes, hours calculation is reasonable at all. I, as a user, would not expect an output such as "3 hours equals 180 minutes equals 10,800 seconds" (that gives me no valuable information), but rather a cumulated output such as "1 hours and 50 minutes and 20 seconds". In that case you need to re-think you calculation. – qqilihq Commented Feb 25, 2017 at 10:20