I have this code:
$(document).ready(function(){
var count = 0;
var clicks= 0;
$(".press").click(function() {
count++;
clicks++;
console.log(count);
$('#animation2').html("My current count is: "+clicks);
if(count==1){
count=0;
if($('.animation img').css('left') == '100px'){
$('.congrats').css('display','block');
$("#startClock").css('display','block');
$(".press").css('display','none');
$('.animation img').css('left','0');
var counter=0;
span.innerHTML = counter;
}else{
$('.animation img').animate({ "left": "+=10px" }, 1 );
}
}
});
span = document.getElementById("count");
$("#startClock").click(function() {
clicks=0;
$("#animation2").css('display','block');
$('#animation2').html("My current count is: "+clicks);
var counter =30;
$('.congrats').css('display','none');
$('.press').css('display','block');
$(this).css('display','none');
setInterval(function() {
counter--;
if (counter >= 0) {
span.innerHTML = counter;
}
if (counter === 0) {
$("#startClock").css('display','block');
$('.press').css('display','none');
clearInterval(counter);
}
}, 1000);
});
});
This code have a counterdown whitch must be reset when I click button with id=startClock the second time. If I click twice setInterval decrease 2 second suddenly.
You are not using setInterval and clearInterval correctly. When you call setInterval, it returns an ID that you can use later with clearInterval. Here is an example :
var counter = 30;
var my_interval = setInterval(function(){
counter--;
if(counter <= 0) {
clearInterval(my_interval);
}
}, 1000);
This would countdown from 30 every second until counter reaches 0, then it would stop.
I suggest you go read about timeouts and intervals here
Related
I am making a quiz game for a project in HTML and JavaScript. On every question, the player has 15 seconds to answer. I managed to do it like this:
<body onload="setTimeout(Timer,15000)">
and then in Js:
function Timer()
{
alert("You are out of time!");
}
However, I want to be able to display how much time the player has left in a <p> tag. How could I do that?
<div id="count">Start</div>
var count = 15;
var interval = setInterval(function(){
document.getElementById('count').innerHTML=count;
count--;
if (count === 0){
clearInterval(interval);
document.getElementById('count').innerHTML='Done';
// or...
alert("You're out of time!");
}
}, 1000);
Here's a basic example of a countdown timer
var count = 15;
var timer = setInterval(function() {
console.log(count);
count--;
if(count === 0) {
stopInterval()
}
}, 1000);
var stopInterval = function() {
console.log('time is up!');
clearInterval(timer);
}
Repl: https://repl.it/I2C6
Initialize the variable 'sec' with timeout time in seconds.
Call setInterval() which has 2 parameters, 1st is the method name and 2nd parameter is interval between invoking the method mentioned in 1st parameter.
var sec = 15;
var time = setInterval(myTimer, 1000);
function myTimer() {
document.getElementById('timer').innerHTML = sec + "sec left";
sec--;
if (sec == -1) {
clearInterval(time);
alert("Time out!! :(");
}
}
Time : <span id="timer"></span>
Can you please take a look at this demo and let me know how I can stop the animation and interval after reaching 100% and filling the progress bar
I tried adding clearInterval(myVar); to the end of interval but this stops incrementting the percentage text
$(".progress-bar").animate({
width: "100%"
}, 3000);
var myVar=setInterval(function(){myTimer()},1);
var count = 0;
function myTimer() {
if(count < 100){
$('.progress').css('width', count + "%");
count += 0.05;
document.getElementById("demo").innerHTML = Math.round(count) +"%";
// code to do when loading
}
else if(count > 99){
// code to do after loading
count = 0;
}
}
clearInterval(myVar);
Don't use a timer for this. jQuery provides a way for you to listen to the progress of the animation:
$(".progress-bar").animate({
width: "100%"
},{
duration: 3000,
progress: function(_, progr) {
$('#demo').text( Math.round(100 * progr));
}
});
See your updated fiddle
NB: I changed your demo element to a span, as a p will break the % to the next line.
You need to put the code of clearing the interval in the block where you handle the finishing of loading.
var myVar = setInterval(function() {
myTimer()
}, 1);
var count = 0;
function myTimer() {
if (count < 100) {
$('.progress').css('width', count + "%");
count += 0.05;
document.getElementById("demo").innerHTML = Math.round(count) + "%";
// code to do when loading
} else if (count > 99) {
// code to do after loading
count = 0;
// loading is done, clear the interval
clearInterval(myVar);
}
}
I have a slideshow on my website but there is a problem with in.
Here, my JS:
var size_ini = 1;
$(document).ready(function() {
setInterval('$("#next").click()',10000)
$("#next").click(function() {
if(size_ini < 3);
size_ini++;
else
size_ini = 1
$(".sample").hide();
$("#id" + size_ini).show();
$(".comment" + size_ini).show();
$(".comment_description" + size_ini).show();
});
$("#prev").click(function() {
if(size_ini > 1)
size_ini--;
else
size_ini = 3;
$(".sample").hide();
$("#id" + size_ini).show();
$(".comment" + size_ini).show();
$(".comment_description" + size_ini).show();
});
});
As you can see I have a Timer of 10 sec. for slide. I have a previous and a next button. So when i clicked on one of the button the timer should stop and starts again. I have tried "clearInterval" but this doesn't work.
Can anyone tell how this works.
Here is FIDDLE.
Fiddle Demo
var size_ini = 1;
$(document).ready(function () {
var timer = setInterval('$("#next").click()', 10000); //assign timer to a variable
$("#next").click(function () {
if (size_ini < 3) size_ini++;
else size_ini = 1
$(".sample").hide();
$("#id" + size_ini).show();
clearInterval(timer); //clear interval
timer = setInterval('$("#next").click()', 10000); //start it again
});
$("#prev").click(function () {
if (size_ini > 1) size_ini--;
else size_ini = 3;
$(".sample").hide();
$("#id" + size_ini).show();
clearInterval(timer); //clear interval
timer = setInterval('$("#next").click()', 10000); //start it again
});
});
If you're going to want to clear the interval you need to assign it to a variable, then you can clear it easily -
var myInterval = setInterval('$("#next").click()',10000);
Then clear like this -
clearInterval(myInterval);
Once the interval has been cleared make sure to reset it and assign it to a variable again if you want it to continue.
<button id="start">Start</button>
<button id="stop">Stop</button>
var timer;
$("#start").click(function() {
timer = setInterval(function(){$("#next").trigger("click");},"500");
});
$("#stop").click(function() {
clearInterval(timer);
});
want to show a div after click on a button and then the time start and count from 10 to 0 .
my probelm is i don't know how to start count ?
javascript :
<script>
$("button").click(function() {
$('div#test').hide().delay(200).fadeIn('slow');
});
</script>
button :
<div id="test" style="display:none;">click</div>
html :
<div id="test" style="display:none;">here you are !</div>
You can use setInterval for counting.
var count = 10;
var temp = setInterval(function(){
if(count < 0) {
clearInterval(temp);
}
// show count
count--;
}, 1000);
You can use either setTimeout() or setInterval() to get it working:
Below is how I did it:
$(function() {
$("button").click(function() {
function counter() {
var i = 10;
$("body").append('<div style="border:1px solid red;">Div Created on the Fly</div>')
function showDIV() {
if (i < 0)
return
setTimeout(showDIV, 1000);
$("span").text(i);
i--;
}
showDIV();
}
counter(10);
});
});
DEMO
var count = 15;
var timerID = 0;
$("button").click(function() {
$('div#test').hide().delay(200).fadeIn('slow', function() {
timerID = setInterval(function() {countDown();}, 1000); // count every 1000 ms, change this to whatever you want
});
$("#wait").show(); // or you could fade this in if you want. Maybe that's what you intended with #test.
});
function countDown() {
count--;
$("#count").text(count);
// do whatever you want to do with your count
if (count <= 0) {
clearInterval(timerID);
}
}
HTML:
<p id="wait" style="display:none">Please wait<span id="count">15</span> seconds...</p>
Assuming you wanted to start the count down after the fadeIn. Otherwise, just pull that piece out and setInterval after the fadeIn line which will start the countdown when the button is first clicked.
Here is the code:
//Mouseover start countdown
$("#icon_no_1").mouseover(function()
{
$(this).fadeTo("slow", 0.23);
//Countdown
var counter = 0;
var interval = setInterval(function() {
counter++;
// Display 'counter' wherever you want to display it.
if (counter == 1) {
//Display 1
$('#login_icon_1').fadeIn();
//Fade in
}
if (counter == 2) {
//Display 2
$('#login_icon_1').fadeOut(750);
//Fade in login icon 2
$('#login_icon_2').fadeIn();
}
if (counter == 3) {
//Display 3
//Display 2
$('#login_icon_2').fadeOut(500);
//Fade in login icon 2
$('#login_icon_3').fadeIn();
}
if (counter == 4) {
//Display 4
//Display 2
$('#login_icon_3').fadeOut(500);
//Fade in login icon 2
$('#login_icon_4').fadeIn();
}
if (counter == 5) {
//Display 2
$('#login_icon_4').fadeOut(500);
//Fade in login icon 2
$('#login_icon_5').fadeIn();
//Display 2
$('#login_icon_5').fadeOut(1000);
}
if (counter == 6) {
counter = 7;
window.location.replace("/wahalu/index.php/login_advisor.php");
}
}, 1000);
}
);
$("#icon_no_1").mouseleave(function()
{
counter = 0;
$(this).fadeTo("slow", 1);
$('#login_icon_1').hide();
$('#login_icon_2').hide();
$('#login_icon_3').hide();
$('#login_icon_4').hide();
$('#login_icon_5').hide();
}
);
});
Another way to do it would be to take the variable out of the mouseover so that it can be shared with the mouseleave.
var interval; // <-- is in scope of both events now
$("#icon_no_1").mouseover(function()
{
$(this).fadeTo("slow", 0.23);
//Countdown
var counter = 0;
interval = setInterval(function() {
counter++;
// Display 'counter' wherever you want
// etc etc etc
Now the interval is accessible to mouseleave
$("#icon_no_1").mouseleave(function()
{
counter = 0;
clearInterval( interval )
// etc etc etc
It is not a global variable if you are running your code inside of $(document).ready()
Store the interval with the element, instead of this:
var interval = setInterval(function() {
//code
}, 1000);
Do this:
$.data(this, 'interval', setInterval(function() {
//code
}, 1000));
Then in your mouseleave handler, clear it using clearInterval(), like this:
$("#icon_no_1").mouseleave(function() {
clearInterval($.data(this, 'interval'));
counter = 0;
$(this).fadeTo("slow", 1);
$('#login_icon_1, #login_icon_2, #login_icon_3, #login_icon_4, #login_icon_5').hide();
});
This style of doing timeouts/intervals eliminates the global variables and if needed you can have a timeout/interval per element (instead of a global variable per timeout/interval, per element).