I'm following this example of a PHP session timer using an AJAX call to check the 'time'.
I would like to be able to display some kind of display for the user that is simply a javascript countdown timer such as:
function startTimer(duration, display) {
var timer = duration, minutes, seconds;
setInterval(function () {
minutes = parseInt(timer / 60, 10);
seconds = parseInt(timer % 60, 10);
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.textContent = minutes + ":" + seconds;
if (--timer < 0) {
timer = duration;
}
}, 1000);
}
window.onload = function () {
var length = 60 * 5,
display = document.querySelector('#time');
startTimer(length, display);
};
but with var length equal to the value specified at $_SESSION['timeOut'] = SomeNumber; in the php file.
How can I set these to be exactly in sync and be able to output the countdown to the screen? Or am I able to just utilize the php timing and not necessarily create a js timer?
you can get time of now measured by seconds using php function time() and then save it as time of login in your DB .every time user refresh the page.you must send him $_SESSION['timeOut'] + ($time_of_login) - time() wich returns how much seconds to reach time out
$time_of_login from DB
so php file will look like:
var length = <? echo $_SESSION['timeOut'] + ($time_of_login) - time(); ?>
Related
The counter works properly but starts again after refresh
How can I continue after refreshing the counter?
function startTimer(duration, display) {
var timer = duration, minutes, seconds;
setInterval(function () {
minutes = parseInt(timer / 60, 10);
seconds = parseInt(timer % 60, 10);
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.textContent = minutes + ":" + seconds;
if (--timer < 0) {
timer = duration;
}
}, 1000);
}
window.onload = function () {
var duration = 60 * 2,
display = document.getElementById("timer");
startTimer(duration, display);
};
you can try and use localStorage.
localStorage is similar to sessionStorage, except that while data stored in localStorage has no expiration time, data stored in sessionStorage gets cleared when the page session end.
for example:
localStorage.setItem("duration",60);
localStorage.getItem("duration"); //60
check out this documentation:
https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage
var setTimer;
var isTimeSet = false;
if (!isTimeSet) {
setTimer = $('#hdn_timerTime').val();
isTimeSet = true;
}
initialTimer();
function initialTimer() {
var CustomMinutes = 60 * parseInt(setTimer),
display = $('#time');
startTimer(CustomMinutes, display);
}
function startTimer(duration, display) {
var timer = duration, minutes, seconds;
setInterval(function () {
minutes = parseInt(timer / 60, 10)
seconds = parseInt(timer % 60, 10);
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.text(minutes + ":" + seconds);
if (--timer < 0) {
timer = duration;
$('#outputmeters').val(JSON.stringify(listItem));
// _hardMeter.UpdateMeterData();
_hardMeter.TempUpdateMeterDataConfirmation();
}
}, 1000);
}
This code I am using but for the first time it work fine than after that it time start reducing and function fire very quickly. I don't know how it happening.
Please help me out in this and if you have some better solution for it. Could you please share it?
You can use setInterval to call the same function repeatedly at set intervals until either the page is unloaded or you call clearInterval:
var timedFunction = function() {
... // Do something
}
setInterval(timedFunction, 60 * 1000);
If your timed function takes arguments which change each time, use setTimeout and call it within the function body as well
var timedFunctionWithArguments = function(iterations) {
console.debug(iterations); // Do something
setTimeout(timedFunctionWithArguments, 60 * 1000, iterations++);
}
timedFunctionWithArguments(0);
I'm having a problem with the time limit coz when the page is reload/refresh the time limit reset.
P.S: I used this time limit to my online quiz program and I'm using a header location to move to next question.
HTML
<label id="time">1:00</label>
JAVASCRIPT
function startTimer(duration, display) {
var timer = duration, minutes, seconds;
setInterval(function () {
minutes = parseInt(timer / 60, 10)
seconds = parseInt(timer % 60, 10);
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
localStorage.setItem('time_remaining_min', minutes);
localStorage.setItem('time_remaining_sec', seconds);
var minutes_left = localStorage.getItem('time_remaining_min');
var seconds_left = localStorage.getItem('time_remaining_sec');
display.text(minutes_left + ":" + seconds_left);
if (--timer < 0) {
//finished
}
}, 1000);
}
jQuery(function ($) {
var fiveMinutes = 60 * 5,
display = $('#time');
startTimer(fiveMinutes, display);
});
EDIT:
I tried to use local storage but didn't work
localStorage.setItem('time_remaining_min', minutes);
localStorage.setItem('time_remaining_sec', seconds);
var minutes_left = localStorage.getItem('time_remaining_min');
var seconds_left = localStorage.getItem('time_remaining_sec');
display.text(minutes_left + ":" + seconds_left);
Store timer value either in cookie or in local storage.
Not sure that you will ever be able to get around this with a page refresh. Maybe the better answer would be to not to the page reload, and use AJAX to do whatever you need to do.
You can store the time in a cookie.
//Set cookie
time_remaining = 200;
$.cookie('time_remaining', time_remaining);
//Retrieve cookie
time_remaining = $.cookie('time_remaining');
You should be able to easily implement the above into your code (Hint: whenever the timer decreases, save time remaining in a cookie).
Note that this isn't that secure, users can easily clear and modify cookies in their browser. If you're looking for something more secure you'll need to implement some backend functionality.
I am just learning html and css, and want to add javascript code that I found on here. This code basicly counts down from specific minute or second.
Here is the code:
function startTimer(duration, display) {
var timer = duration,
minutes, seconds;
setInterval(function () {
minutes = parseInt(timer / 60, 10)
seconds = parseInt(timer % 60, 10);
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.textContent = minutes + " minutes " + seconds + " seconds";
if (--timer < 0) {
timer = duration;
}
}, 1000);
}
window.onload = function () {
var fiveMinutes = 60 * 28.4,
display = document.querySelector('#time');
startTimer(fiveMinutes, display);
};
How could I use this code multiple times? With different time settings. All on same page ofcourse.
I have this code in countdown.js file, and it works great. But If I try to make "countdown2.js" etc, and use that, it wont work. I changed "#time" in code to "time2" etc, and did same in html code.
Sorry for bad explanation. I dont realy know javascript yet, as I havent started learning it quite yet. But I realy need countdown on my site to appear 5 times, each time with different time settings. And I can only display it once.
try this
window.onload = function () {
var timer1 = 60 * 28.4,
display1 = document.querySelector('#time1');
startTimer(timer1, display1);
var timer2 = 60 * 28.5,
display2 = document.querySelector('#time2');
startTimer(timer2, display2);
//... Continues
};
The output will be shown in tags with ids time1 and time2 respectively.
Hello my countdown not Stop at zero i need to change my test when countdown going to zero, This countdown start again after zero value i need to replace value after countdown is zero ..... $countdown = 50
function startTimer(duration, display) {
var start = Date.now(),
diff,
minutes,
seconds;
function timer() {
// get the number of seconds that have elapsed since
// startTimer() was called
diff = duration - (((Date.now() - start) / 1000) | 0);
// does the same job as parseInt truncates the float
minutes = (diff / 60) | 0;
seconds = (diff % 60) | 0;
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.textContent = minutes + ":" + seconds;
if (diff <= 0) {
// add one second so that the count down starts at the full duration
// example 05:00 not 04:59
start = Date.now() + 1000;
}
};
// we don't want to wait a full second before the timer starts
timer();
setInterval(timer, 1000);
}
window.onload = function () {
var fiveMinutes = <?php echo $countdown?>
display = document.querySelector('#time');
startTimer(fiveMinutes, display);
};
PHP In body
if ($countdown>3){
echo "Next Submit: Wait <span id='time'></span>";
}else{
echo "Next Submit: READY....!";
}
You should save the setInterval() call to a variable.
var myTimer = setInterval();
This way you can reference it later. Then, you can have a call within your function to check for a certain condition (in your case when the countdown reaches 0) and then use clearInterval() to end the timer.
Topic covering clearInterval()