I have a start button for my countdown, but i want it to stop when i click the stop button.
my html code:
<div>
<span id="timer">25:00</span>
</div>
Start
Stop
my js code:
$('#startTimerButton').click(function starter() {
function startTimer(duration, display) {
var timer = duration, minutes, seconds;
setInterval(function () {
minutes = parseInt(timer / 60, 10);
seconds = parseInt(timer % 60, 10);
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.text(minutes + ":" + seconds);
if (--timer < 0) {
timer = duration;
}
}, 1000);
}
jQuery(function ($) {
var fiveMinutes = 60 * 25,
display = $('#timer');
startTimer(fiveMinutes, display);
});
});
First, try to return your interval in the function:
function startTimer(duration, display) {
var timer = duration, minutes, seconds;
timeInterval = setInterval(function () {
minutes = parseInt(timer / 60, 10);
seconds = parseInt(timer % 60, 10);
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.text(minutes + ":" + seconds);
if (--timer < 0) {
timer = duration;
}
}, 1000);
return timeInterval;
}
Then, calling this function assign it to a variable so you can clear it later with:
var countTimeInterval = startTimer();
clearInterval(countTimeInterval);
connect the function with a variable like this: (Try without the 'var')
var my_timer = setInterval(function () { ...
And stop the timer with this function:
$("#stop_btn").click(function(){
clearInterval(my_timer);
});
You need to use the function clearInterval to stop the timer.
$(document).ready(function() {
var handler;
$('#stopTimerButton').click(function () {
if (handler) {
clearInterval(handler);
}
});
$('#startTimerButton').click(function starter() {
function startTimer(duration, display) {
var timer = duration, minutes, seconds;
handler = setInterval(function () {
minutes = parseInt(timer / 60, 10);
seconds = parseInt(timer % 60, 10);
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.text(minutes + ":" + seconds);
if (--timer < 0) {
timer = duration;
}
}, 1000);
}
jQuery(function ($) {
var fiveMinutes = 60 * 25,
display = $('#timer');
startTimer(fiveMinutes, display);
});
});
});
You need to clear the interval when a button is pressed. Suppose the button to stop is #stopTimerButton. Then, change your js to:
$('#startTimerButton').click(function starter() {
function startTimer(duration, display) {
var timer = duration, minutes, seconds;
interval = setInterval(function () {
minutes = parseInt(timer / 60, 10);
seconds = parseInt(timer % 60, 10);
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.text(minutes + ":" + seconds);
if (--timer < 0) {
timer = duration;
}
}, 1000);
}
jQuery(function ($) {
var fiveMinutes = 60 * 25,
display = $('#timer');
startTimer(fiveMinutes, display);
});
});
$('#stopTimerButton').click(function() {
clearInterval(interval);
});
Related
I am trying to start the Javascript countdown using following Javascript code. Here it's counting from 5 - 0.
Now I want when It's 0 then I will call an Ajax request (I know how to do it). But for now, I set it alert message that your session ends.
It continuously showing me the alert message But it's should be once!
Here is the JS code:
function startTimer(duration, display) {
var timer = duration, minutes, seconds;
setInterval(function () {
minutes = parseInt(timer / 60, 10)
seconds = parseInt(timer % 60, 10);
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.textContent = minutes + ":" + seconds;
if(timer !== 0 ) {
--timer;
} else if( timer == 0 ) {
alert('Your time has been completed.');
}
}, 1000);
}
window.onload = function () {
var seconds = 5,
display = document.querySelector('#time');
startTimer(seconds, display);
};
You need to assign the interval to a variable, so that you can then clear the interval after the final alert so that it doesn't run anymore:
function startTimer(duration, display) {
let timer = duration;
const interval = setInterval(function() {
let minutes = parseInt(timer / 60, 10)
let seconds = parseInt(timer % 60, 10);
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.textContent = minutes + ":" + seconds;
if (timer !== 0) {
--timer;
} else if (timer == 0) {
alert('Your time has been completed.');
clearInterval(interval);
}
}, 1000);
}
window.onload = function() {
var seconds = 5,
display = document.querySelector('#time');
startTimer(seconds, display);
};
<div id="time"></div>
you need to make use of clearInterval() method as below
var myVar = setInterval(function(){ myTimer() }, 1000);
myTimer() {
if(conditionMet)
clearInterval(myVar);
}
or just for info you can make use of interval of react js
import { interval } from 'rxjs/observable/interval';
//emit value in sequence every 1 second
const source = interval(1000);
//output: 0,1,2,3,4,5....
const subscribe = source.subscribe(val => {
if(conditionmet)
source.unsubscribe();
console.log(val);
});
ES5
function startTimer(duration, display) {
var timer = duration;
var interval = setInterval(function() {
var minutes = parseInt(timer / 60, 10)
var seconds = parseInt(timer % 60, 10);
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.textContent = minutes + ":" + seconds;
if (timer !== 0) {
--timer;
} else if (timer == 0) {
alert('Your time has been completed.');
clearInterval(interval);
}
}, 1000);
}
window.onload = function() {
var seconds = 5,
display = document.querySelector('#time');
startTimer(seconds, display);
};
I have this countdown and I want to animate the numbers like when they change, the number flip or some fancy transition.
<div>Registration closes in <span id="time">05:00</span> minutes!</div>
function startTimer(duration, display) {
var timer = duration, minutes, seconds;
setInterval(function () {
minutes = parseInt(timer / 60, 10)
seconds = parseInt(timer % 60, 10);
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.textContent = minutes + ":" + seconds;
if (--timer < 0) {
timer = duration;
}
}, 1000);
}
window.onload = function () {
var fiveMinutes = 60 * 5,
display = document.querySelector('#time');
startTimer(fiveMinutes, display);
};
I'd appreciate any help, thankyou
Change to jquery
<div>Registration closes in <span id="time">05:00</span> minutes!</div>
$(window).load(function(){
duration=60*5;
setInterval(function () {
minutes = parseInt(timer / 60, 10)
seconds = parseInt(timer % 60, 10);
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
$('#display').animate({'opacity': 0}, 400, function(){
$(this).html(minutes + ":" + seconds).animate({'opacity': 1}, 400);
});
if (--timer < 0) {
timer = duration;
}
}, 1000);
});
I've got a working countdown timer which starts at 30 minutes.
With only 3 minutes left (so after 27 minutes) I'd like the number 250 to decrease at random intervals from 3 minutes left down to the end of the countdown.
Any ideas?
https://codepen.io/anon/pen/bWoGrb
// Stopwatch
function startTimer(duration, display) {
var timer = duration, minutes, seconds;
setInterval(function () {
minutes = parseInt(timer / 60, 10)
seconds = parseInt(timer % 60, 10);
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.textContent = minutes + ":" + seconds;
if (--timer < 0) {
timer = duration;
}
}, 1000);
}
window.onload = function () {
var thirtyMinutes = 60 * 30,
display = document.querySelector('#stopwatch');
startTimer(thirtyMinutes, display);
};
<div id='stopwatch'></div>
Maybe use something like this (I hope I clearly understood the question):
Just using a if/else within the condition something to say: Go normal when more than 60*3, and when under 60*3 seconds rest, there is chance to do nothing
// Stopwatch
function startTimer(duration, display) {
var timer = duration, minutes, seconds;
setInterval(function () {
if(timer > 60*3 || Math.random() < 0.25) {
minutes = parseInt(timer / 60, 10)
seconds = parseInt(timer % 60, 10);
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.textContent = minutes + ":" + seconds;
if (--timer < 0) {
timer = duration;
}
} else {
/* do not reduce the timer to wait 1 interval more */
/* or maybe do like `timer -= Math.random()` if you want to reduce it faster */
}
}, 1000);
}
window.onload = function () {
var thirtyMinutes = 60 * /*30*/ 4, // just set to 4 to see faster
display = document.querySelector('#stopwatch');
startTimer(thirtyMinutes, display);
};
<div id='stopwatch'></div>
I need to stop the timer if it reach to 0.I need to stop the countdown at 00.00 and display alert(countdown stopped).now It starts again.need to stop after reach to 00.00
function startTimer(duration, display) {
var timer = duration, minutes, seconds;
setInterval(function () {
minutes = parseInt(timer / 60, 10)
seconds = parseInt(timer % 60, 10);
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.textContent = minutes + ":" + seconds;
if (--timer < 0) {
timer = duration;
}
}, 1000);
}
window.onload = function () {
var fiveMinutes = 60 * .05,
display = document.querySelector('#time');
startTimer(fiveMinutes, display);
};
<body>
<div>Registration closes in <span id="time">start</span> minutes!</div>
</body>
Please use clearInterval as show in snippet.
function startTimer(duration, display) {
var timer = duration, minutes, seconds;
var __timer = setInterval(function () {
minutes = parseInt(timer / 60, 10)
seconds = parseInt(timer % 60, 10);
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.textContent = minutes + ":" + seconds;
if (--timer < 0) {
clearInterval(__timer);
timer = duration;
}
}, 1000);
}
window.onload = function () {
var fiveMinutes = 60 * .05,
display = document.querySelector('#time');
startTimer(fiveMinutes, display);
};
<body>
<div>Registration closes in <span id="time">start</span> minutes!</div>
</body>
Orr you could wrap this line of code
if (--timer < 0) {
timer = duration;
}
with
if (display.textContent != "0:00") {
if (--timer < 0) {
timer = duration;
}
}
I might just be being dense here... I have a variable timeDiscount that is true when page loads. Also when page loads, counter begins. At end of counter, I set timeDiscount to false... except that this doesn't seem to work...
In this jsFiddle, clicking the "CLICK" word will alert you to the current state of timeDiscount, the click returns true even after the counter has stopped. Why is that?
https://jsfiddle.net/df773p9m/4/
function startTimer(duration, display) {
var timer = duration, minutes, seconds;
refreshIntervalId = setInterval(function () {
minutes = parseInt(timer / 60, 10)
seconds = parseInt(timer % 60, 10);
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.text(minutes + ":" + seconds);
if (--timer < 0) {
clearInterval(refreshIntervalId)
timeDiscount = false;
}
}, 1000);
}
jQuery(function ($) {
var timeDiscount = true
var fiveMinutes = 5,
display = $('#time');
startTimer(fiveMinutes, display);
$("#discount").click(function() {
alert(timeDiscount);
})
});
You have a scoping problem.
In your code, timeDiscount is declared inside the unnamed function that's executed on page load (jQuery(function ($) {...). The variable is only known by this identifier inside this function, but you're trying to access it from the startTimer function.
Move the declaration outside of the unnamed function:
var timeDiscount = true
function startTimer(duration, display) {
var timer = duration, minutes, seconds;
refreshIntervalId = setInterval(function () {
minutes = parseInt(timer / 60, 10)
seconds = parseInt(timer % 60, 10);
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.text(minutes + ":" + seconds);
if (--timer < 0) {
clearInterval(refreshIntervalId)
timeDiscount = false;
}
}, 1000);
}
jQuery(function ($) {
var fiveMinutes = 5,
display = $('#time');
startTimer(fiveMinutes, display);
$("#discount").click(function() {
alert(timeDiscount);
})
});
variable must be global to access it in javascript function so keep it at outer level
var timeDiscount = true
function startTimer(duration, display) {
var timer = duration, minutes, seconds;
refreshIntervalId = setInterval(function () {
minutes = parseInt(timer / 60, 10)
seconds = parseInt(timer % 60, 10);
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.text(minutes + ":" + seconds);
if (--timer < 0) {
clearInterval(refreshIntervalId)
timeDiscount = false;
}
}, 1000);
}
jQuery(function ($) {
var fiveMinutes = 5,
display = $('#time');
startTimer(fiveMinutes, display);
$("#discount").click(function() {
alert(timeDiscount);
})
});
There are two ways to make it happen first is: to move your timeDiscount variable outside the function to make it a global variable like this:
var timeDiscount = true
function startTimer(duration, display) {
var timer = duration, minutes, seconds;
refreshIntervalId = setInterval(function () {
minutes = parseInt(timer / 60, 10)
seconds = parseInt(timer % 60, 10);
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.text(minutes + ":" + seconds);
if (--timer < 0) {
clearInterval(refreshIntervalId)
timeDiscount = false;
}
}, 1000);
}
jQuery(function ($) {
var fiveMinutes = 5,
display = $('#time');
startTimer(fiveMinutes, display);
$("#discount").click(function() {
alert(timeDiscount);
})
});
Or you could just simply add the window in your timeDiscount inside the function like this and make it window.timeDiscount (refer to this link Define global variable in a JavaScript function):
function startTimer(duration, display) {
var timer = duration, minutes, seconds;
refreshIntervalId = setInterval(function () {
minutes = parseInt(timer / 60, 10)
seconds = parseInt(timer % 60, 10);
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.text(minutes + ":" + seconds);
if (--timer < 0) {
clearInterval(refreshIntervalId)
timeDiscount = false;
}
}, 1000);
}
jQuery(function ($) {
window.timeDiscount = true
var fiveMinutes = 5,
display = $('#time');
startTimer(fiveMinutes, display);
$("#discount").click(function() {
alert(timeDiscount);
})
});
You need to declare the timeDiscount variable in global scope, i.e., before startTimer function, so that when you refer to the same in startTimer(), it would be available to it,else it would create a global variable and set it to false.
The variable(timeDiscount) created in global scope is entirely different from the one present inside your $(function() { var timeDiscount=true; }) which is local to that scope, thats why you never got any error nor did you get what you expected.
JS Code:
var timeDiscount = true;
function startTimer(duration, display) {
var timer = duration, minutes, seconds;
setInterval(function () {
minutes = parseInt(timer / 60, 10)
seconds = parseInt(timer % 60, 10);
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.text(minutes + ":" + seconds);
if (--timer < 0) {
timer = duration;
timeDiscount = false;
}
}, 1000);
}
Live Demo # JSfiddle