I'm creating Rails web application. I want create timer for 15 seconds, which does not reset when I refresh page. I've tried use jQuery countdown from Keith Wood but when I refresh page, timer resets. So, I think I need create timer on backend but I can't imagine how realize this. Can anyone help? There is my timer code below
$('#timer_' + auct_id).countdown({until: +15, onTick: function(periods) {
var seconds_addition;
if (periods[6] < 10)
seconds_addition = '0';
else
seconds_addition = '';
$('#timer_' + auct_id).text('0' + periods[5] + ':' +
seconds_addition + periods[6]);
}});
Related
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
As some of you guys may know, I am still developing my game LOL.
Right now I have basic functionality. Players can see their profits display and buy stuff if they have enough money.
All i need now is to display how quick players are getting money. So players are supposed to have money generated every 60 seconds. The money gets generated but it has no visuals.
What i want is for people to see how much to they have left before they get the next money.
so i have all the styling and that done for the timer. What i want is some vanilla javascript code to display the innerHTML for the time decrementing from 60 down to 0;
I have tried intervals with if statements and switch cases and ive tried a for loop but i cant get it to reset or even do anything.
Below is some of my code.
Code:
// Income Ticker Display (displaying time until next pay day)
var incomeTicker = 60;
window.setInterval(function(){
if (incomeTicker > 0)
incomeTicker--;
document.getElementById("incomeTicker").innerHTML = "Next Profit In : " + incomeTicker + " seconds";
}, 1000);
<span class = "incomeTicker" id = "incomeTicker" > Next Profit In : 60 seconds </span>
i have tried different ways of doing this and have looked a few questions but nothing is giving me what i need.
Thanks for any advise in advance.
ps. let me know if you need more code examples.
OKAY I FIXED MY LOOPING ISSUE AS WELL
// Income Ticker Display (displaying time until next pay day)
var incomeTicker = 60;
window.setInterval(function(){
if (incomeTicker > 0)
incomeTicker--;
document.getElementById("incomeTicker").innerHTML = "Next Profit In : " + incomeTicker + " seconds";
if (incomeTicker <= 0)
incomeTicker = 60;
}, 1000);
<span class = "incomeTicker" id = "incomeTicker" > Next Profit In : 60 seconds </span>
Thank you every one for helping me solve this problem
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 have a piece of javascript/jquery that is an event listener, waiting for an element to load:
$("#download-iframe").on("load", function() {
alert("Download iframe loaded. src attribute value: " + $(this).attr("src"));
});
Right now this alert will pop up once the script in the src attribute is done loading/running.
I want to show a progress bar of sorts that increments slowly, but I want it to do thins only as long as the $("#download-iframe") element is not yet loaded.
Is there a way to check in an if statement if the element is loaded yet or not?
function showProgress() {
var oneMinute = 60000; // One minute in milliseconds
var maxTime = 10 * oneMinute; // Maximum time in minutes, 10 minutes
var progress = 5;
var increment = 5;
$("#show-progress").attr("aria-valuenow", increment);
$("#show-progress").css("width", increment + '%');
var scriptProgress = setInterval( function() {
progress += increment;
if (progress <= 100 && /* ALSO CHECK FOR ELEMENT NOT YET LOADED HERE */) {
$("#show-progress").attr("aria-valuenow", progress);
$("#show-progress").css("width", progress + '%');
}
else {
$(".progress").addClass("hidden");
clearInterval(scriptProgress);
}
}, oneMinute / 10);
}
I am using twitter bootstrap's progress bars. the src script being run is a POST ajax URL that is not an upload/download so I can't use an AJAX progress eventListener. I want to give the user the appearance of something happening, a feedback of some kind.
If the iframe src is loaded prior to the progress bar reaching 100% incrementally, I want it to jump to 100% and then show the result of the PHP script.
Any suggestions would be greatly appreciated.
Why not set a flag in load()
var loaded = false;
$("#download-iframe").on("load", function() {
loaded = true;
alert("Download iframe loaded. src attribute value: " + $(this).attr("src"));
});
and then in the if statement
if (progress <= 100 && loaded)
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.