How to format time properly - javascript

I am trying to format time. I have a function that returns seconds, minutes, and hours, but I have an issue with the minutes. After the minute hits 60, I would like to reset the minute time to 0 and restart the clock. Any ideas?
function formatTime(seconds) {
hours = Math.floor((seconds / 60) / 60);
hours = (hours >= 10) ? minutes : "0" + hours;
minutes = Math.floor(seconds / 60);
minutes = (minutes >= 10) ? minutes : "0" + minutes;
seconds = Math.floor(seconds % 60);
seconds = (seconds >= 10) ? seconds : "0" + seconds;
if (duration >= hours) {
return hours + ":" + minutes + ":" + seconds;
} else {
return minutes + ":" + seconds;
}
}
If you have any other questions, let me know. This function is being used to format an audio clip's duration counter.

You should do the following:
count the hours
substract hours * 60 * 60 from seconds
count the minutes
substract minutes * 60 from seconds
the remainder are the seconds
By the way, for time and date calculations, I absolutely recommend MomentJS.

Thank you for all your help guys. Based off many recommendations, I will look towards using momentjs. However with the help of some of these posts, I also managed to get my format time function to work. It now does what I need and looks like this:
function formatTime(seconds) {
hours = Math.floor((seconds / 3600));
hours = (hours >= 10) ? minutes : "0" + hours;
minutes = Math.floor((seconds - (hours * 3600)) / 60);
minutes = (minutes >= 10) ? minutes : "0" + minutes;
seconds = Math.floor(seconds - hours * 3600) - (minutes * 60);
seconds = (seconds >= 10) ? seconds : "0" + seconds;
if (duration >= hours) {
return hours + ":" + minutes + ":" + seconds;
} else {
return minutes + ":" + seconds;
}
}

Related

setInterval timer result not updating on innerHTML

I have a simple countdown code running on Javascript, and when I run this code,
setInterval(function() {
var currentTime = new Date();
var futureTime = new Date(countDownDate);
var s = futureTime.getTime() - currentTime.getTime();
(seconds = parseInt((s / 1000) % 60)),
(minutes = parseInt((s / (1000 * 60)) % 60)),
(hours = parseInt((s / (1000 * 60 * 60)) % 24));
hours = hours < 10 ? "0" + hours : hours;
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
var documenttitle = hours + ":" + minutes + ":" + seconds;
console.log(documenttitle);
var remainingtime = documenttitle
document.getElementById("remaining").innerHTML = remainingtime;
}, 500);
the results from console.log works fine,
but innerHTML constantly glitches. Flashing two different numbers but not updating. How do I fix this?
I don't see any problems with your code, the code below it's the same as your code but with the variable countDownDate defined.
Maybe it's a problem with something else in your code.
var countDownDate = new Date();
countDownDate.setMinutes ( countDownDate.getMinutes() + 30 );
setInterval(function() {
var currentTime = new Date();
var futureTime = new Date(countDownDate);
var s = futureTime.getTime() - currentTime.getTime();
(seconds = parseInt((s / 1000) % 60)),
(minutes = parseInt((s / (1000 * 60)) % 60)),
(hours = parseInt((s / (1000 * 60 * 60)) % 24));
hours = hours < 10 ? "0" + hours : hours;
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
var documenttitle = hours + ":" + minutes + ":" + seconds;
console.log(documenttitle);
var remainingtime = documenttitle
document.getElementById("remaining").innerHTML = remainingtime;
}, 500);
<div id="remaining">
0
</div>

output time in hh:mm:ss format relative to how many seconds

I have created a function within JavaScript which converts seconds to the format hh:mm:ss. It works fine at the moment, however, I'd like it to be a little bit more refined than it currently is.
This is what I have at the moment:
convertTime(secs){
var sec = parseInt(secs, 10),
hours = Math.floor(sec / 3600),
minutes = Math.floor((sec - (hours * 3600)) / 60),
seconds = sec - (hours * 3600) - (minutes * 60);
if(hours < 10){ hours = "0" + hours; }
if(minutes < 10){ minutes = "0" + minutes; }
if(seconds < 10){ seconds = "0" + seconds; }
return hours + ":" + minutes + ":" + seconds;
}
// this will output 00:02:03
convertTime(123);
However, I would prefer the returned outputs to be something along the lines of this instead:
11 -> 0:11
60 -> 1:00
1200 -> 20:00
3600 -> 1:00:00
36000 -> 10:00:00
I have made countless attempts at creating (and finding) a function which can do something similar, but all JavaScript conversions I've come across (and / or made) are always done in the format hh:mm:ss, or are just output incorrectly.
All help is really appreciated,
Cheers.
Just change your return statement to
return parseInt( hours ) > 0 ? ( hours + ":" + minutes + ":" + seconds ) : ( minutes + ":" + seconds ) ;
Simply don't return hours if hours is not greater than 0
In case, your minutes need to be trimmed if there are no hours then update your padding logic to
if(hours > 0 && minutes < 10){ minutes = "0" + minutes; }
A more compact version of #gurvinder372 response
return (parseInt(hours) > 0 ? hours + ":" : "") + minutes + ":" + seconds;

How can we make the minutes value starts from zero after seconds reached to 60?

I am working on project which need to show some delay time in the format of "hh:mm:ss". When the seconds value reached to 60(means minutes value is 1), then the seconds value again starts from zero. But, when the minutes value reached to 60(means hours value is 1), then the minutes is showing the conitnuous value(61,62,63.....). I need to show the minutes value starts from zero when the hours value is greater than zero. How can I acheive this? Please help me and thanks in advance. Below the code which I have written.
var timer = 0;
setInterval(function () {
var hours = parseInt(timer / 3600, 10);
var minutes = parseInt(timer / 60, 10);
var seconds = parseInt(timer % 60, 10);
hours = hours < 10 ? "0" + hours : hours;
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
$scope.delay = $scope.delayTime.label + ": " + hours + ':' + minutes + ':' + seconds;
if (++timer < 0) {
$scope.delayTime = false;
}
}, 1000);
Just change your calc on minutes to (timer / 60) % 60:
var timer = 3600 - 5;
setInterval(function () {
var hours = parseInt(timer / 3600, 10);
var minutes = parseInt((timer / 60) % 60, 10);
var seconds = parseInt(timer % 60, 10);
hours = hours < 10 ? "0" + hours : hours;
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
//$scope.delay = $scope.delayTime.label + ": " + hours + ':' + minutes + ':' + seconds;
console.log('hours ' + hours + ' minutes ' + minutes + ' seconds ' + seconds);
if (++timer < 0) {
//$scope.delayTime = false;
}
}, 1000);
Have you tried modulo? Like
59 % 60 -> 59
60 % 60 -> 0
61 % 60 -> 1
62 % 60 -> 2
...
Just add minutes = minutes % 60.
Subtract the minutes already contained in the hours to properly calculate the minutes:
var hours = parseInt(timer / 3600, 10);
var minutes = parseInt(timer / 60 - hours * 60, 10);
var seconds = parseInt(timer % 60, 10);
Actually, your minutes variable contains your whole time in minutes (containing hours):
var minutes = parseInt((timer / 60) % 60, 10);
Here's something I want to add to rasmeister's answer:
Since many browsers (especially mobile browsers) pause javascript when the browser tab is inactive, I recommend you to use Date objects:
var start = +new Date(); // casting Date to number results in timestamp
setInterval(function () {
// get elapsed time in seconds
var timer = Math.round((+new Date() - start) / 1000);
var hours = parseInt(timer / 3600, 10);
var minutes = parseInt((timer / 60) % 60, 10);
var seconds = parseInt(timer % 60, 10);
hours = hours < 10 ? "0" + hours : hours;
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
//$scope.delay = $scope.delayTime.label + ": " + hours + ':' + minutes + ':' + seconds;
console.log('hours ' + hours + ' minutes ' + minutes + ' seconds ' + seconds);
if (timer < 0) {
//$scope.delayTime = false;
}
}, 1000);

jQuery counter to count up Result (Days HH:mm:ss)

I want a jQuery function similar to countTo or a pure javascript function to count to starting to (seconds or decimal time)... and output days HH:MM:SS
convert_seconds(2681623) => output "31D 00:53:43"
or decimal Hours
convert_decimalHours(25.555) => output "1D 01:33:18" (I think Its not correct but is something like that kkkkk)
I prefer seconds to be more accurate and easier to manipulate...
here is something that I Tried...
http://jsfiddle.net/5LWgN/105/
and must be a live counter 1 by 1 seconds counting
String.prototype.toHHMMSS = function () {
var sec_num = parseInt(this, 10); // don't forget the second parm
var hours = Math.floor(sec_num / 3600);
var minutes = Math.floor((sec_num - (hours * 3600)) / 60);
var seconds = sec_num - (hours * 3600) - (minutes * 60);
if (hours < 10) {
hours = "0" + hours;
}
if (minutes < 10) {
minutes = "0" + minutes;
}
if (seconds < 10) {
seconds = "0" + seconds;
}
var time = hours + ':' + minutes + ':' + seconds;
return time;
}
var count = '2681623';
var counter = setInterval(timer, 1000);
function timer() {
console.log(count);
if (parseInt(count) <= 0) {
clearInterval(counter);
return;
}
var temp = count.toHHMMSS();
count = (parseInt(count) + 1).toString();
$('#timer').html(temp);
}
You have some errors in the conversion step, and someone has asked before, see here.
var hours = parseInt( totalSec / 3600 ) % 24;
var minutes = parseInt( totalSec / 60 ) % 60;
var seconds = totalSec % 60;
var result = (hours < 10 ? "0" + hours : hours) + "-" + (minutes < 10 ? "0" + minutes : minutes) + "-" + (seconds < 10 ? "0" + seconds : seconds);

JavaScript timer to count down from a certain time for a number of hours

I have created a countdown timer. The problem is, I am wanting it to count down from midnight clock 00:00:00 until clock 17:00:00.
I have made the timer count down starting at 17 hours 00 minutes 00 seconds and it works a treat, but I need a way to take off the time from 00:00:00 to present from the 17 hours.
Here is my JS code
function startTimer(duration, display) {
var start = Date.now(),
diff,
hours,
minutes,
seconds;
function timer() {
// get the number of seconds that have elapsed since
// startTimer() was called
diff = duration - (((Date.now() - start) / 1000) | 0);
// Setting and displaying hours, minutes, seconds
hours = (diff / 360) | 0;
minutes = (diff / 60) | 0;
seconds = (diff % 60) | 0;
hours = hours < 10 ? "0" + hours : hours;
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.textContent = hours + ":" + minutes + ":" + seconds;
if (diff <= 0) {
// add one second so that the count down starts at the full duration
// example 17:00:00 not 16:59:59
start = Date.now() + 1000;
}
};
// don't want to wait a full second before the timer starts
timer();
setInterval(timer, 1000);
}
window.onload = function () {
var timeLeft = 3600 * 17,
display = document.querySelector('#time');
startTimer(timeLeft, display);
};
Here is my HTML code:
<div>Order by: <span id="time"></span> for Next Day Delivery.</div>
My thoughts were to get the timeLeft = 3600 * 17 and take off the diff.
Here is your corrected code : it was easier to save the timestamp of 17h of the current day (next day if we are after 17h) and compare it to the current timestamp. And to calculate the number of hours left, you have to divide the number of seconds by 3600 (60*60) and not 360
function startTimer(display) {
var date = new Date();
var h17 = new Date(date.getFullYear(), date.getMonth(), date.getDate(), 17);
if(date.getHours() >= 17) {
h17.setDate(h17.getDate()+1);
}
h17 = h17.getTime();
var diff,
hours,
minutes,
seconds;
function timer() {
diff = (((h17 - Date.now()) / 1000) | 0);
// Setting and displaying hours, minutes, seconds
hours = (diff / 3600) | 0;
minutes = ((diff % 3600) / 60) | 0;
seconds = (diff % 60) | 0;
hours = hours < 10 ? "0" + hours : hours;
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.textContent = hours + ":" + minutes + ":" + seconds;
};
timer();
setInterval(timer, 1000);
}
window.onload = function () {
var timeLeft = 3600 * 17,
display = document.querySelector('#time');
startTimer(display);
};
<div>Order by: <span id="time"></span> for Next Day Delivery.</div>
jsFiddle
PS : I didn't test if the function work correctly after 17h but it should

Categories