We Keep Coding

Javascript countdown timer should stop at 00:00

I am working on the countdown timer and I have found this code which pretty much what I need except I dont want to restart the timer when it reaches 00:00. I tried to make changes but wasn't successfull.
Here is the JsFiddle code
<div id="countdown">1:00</div>
var seconds;
var temp;
var GivenTime=document.getElementById('countdown').innerHTML
console.log(GivenTime)
function countdown() {
time = document.getElementById('countdown').innerHTML;
timeArray = time.split(':')
seconds = timeToSeconds(timeArray);
if (seconds == '') {
temp = document.getElementById('countdown');
temp.innerHTML = GivenTime;
time = document.getElementById('countdown').innerHTML;
timeArray = time.split(':')
seconds = timeToSeconds(timeArray);
}
seconds--;
temp = document.getElementById('countdown');
temp.innerHTML= secondsToTime(seconds);
timeoutMyOswego = setTimeout(countdown, 1000);
}
function timeToSeconds(timeArray) {
var minutes = (timeArray[0] * 1);
var seconds = (minutes * 60) + (timeArray[1] * 1);
return seconds;
}
function secondsToTime(secs) {
var hours = Math.floor(secs / (60 * 60));
hours = hours < 10 ? '0' + hours : hours;
var divisor_for_minutes = secs % (60 * 60);
var minutes = Math.floor(divisor_for_minutes / 60);
minutes = minutes < 10 ? '0' + minutes : minutes;
var divisor_for_seconds = divisor_for_minutes % 60;
var seconds = Math.ceil(divisor_for_seconds);
seconds = seconds < 10 ? '0' + seconds : seconds;
return minutes + ':' + seconds;
//hours + ':' +
}
countdown();

You could simply use clearTimeout function in your countdown when it reaches 00:00
Adding this if condition in your countdown is all you need.
if (secondsToTime(seconds) == '00:00') {
clearTimeout(timeoutMyOswego); //stop timer
}
Working Demo:
var seconds;
var temp;
var GivenTime = document.getElementById('countdown').innerHTML
function countdown() {
time = document.getElementById('countdown').innerHTML;
timeArray = time.split(':')
seconds = timeToSeconds(timeArray);
if (seconds == '') {
temp = document.getElementById('countdown');
temp.innerHTML = GivenTime;
time = document.getElementById('countdown').innerHTML;
timeArray = time.split(':')
seconds = timeToSeconds(timeArray);
}
seconds--;
temp = document.getElementById('countdown');
temp.innerHTML = secondsToTime(seconds);
var timeoutMyOswego = setTimeout(countdown, 1000);
if (secondsToTime(seconds) == '00:00') {
clearTimeout(timeoutMyOswego); //stop timer
console.log('Time"s UP')
}
}
function timeToSeconds(timeArray) {
var minutes = (timeArray[0] * 1);
var seconds = (minutes * 60) + (timeArray[1] * 1);
return seconds;
}
function secondsToTime(secs) {
var hours = Math.floor(secs / (60 * 60));
hours = hours < 10 ? '0' + hours : hours;
var divisor_for_minutes = secs % (60 * 60);
var minutes = Math.floor(divisor_for_minutes / 60);
minutes = minutes < 10 ? '0' + minutes : minutes;
var divisor_for_seconds = divisor_for_minutes % 60;
var seconds = Math.ceil(divisor_for_seconds);
seconds = seconds < 10 ? '0' + seconds : seconds;
return minutes + ':' + seconds;
//hours + ':' +
}
countdown();
<div id="countdown">00:10</div>

You can try replacing the code which is responsible for restarting the timer.
But doing only that will result in timer going to negative values.
So as #Always Helping suggested, you need to add the code to stop the timer.
var seconds, temp;
var GivenTime = document.getElementById('countdown').innerHTML;
function countdown() {
time = document.getElementById('countdown').innerHTML;
timeArray = time.split(':')
seconds = timeToSeconds(timeArray);
console.log(seconds);
// Do something when the timer is out
if (seconds === 0) {
clearTimeout(timeoutMyOswego);
return;
}
seconds--;
temp = document.getElementById('countdown');
temp.innerHTML = secondsToTime(seconds);
timeoutMyOswego = setTimeout(countdown, 1000);
};
countdown();
function timeToSeconds(timeArray) {
var minutes = (timeArray[0] * 1);
var seconds = (minutes * 60) + (timeArray[1] * 1);
return seconds;
}
function secondsToTime(secs) {
var hours = Math.floor(secs / (60 * 60));
hours = hours < 10 ? '0' + hours : hours;
var divisor_for_minutes = secs % (60 * 60);
var minutes = Math.floor(divisor_for_minutes / 60);
minutes = minutes < 10 ? '0' + minutes : minutes;
var divisor_for_seconds = divisor_for_minutes % 60;
var seconds = Math.ceil(divisor_for_seconds);
seconds = seconds < 10 ? '0' + seconds : seconds;
return minutes + ':' + seconds;
}
<div id="countdown">00:05</div>

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);

How to format time properly

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;
}
}

How to format HTML5 audio's currentTime property with Javascript

I am trying to format the HTML5 currentTime property using the following equation:
var s = parseInt(audio.currentTime % 60);
var m = parseInt((audio.currentTime / 60) % 60);
duration.innerHTML = m + ':' + s ;
which works, only I want the seconds 1-9 to be displayed as :01 - :09 instead of :1 and :9 as they currently do. How would I write this code?

That may help you, I used that:
function formatTime(seconds) {
minutes = Math.floor(seconds / 60);
minutes = (minutes >= 10) ? minutes : "0" + minutes;
seconds = Math.floor(seconds % 60);
seconds = (seconds >= 10) ? seconds : "0" + seconds;
return minutes + ":" + seconds;
}

if (m < 10) m = '0' + m;
if (s < 10) s = '0' + s;

You just have to add a single 0 if s is less than 10. After
var m = parseInt((audio.currentTime / 60) % 60);
put
if (s < 10) {
s = '0' + s;
}
The code is pretty straightforward.

var currentTime = audio.currentTime | 0;
var minutes = "0" + Math.floor(currentTime / 60);
var seconds = "0" + (currentTime - minutes * 60);
var cur = minutes.substr(-2) + ":" + seconds.substr(-2);

On TypeScript:
formatTime(seconds: number): string {
let minutes: any = Math.floor(seconds / 60);
let secs: any = Math.floor(seconds % 60);
if (minutes < 10) {
minutes = '0' + minutes;
}
if (secs < 10) {
secs = '0' + secs;
}
return minutes + ':' + secs;
}