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);
});
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>
At the moment I am creating an on screen timer in javascript. This is the code for my timer:
var i = 30;
function startTimer() {
var countdownTimer = setInterval(function() {
console.log(i);
i = i - 1;
if (i < 0) {
clearInterval(countdownTimer);
}
}, 1000);
}
I am just wondering where I should place my document.getElementById("time-remaining").innerHTML = "Time Remaining:" + i;
I am also wondering if the above document.getElementById is correct (will it be displayed as a onscreen timer or will it fail or something)?
Thanks in advanced.
Try this:
var i = 30;
function startTimer() {
var countdownTimer = setInterval(function () {
console.log(i);
i = i - 1;
if (i < 0) {
clearInterval(countdownTimer);
return; //This will prevent -1 to be written to html
}
document.getElementById("time-remaining").innerHTML = "Time Remaining:" + i;
}, 1000);
}
startTimer();
Dont forget to call the function.
Demo: http://jsfiddle.net/GCu2D/842/
You can put the
document.getElementById("time-remaining").innerHTML = "Time Remaining:" + i;
After the startTimer function or really anywhere.
And yes thedocument.getElementById is correct, if your html id is the same one as in javascript.
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
I have this code:
function CreateAndAnimateEnemyImg() {
var nh = Math.floor(Math.random() * w + 30);
var enemy = document.createElement('img');
enemy.src = 'enemy.jpg';
enemy.className = 'Enemy';
pane.append(enemy);
enemy.onload = function () {
enemy.style.top = nh + 'px';
}
}
$("#Start").click(function () {
var x = setInterval(function () {
CreateAndAnimateEnemyImg();
$('.Enemy').animate({ 'left': '-=20px' });
time--;
}, 20);
if (time == 0) {
timeElapsed = true;
clearInterval(x);
}
});
And this is the jsfiddle
I know my logic is wrong and I want u to help me to fix my problem on click an new image should be created and animated and a a counter should be initialize when the counter is set to 0 the creation of the new images should be stopped but the created images should still animate to left -20px
i have changed the position of the clear interval and adde some condition check
if (time > 0) {
$('.Enemy').animate({ 'left': '-=20px' });
time--;
console.log(time);
if(time == 0){
timeElapsed = true;
clearInterval(x);
}
}
check here Fiddle
Modified the Start click handler little bit. Enemy animate is moved to its own timer and inside the create new enemies interval added check to see if created time reached max.
Here is the new code, updated fiddle demo
$("#Start").click(function () {
intervalPoint = setInterval(function () {
CreateAndAnimateEnemyImg();
time--;
if (time == 0)
StopTimer();
}, 20);
setInterval(function () {
$('.Enemy').animate({ 'left': '-=20px' });
}, 20);
});
function StopTimer(){
timeElapsed = true;
clearInterval(intervalPoint);
time = 3;
}
I'm trying to write a JS timer that will be triggered by a user click on the button with id="start".
I've got the timer itself working correctly, but when I try to add code to initiate the timer on the button click (id="start") I break it and am not sure why.
Any help would be greatly appreciated!
Here is the JS code:
$(document).ready(function(){
var count = 0;
$('#start').click(function(){
setInterval(function(){
count++;
$('#timer').html(count + ' tacos seconds');
},1000);
});
});
$(document).ready(function() {
$('#start').click((function(container) {
var interval;
return function() {
if(interval) clearInterval(interval);
var count = 0;
interval = setInterval(function() {
count++;
$(container).html(count + ' tacos seconds');
}, 1000);
};
})("#timer"));
});
$(document).ready(function() {
var count = 0;
var myInterval = null;
$('#start').click(function(){
myInterval = setInterval(function(){
count++;
$('#timer').html(count + ' tacos seconds');
},1000);
});
});
When setting your setInterval in the scope of the click handler, try assigning it to a variable to hold the interval declared up a level. This has typically always worked for me.
Not sure exactily what your objective is, but maybe you'd want to try something like this:
var startInterveal;
var timerStarted = false;
var count =0;
$(document).ready(function () {
$('#start').click(function () {
if (!timerStarted) {
timerStarted = true;
count =0;
$(this).attr('disabled', 'disabled');
startInterveal = setInterval('tick();', 1000);
}
});
});
function tick() {
count++;
$('#timer').html(count + ' tacos seconds');
}
Here is a 2nd answer if you really want to go nuts and have something resuable:
$(document).ready(function() {
$('#start').click(overboard("#timer"));
$('#start2').click(overboard("#timer2"));
});
function overboard(container) {
var interval;
return function() {
if (interval) clearInterval(interval);
var count = 0;
interval = setInterval(function() {
count++;
$(container).html(count + ' tacos seconds');
}, 1000);
};
}