I was wondering if someone would tell me how I can make the session expire at the same time the timer reaches zero. That way, the timer can be reset if the page is refreshed after the time runs out but not before.
I also noticed the timer starts at 24 seconds even though it's set for a 30 second countdown. What's the reason for that and can it be fixed? I changed the 'var seconds_delay = 5' to zero but it did not help.
I was wondering if someone would tell me how I can make the session expire at the same time the timer reaches zero. That way, the timer can be reset if the page is refreshed after the time runs out but not before.
I also noticed the timer starts at 24 seconds even though it's set for a 30 second countdown. What's the reason for that and can it be fixed? I changed the 'var seconds_delay = 5' to zero but it did not help.
Thanks,
Jeff
Well first, I don't know why you are getting 24 when you set it to 30.
It works perfectly for me.
And second, don't set seconds_delay to less than 1.
Otherwise the setTimeout() will trigger more often than it needs to.
And to answer your first question last, it is very possible to make your session expire when the timer runs out.
It would be fairly easy if we were using cookies, but we started with sessions so we will use sessions.
The program is looking to see if $_SESSION["end_time"] is empty.
So when the timer ends, we want to assign a null value to $_SESSION["end_time"].
But we can't do that directly with Javascript, because the $_SESSION["end_time"] variable will be reset to a null valve every time the Javascript code is re-evaluated, regardless if it's in a function or loaded into a variable.
So, we will need to use AJAX to call a PHP page that will do nothing but reset the $_SESSION["end_time"] variable to a null value.
So, we will have a main page that has the timer code in it and we will have another page called "reset_session.php" that is called by AJAX.
main page
PHP Code:
<?php session_start();
/* If you refresh the page or leave the page to browse and come back then the timer will continue to count down until finished. */
// $hours, $minutes and $seconds are added together to get total time. $hours = 0; // Enter hours $minutes = 0; // Enter minutes $seconds = 30; // Enter seconds $time_limit = ($hours * 60 * 60) + ($minutes * 60) + $seconds; // Convert total time into seconds if(empty($_SESSION["end_time"])){$_SESSION["end_time"] = mktime(date(G),date(i),date(s),date(m),date(d),date(Y)) + $time_limit;} // Add $time_limit (total time) to start time. And store into session variable. ?> <html> <head> <style> #clock { border:2px solid red; font-family:verdana; font-size:16pt; font-weight:bold; background: #FECFC7; width:125px; text-align:center; color:#000000; } </style> <script> var seconds_delay = 1; // Adjust this value for number of seconds to delay before changing the time display, minimum 1. var ct,mins,secs,hrs,sw = 1; function calculate_time() { var end_time = "<?php echo $_SESSION["end_time"]; ?>"; // Get end time from session variable (total time in seconds). var dt = new Date(); // Create date object. var time_stamp = dt.getTime()/1000; // Get current minutes (converted to seconds). var total_time = end_time - Math.floor(time_stamp); // Subtract current seconds from total seconds to get seconds remaining. hrs = Math.floor(total_time / 60 / 60); mins = Math.floor((total_time / 60) - (hrs * 60)); // Extract minutes from seconds remaining. secs = total_time - ((mins * 60) + (hrs * 60 * 60)); // Extract remainder seconds if any. if(secs < 10){secs = "0" + secs;} // Check if seconds are less than 10 and add a 0 in front. if(mins < 10){mins = "0" + mins;} // Check if minutes are less than 10 and add a 0 in front. if(hrs < 10 && hrs > -1){hrs = "0" + hrs;} // Check if hourss are less than 10 and add a 0 in front. document.getElementById("clock").value = hrs + ":" + mins + ":" + secs; // Display remaining minutes and seconds.
// This if statement adjusts time to increments of seconds_delay if(secs % seconds_delay > 0) { sw = 0; ct = setTimeout("calculate_time()",500); } else{sw = 1;} // Check for end of time, stop clock and display message. if((hrs < 0 && mins >= 0 && secs >= 0) || (hrs == 0 && mins == 0 && secs == 0)) { clearTimeout(ct); document.getElementById("clock").value = "00:00:00"; sw = 0; reset_session(); alert("The time is up."); } if(sw){ct = setTimeout("calculate_time()",seconds_delay * 1000);} // Display the time once every seconds_increment seconds. 1000 equals approximatly 1 second. } function reset_session() { var ajaxReq=GetXmlHttpObject(); ajaxReq.open("GET","reset_session.php",true); ajaxReq.onreadystatechange=function(){ if(ajaxReq.readyState==4 && ajaxReq.status==200) { var reset_session=ajaxReq.responseText; } } ajaxReq.send(null); } function GetXmlHttpObject() { if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari return new XMLHttpRequest(); } if (window.ActiveXObject) { // code for IE6, IE5 return new ActiveXObject("Microsoft.XMLHTTP"); } return null; } </script> </head> <body onload="ct = setTimeout('calculate_time()',1);"> <!-- // Start clock. // --> <input id="clock" readonly> </body> </html>
Linear Mode
