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 to fix javascript timer so that seconds run up to 60 and then reset to zero

I'm setting up a timer, but currently the seconds run into the thousands instead of resetting to zero after 60 seconds. Is there a quick fix for this?
This is the code I'm using:
var running = 0;
function startPause(){
if(running == 0){
running = 1;
increment();
document.getElementById("start").innerHTML = "Pause";
}else{
running = 0;
document.getElementById("start").innerHTML = "Resume";
}
};
function reset(){
running = 0;
time = 0;
document.getElementById("output").innerHTML = "00:00";
document.getElementById("start").innerHTML = "Start";
};
function increment(){
if(running == 1){
setTimeout(function(){
time++;
var mins = Math.floor(time / 10 / 60);
if(mins <= 9){
mins = "0" + mins;
}
var secs = Math.floor(time / 10);
if(secs <= 9){
secs = "0" + secs;
}
document.getElementById("output").innerHTML = mins + ":" + secs;
increment();
}, 100);
}};

You can use modulo % 60.
It gives the Rest of the division by 60
example 127 % 60 = 7

I made a custom audio player and this helped me.
if (seconds != 0 && seconds % 60 == 0) {
seconds = 0;
minutes++;
}

Simple countdown timer

I want to create a simple countdown timer, I found something its working only for seconds, I want to add hours:minutes:seconds...
how can I make the same timer for hh:mm:ss
<script type="text/javascript">
var seconds;
var temp;
function countdown() {
seconds = document.getElementById('countdown').innerHTML;
seconds = parseInt(seconds, 10);
if (seconds == 1) {
temp = document.getElementById('countdown');
temp.innerHTML = "00";
return;
}
seconds--;
temp = document.getElementById('countdown');
temp.innerHTML = seconds;
timeoutMyOswego = setTimeout(countdown, 1000);
}
countdown();
</script>

var seconds;
var temp;
function countdown() {
time = document.getElementById('countdown').innerHTML;
timeArray = time.split(':')
seconds = timeToSeconds(timeArray);
if (seconds == '') {
temp = document.getElementById('countdown');
temp.innerHTML = "00:00:00";
return;
}
seconds--;
temp = document.getElementById('countdown');
temp.innerHTML = secondsToTime(seconds);
timeoutMyOswego = setTimeout(countdown, 1000);
}
function timeToSeconds(timeArray) {
var minutes = (timeArray[0] * 60) + (timeArray[1] * 1);
var seconds = (minutes * 60) + (timeArray[2] * 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 hours + ':' + minutes + ':' + seconds;
}
countdown();
<div id="countdown">01:02:15</div>

You may have different variables and different inner html's for the each part of your timer as hours for "hh", minutes for "mm" and seconds for "ss".. and for every step set the inner htmls equal to variables.
Initialize hours with some number and make it countdown by 1 when the others are zero and at the same time make the minutes and seconds equal to 59 and start counting down the seconds as the code you added above, then same thing goes for the minutes-seconds relation (when seconds are zero and minutes are not zero countdown minutes by one). At the end return if all the variables are zero..
Hope this helps..

You didn't say if you want to count up or down so here is a solution for both, just take the parts of the code you need:
(Fiddle: http://jsfiddle.net/Luc4oqo8/2/)
(I used jQuery here, you should use it too because its awesome)
HTML:
<div id="counter_up">
<p id="h">00</p>:<p id="m">00</p>:<p id="s">00</p>
</div>
<div id="counter_dn">
<p id="h">00</p>:<p id="m">00</p>:<p id="s">00</p>
</div>
JS:
var h_up = GetElementInsideContainer ("counter_up", "h");
var m_up = GetElementInsideContainer ("counter_up", "m");
var s_up = GetElementInsideContainer ("counter_up", "s");
var h_dn = GetElementInsideContainer ("counter_dn", "h");
var m_dn = GetElementInsideContainer ("counter_dn", "m");
var s_dn = GetElementInsideContainer ("counter_dn", "s");
// THIS COUNTS UP
setInterval ( function()
{
if (parseInt(s_up.innerHTML) < 59)
{
s_up.innerHTML = parseInt(s_up.innerHTML) + 1;
if (parseInt(s_up.innerHTML) < 10)
s_up.innerHTML = "0" + s_up.innerHTML;
}
else
{
s_up.innerHTML = 0;
if (parseInt(m_up.innerHTML) < 59)
{
m_up.innerHTML = parseInt(m_up.innerHTML) + 1;
if (parseInt(m_up.innerHTML) < 10)
m_up.innerHTML = "0" + m_up.innerHTML;
}
else
{
m_up.innerHTML = 0;
if (parseInt (h_up.innerHTML) < 23)
{
h_up.innerHTML = parseInt(h_up.innerHTML) + 1;
if (parseInt(h_up.innerHTML) < 10)
h_up.innerHTML = "0" + h_up.innerHTML;
}
else
{
h_up.innerHTML = m_up.innherHTML = s_up.innerHTML = 0;
}
};
}
}, 1000);
// THIS COUNTS DOWN
setInterval ( function()
{
if (parseInt(s_dn.innerHTML) > 0)
{
s_dn.innerHTML = parseInt(s_dn.innerHTML) - 1;
if (parseInt(s_dn.innerHTML) < 10)
s_dn.innerHTML = "0" + s_dn.innerHTML;
}
else
{
s_dn.innerHTML = 59;
if (parseInt(m_dn.innerHTML) > 0)
{
m_dn.innerHTML = parseInt(m_dn.innerHTML) - 1;
if (parseInt(m_dn.innerHTML) < 10)
m_dn.innerHTML = "0" + m_dn.innerHTML;
}
else
{
m_dn.innerHTML = 59;
if (parseInt (h_dn.innerHTML) > 0)
{
h_dn.innerHTML = parseInt(h_dn.innerHTML) - 1;
if (parseInt(h_dn.innerHTML) < 10)
h_dn.innerHTML = "0" + h_dn.innerHTML;
}
else
{
h_dn.innerHTML = 23;
m_dn.innherHTML = s_dn.innerHTML = 59;
}
};
}
}, 1000);
// Very useful, got it from here: http://stackoverflow.com/questions/7171483/simple-way-to-get-element-by-id-within-a-div-tag
function GetElementInsideContainer(containerID, childID)
{
var elm = {};
var elms = document.getElementById(containerID).getElementsByTagName("*");
for (var i = 0; i < elms.length; i++)
{
if (elms[i].id === childID)
{
elm = elms[i];
break;
}
}
return elm;
}
CSS:
p
{
display: inline-block;
}

if you have Seconds get hours and minutes as follow
var hours = parseInt( Your seconds here / 3600 ) % 24;
var minutes = parseInt( Your seconds here / 60 ) % 60;
var seconds = Your seconds here % 60;
here your complete time in HH:MM:SS
var result = (hours < 10 ? "0" + hours : hours) + ":" + (minutes < 10 ? "0" + minutes : minutes) + ":" + (seconds < 10 ? "0" + seconds : seconds);
Sort and sweet approach

Simple countdown timer mm:ss

I want to create a simple countdown timer.
I found something and its working for hours minute and seconds, I want only minutes:seconds...
how can I make the same timer for mm:ss format?
var seconds;
var temp;
function countdown() {
time = document.getElementById('countdown').innerHTML;
timeArray = time.split(':')
seconds = timeToSeconds(timeArray);
if (seconds == '') {
temp = document.getElementById('countdown');
temp.innerHTML = "00:00:00";
return;
}
seconds--;
temp = document.getElementById('countdown');
temp.innerHTML = secondsToTime(seconds);
timeoutMyOswego = setTimeout(countdown, 1000);
}
function timeToSeconds(timeArray) {
var minutes = (timeArray[0] * 60) + (timeArray[1] * 1);
var seconds = (minutes * 60) + (timeArray[2] * 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 hours + ':' + minutes + ':' + seconds;
}
countdown();
here is the html
<div id="countdown">01:02:15</div>

var seconds;
var temp;
console.clear();
function countdown() {
time = document.getElementById('countdown').innerHTML;
timeArray = time.split(':')
seconds = timeToSeconds(timeArray);
if (seconds == '') {
temp = document.getElementById('countdown');
temp.innerHTML = "00:00";
return;
}
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;
}
countdown();
https://jsfiddle.net/santoshj/jex1f8uv/

var countDownController = function(seconds){
var countdownTimer = setInterval(startTimer, 1000);
function startTimer(){
var days = Math.floor(seconds/24/60/60);
var hoursLeft = Math.floor((seconds) - (days*86400));
var hours = Math.floor(hoursLeft/3600);
var minutesLeft = Math.floor((hoursLeft) - (hours*3600));
var minutes = Math.floor(minutesLeft/60);
var remainingSeconds = seconds % 60;
if(minutes<10){
minutes = "0"+ minutes;
}
if (remainingSeconds < 10) {
remainingSeconds = "0" + remainingSeconds;
}
// You can use which state you need!
console.log(days+":"+minutes+":"+hours+":"+remainingSeconds)
if (seconds == 0) {
clearInterval(countdownTimer);
//state for end timing
alert('time is up');
} else {
seconds--;
}
}
};
var timeToCountDown = 1232321;
countDownController(timeToCountDown);

Countdown timer in javascript for each row of table in html

var count = Number(sessionStorage.getItem('count')) || 3600;
var counter = setInterval(timer, 1000); //1000 will run it every 1 second
function timer() {
count = count - 1;
sessionStorage.setItem('count', count)
if (count == -1) {
clearInterval(counter);
return;
}
var seconds = count % 60;
var minutes = Math.floor(count / 60);
var hours = Math.floor(minutes / 60);
minutes %= 60;
hours %= 60;
var time_str = hours + ":h " + minutes + ":m " + seconds + ":s";
//document.cookie = 'time_str = hours + ":h " + minutes + ":m " + seconds + ":s"; expires=Thu, 26 March 20:47:11 UTC; path=/'
Array.prototype.forEach.call(document.querySelectorAll('.timer'), function (el ) { el.innerHTML = time_str; });
}
Above is my javascript code for countdown timer. This works fine, but it doesn't stop after "0h:0m:0s" time. it start counting in negative.

Here's a modified version of your code that works for me:
var count = 5;
var counter = setInterval(hockeytimer, 1000);
function hockeytimer() {
count = count - 1;
sessionStorage.setItem('count', count);
if (count == -1) {
clearInterval(counter);
return;
}
var seconds = count % 60;
var minutes = Math.floor(count / 60);
var hours = Math.floor(minutes / 60);
minutes %= 60;
hours %= 60;
if (hours === 0 && minutes === 0 && seconds === 0 ) {
var table = document.getElementById("hockeyt");
while (table.rows.length > 0 ) {
table.deleteRow();
}
}
var time_str = hours + ":h " + minutes + ":m " + seconds + ":s";
var timerCells = document.querySelectorAll('.hockeytimer');
for (var i = 0; i < timerCells.length; i++) {
var timerCell = timerCells[i];
timerCell.innerHTML = time_str;
}
}
Demo: http://jsbin.com/ceboqi/1/edit?html,js,output