http://flipclockjs.com/
I need a counter which counts down to zero from a certain time (for example 2 hours). After those two hours the timer needs to reset and starts again.
How can I do this? I can't find anything about it in their docs.
What I got now:
var clock = $('.your-clock').FlipClock({
countdown : true,
});
Try this one:
var clock = $('.your-clock').FlipClock({
countdown : true,
});
clock.setTime(10);
clock.start();
setTimeout(function(){
checktime();
}, 1000);
function checktime(){
t = clock.getTime();
if(t<=0){
clock.setTime(10);
clock.start();
}
setTimeout(function(){
checktime();
}, 1000);
}
You can use method, see 'Chainable Methods' example.
clock.start(function() {
setInterval(function() {
clock.stop().reset().start();
}, 7200);
});
I assume that you want to decrease every second? this is a non jquery way:
var counter, myInterval;
function createCountDown(startHourInSecond){
counter = startHourInSecond;
myInterval =window.setInterval(function(){
counter --;
if (counter ==0){
clearInterval(myInterval);
counter = startHourInSecond;
createCountDown(counter);
}
}, 1000);
}
createCountDown(7200);
Related
I have this fiddle : https://jsfiddle.net/reko91/stfnzoo4/
Im currently using Javascripts setInterval() to log a string to console.
What I want to do, is in this setInterval function check whether the interval variable has changed, if it has, change the interval in the setInterval function. I can lower the interval variable by 100 (speeding the function up) by a click a button.
Is this possible ?
Someone mentioned this : Changing the interval of SetInterval while it's running
But this is using a counter, so they only run it a certain amount of times. I need to run it for however long, but change how fast the function gets called again.
Here is the code :
var interval = 2000;
setInterval(function() {
interval = getInterval();
console.log('interval')
}, interval);
function getInterval() {
return interval;
}
$('#speedUp').on('click', function() {
interval -= 100;
console.log(interval)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id='speedUp'>
speed up
</button>
I would just stop the interval and start a new one with the different timing
var interval = 2000;
var intervalId;
// store in a function so we can call it again
function startInterval(_interval) {
// Store the id of the interval so we can clear it later
intervalId = setInterval(function() {
console.log(_interval);
}, _interval);
}
function getInterval() {
return interval;
}
$('#speedUp').on('click', function() {
interval -= 100;
// clear the existing interval
clearInterval(intervalId);
// just start a new one
startInterval(interval);
console.log(interval)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id='speedUp'>
speed up
</button>
I'm trying to countdown 60 seconds once I click the begin button and at 0 I don't want to just hide the counter, I want it to be reset. I ran into 2 problems:
When I click the begin button again it's not starting over.
The begin button is not disabled once I click it to start the countdown.
While its counting down, when I press the begin button it accelerate the countdown.
Any help is appreciated, here is the code:
function begin() {
$('#begin').prop('disabled');
myTimer = setInterval(function() {
$('#timing').html(timing);
if (timing === 0) {
alert('Too late! Try again');
clearInterval(myTimer);
$('#timing').hide();
}
timing--;
}, 1000);
}
You have several issues:
You need .prop("disabled", true) to disable the button.
You need to reset the timing variable when you restart the timer.
You need to enable the button when the timer finishes so it can be pressed again.
You need to display the initial count when you start the timer
Code:
var timing;
var myTimer;
function begin() {
timing = 60;
$('#timing').html(timing);
$('#begin').prop('disabled', true);
myTimer = setInterval(function() {
--timing;
$('#timing').html(timing);
if (timing === 0) {
alert('Too late! Try again');
clearInterval(myTimer);
$('#begin').prop('disabled', false);
}
}, 1000);
}
Working demo (with a shorter interval time so it counts down faster): http://jsfiddle.net/jfriend00/xxs7t0gd/
I have a setinterval that moves bulldozer from the right to the left.
In the jsfiddle below, the setInterval must stop itself after 5 seconds. (used a settimeout and clearinterval for that) but it's not working. Can anyone help me?
http://jsfiddle.net/B5MKj/11/
var gameover;
gameover = setInterval(function () {
setTimeout(function () {
clearInterval(movingbulldozer);
}, 55000);
}, 10);
You had a typo in your fiddle, updated fiddle, if works just fine, but instead of 5000 ms you had 55000ms set for the timeout.
setTimeout(function () {
clearInterval(movingbulldozer);
}, 5000);
In your example, movingbulldozer is undefined. If you're trying to clear the interval, clear the interval with the right reference. In your example, this would be clearInterval(gameover);
The problem with your example is that every 10 ms you're adding a timeout to the DOM which clears the interval.
var timeout, interval, date,
i = 0;
$(document).ready(function() {
interval = setInterval(function() {
date = new Date();
i++;
$('#debug').html('Interval parsed at '+date.getTime()+', interval #'+i);
if (i >= 100) { // According to your example
$('#debug').html('Starting timeout...');
timeout = setTimeout(function() {
$('#debug').html('Timed out');
}, 5000);
clearInterval(interval);
}
}, 10);
});
Check out my example, see if it helps. :)
http://jsfiddle.net/faqq5/
I have a function set up like so:
setInterval(function () { get_fb(); }, 10000);
I'd like to reset the timer to 10 seconds whenever a user does something (like hover over an element or click an element)
How would I tell the program to do something like this?
Is you assign the timer to a variable you can clear it and restart it like this:
var timer = setInterval(get_fb, 10000);
$('#foo').click(function() {
clearInterval(timer); // stop timer
// do something...
timer = setInterval(get_fb, 10000); // restart timer
});
var timeout = setInterval(function () { get_fb(); }, 10000);
//to reset interval, first clear it
clearInterval(timeout);
//then re-create
timeout = setInterval(function () { get_fb(); }, 10000);
In the event callback, clear the interval, and then set the interval anew:
interval = setInterval(...);
...elsewhere...
$(..selector..).click(function () {
clearInterval(interval);
interval = setInterval(...);
});
Be sure that interval is accessible within the scope of the click callback.
This is a followup to this question, where I found out how to make code be repeated every x seconds. Is it possible to make an event that can change this? I.e. I have a checkbox which is meant to control whether this is repeated or not, so I figured I'd need something like this:
$(checkbox).bind("change", function() {
switch(whether if it is ticked or not) {
case [ticked]:
// Make the code repeat, while preserving the ability to stop it repeating
case [unticked]:
// Make the code stop repeating, while preserving the ability to start again
}
});
I have no idea what I could put in the cases.
You can do it by assigning your setInterval function to a variable.
var interval = setInterval(function() { }, 1000);
and then you can stop setInterval by
clearInterval(interval);
p.s.
to start your interval you need to call var interval = setInterval(function() { }, 1000); again
You can either stop and start the interval:
var timer;
function start() {
timer = window.setInterval(function(){
// do something
}, 1000);
}
function stop() {
window.clearInterval(timer);
}
start();
$(checkbox).bind("change", function() {
if ($(this).is(':checked')) {
start();
} else {
stop();
}
});
Or you can have a flag causing the interval to skip the code:
var enabled = true;
var timer = window.setInterval(function(){
if (!enabled) {
// do something
}
}, 1000);
$(checkbox).bind("change", function() {
enabled = $(this).is(':checked');
});
function fooFunc() {
$('#foo').text(+new Date());
}
var id;
var shouldBeStopped = false;
$('input').change(function() {
if (shouldBeStopped)
clearInterval(id);
else
id = setInterval(fooFunc, 200);
shouldBeStopped = !shouldBeStopped;
});
Live DEMO