I have very little experience in coding in general, however, I still need a timer that comes on a pop-up that goes from 20 or 30 minutes to 0, and it should display the time remaining (like MM:SS). Then, when the timer hits 0, a new pop-up should appear that displays some plain text. Is this even possible?
This could do the work
let time = 5;
let element = document.getElementById('countdown');
function lower() {
if(time >= 0) {
element.innerHTML = time--;
}
else {
console.log('popup')
//open popup here
}
}
setInterval(lower, 1000);
I did not do the time format tho. Only shows in seconds now
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 have a script that AJAXes a request every 10 seconds (but technically 11), for the user. I have a simple countdown made from 10 to 0 and then again and again.
This countit function is called after each AJAX request to restart
Here is my code:
function countit() {
var count = 10;
loading = setInterval(function() {
$(box).val("Will automatically check in " + count + "second(s), please DO NOT refresh the page yourself.");
count--;
if (count <= 0) {
clearInterval(loading);
}
}, 1000);
}
The code works fine except, if you leave the page and come back, the countdown proceeds into negative and does not stop. Here is the image:
I cant be sure if this is a problem with the code or JS but the counter doesnt go below 0 when the user stays on the page.
As Ibrahim & Chris have said:
Add a var infront of the Interval as without it, the variable is global.
function countit() {
var count = 10;
var loading = setInterval(function() {
$(box).val("Will automatically check in " + count + "second(s), please DO NOT refresh the page yourself.");
count--;
if (count <= 0) {
clearInterval(loading);
}
}, 1000);
}
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.
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);
}