Trying to implement a count down timer, so once I navigate to each screen the timer should reset.
So for each every minute the timer should automatically initialize and starts the count down from 10 to 0.
If user interupts in the middle of count down it should be in the same page, else it should navigate to home page.
This is what I have tried. My timer is calling only once and how do I know that the page has been changed and reset the timer to calulate from 1 minute.
JS:
$(document).ready(function() {
// Function to update counters on all elements with class counter
var doUpdate = function() {
$('.countdown').each(function() {
var count = parseInt($(this).html());
if (count !== 0) {
$(this).html(count - 1);
}
});
};
// Schedule the update to happen once every second
setInterval(doUpdate, 1000);
});
HTML:
<div class="countdown">10</div>
Once you have reached 0 on your countdown you could clear your current intervals using clearInterval() and restart the whole process after a minute. You could have another setInterval() which does this every minute.
Here is a fiddle which resets counters every 12 seconds: http://jsfiddle.net/uo7jLf4b/1/
Related
Hi I was wondering if anyone can help me. I am trying to create a simple card game using html css and javascript. It has a 90 second timer which I want to start counting down on the first click of the card.
Any ideas how to do this?
Thank you!!
If you want to run a function after 90 seconds then
element.onclick = function () {
setTimeout(myFunctionAfter90Secs, 90 * 1000);
};
And you would define element to be the element that's clicked on (use a querySelector) and define your myFunctionAfter90Secs
If you want to display a timer then:
Html:
<div id="timer"></div>
<div id="card"></div>
<script>
var timer = document.querySelector("#timer");
var card = document.querySelector("#card");
var initialSeconds = 90;
card.onclick = function () {
var myInterval = setInterval(function() {
if (initialSeconds > -1) {
timer.innerHTML = initialSeconds;
initialSeconds--;
}
else {
clearInterval(myInterval);
}
}, 1 * 1000);
};
</script>
This will make sure your timer updates every second until it hits 0, then the reset should clear your interval but feel free to tweak the code to fix it
<div class="popup_div">Form here</div>
What I am doing is to make this "div" popup when the page loads after 5 seconds, then when the user closes the popup div it will count again to 15 seconds to appear again, then when the user closes it again it will show for another 30 seconds
This is the interval
5 secs (on page load)
15 secs
30 secs (final popup, it won't popup after this)
Here is My fiddle, hope this helps
https://jsfiddle.net/3xk725ts/
Here I wrote a solution using setTimeout instead of setInterval so you don't need to take care about clearing it.
var iteration = 0;
var times = [5000, 15000, 30000]
var showPopUp = function(time) {
setTimeout(function() {
$('#timer').show();
$('#timer').html("<span class='close'>X</span><h3>Count down complete</h3>"); }, time)
}
showPopUp(times[iteration]);
$('body').on('click', '.close', function() {
$('#timer').hide();
iteration +=1;
if (iteration < 3) {
showPopUp(times[iteration])
}
});
I am building a site where task is assigned to each user and he/she needs to complete the task within a fixed duration of time.
For this is need to track Time taken on each task. I also need to track if the user is sitting idle on the site.
Right now i can do this using this code :
HTML
<a class="btn btn-success btn-lg" id="startTracking" role="button">Start Tracking</a>
<a class="btn btn-danger btn-lg" id="endTracking" role="button">Stop Tracking</a>
<h2 id="testingSince"></h2>
JAVASCRIPT
<script type="text/JavaScript">
var totalSeconds = 0;
var idleSeconds = 0;
$(document).ready(function () {
$('body').on('click','#startTracking',function(){
//Increment the idle time counter every minute.
var idleInterval = setInterval(timerIncrement, 1000); // 1 second
});
//Zero the idle timer on mouse movement.
$(this).mousemove(function (e) {
idleSeconds = 0;
});
$(this).keypress(function (e) {
idleSeconds = 0;
});
});
function timerIncrement() {
totalSeconds += 1;
idleSeconds += 1 ;
if (idleSeconds > 600) { // 20 minutes
alert('You have been sitting Idle for 10 Minutes');
}
$('#testingSince').text(timeStringfromSeconds(totalSeconds));
}
function timeStringfromSeconds(totalSeconds){
var hours = Math.floor(totalSeconds / 36e2),
mins = Math.floor((totalSeconds % 36e2) / 60),
secs = Math.floor((totalSeconds % 60));
return ("0" + hours).slice(-2)+':'+("0" + mins).slice(-2)+':'+("0" + secs).slice(-2);
}
</script>
So this code works great and the user can see the time spent since he clicked the button. It also tracks user idle time and gives an alert after 10 minutes.
However the only Problem here is that when the page reloads the counter starts from 0. i.e the 2 lines :
var totalSeconds = 0;
var idleSeconds = 0;
I just want the timer counter not to restart and continue from its previous value.
One way of doing this is using Cookies. So i have to update them every second but i am not sure if this is a good Idea.
Please let me know if there is any other way or i need to use browser cookies ?
Many users will not permit cookies on their computers. You should never rely only on cookies. Maybe you should make some script that you can ajax call every second or two or five and store elapsed time in session.
What I'm trying to accomplish is a slideshow that has one slide that lasts 10 seconds-- while all other slides in the slideshow last 4 seconds. In my code below, the current.id==1 condition is my first slide. When the DOM loads, it checks what slide is first, and if it's current.id==1, it makes all transitions 10 seconds. Which isn't exactly what I want. Any suggestions how I could get the all other slides to interval every 4 seconds and still keep my main slide lasting 10 seconds every time it flips back to that slide?
Sorry if that is a bit confusing. Thanks for the help guys!
/* Setting auto-advance every 10 seconds for main slide, 4 seconds for all others */
var auto;
if (current.id==1) { //this is the only slide I want lasting 10 seconds.
auto=setInterval(function(){
next();
},10*1000); //10 seconds for MAIN slide
} else { // all other slides should interval every 4 seconds.
auto=setInterval(function(){
next();
},4*1000);//4 seconds each other slide.
}
I write my JS like this. It makes it far more readable in my opinion and really helps Though normally I don't include comments like this
Your next() function should call itself
$(document).ready(function () {
var Page = {};
Page.slider = (function () {
return {
init: function () {
setTimeout(function () {
Page.slider.nextSlide();
}, 10*1000);
},
nextSlide: function () {
var duration = 4;
if (Page.slider.isShowingFirst()) {
duration = 10;
}
//code to handle transitioning slides
setTimeout(function () {
Page.slider.nextSlide();
}, duration*1000);
},
isShowingFirst: function () {
//return boolean on whether it's showing the first slide or not
}
}
})();
Page.slider.init();
});
You can't use setInterval() if you want a varying interval because you only call it once and then it runs repeatedly with the same interval until you stop it. You could use setTimeout() on each slide like this:
if (current.id == 1) { //this is the only slide I want lasting 10 seconds.
setTimeout(next, 10*1000); //10 seconds for MAIN slide
} else { // all other slides should interval every 4 seconds.
setTimeout(next, 4*1000);//4 seconds each other slide.
}
P.S. You may also want to notice that you don't need an anonymous function for setTimeout() or setInterval() if all you want it to do is call a function you already have defined as in this example.
You should use setTimeout instead of setInterval.
var auto;
if (current.id==1) { //this is the only slide I want lasting 10 seconds.
auto=setTimeout(function(){
next();
},10*1000); //10 seconds for MAIN slide
} else { // all other slides should interval every 4 seconds.
auto=setTimeout(function(){
next();
},4*1000);//4 seconds each other slide.
}
After some specified inactivity time (IDLE Time say for 10 mins) the application should give a pop up box with a timer (should display like 60 59 58 ....1), that box should close within 60 secs with cancel option selected and that browser should close if user doesn't select any option. If the user selects the cancel option within 60 secs also it should be closed.
To show a popup box I am using setTimeout("pop()",600000); but how to include a timer in that at least that box should close within 60 sec if user doesn't select any option. Is there a solution for this?
You may try putting below code in your popup window.
<script>
function mytimer()
{
setTimeout(function closewin(){window.close;}, 600000);
}
</script>
<body onload="mytimer();">
You can use setTimeout() or setInterval() again. In your pop() function, start another function with a timeout of 1 second (1000ms) and on each call decrease a counter and update the label. When the counter reaches 0, check that the box is still on the screen and if so call window.close() (not all browsers will actually respond to a closing attempt though).
Example:
function pop() {
var counter = 60;
var box = document.createElement('div');
var label = document.createElement('span');
label.innerText = counter;
box.appendChild(label);
// Position box and label as you wish.
function tick() {
counter--;
if (counter == 0) {
window.close();
} else {
label.innerText = counter;
setTimeout(tick, 1000);
}
}
setTimeout(tick, 1000);
}