I am creating an online exam page for my project. I have a countdown timer, but it resets on page refresh. How can I make it not to reset? The timer is set by fetching time from db. I am using php mysql. Please help me. Here is my code.
<?php
$result=mysql_query("select * from test where testid='29'");
while($time=mysql_fetch_array($result)){
$dateFormat = "d F Y -- g:i a";
$targetDate = time() + ($time['duration']*60);
$actualDate = time();
$secondsDiff = $targetDate - $actualDate;
$remainingDay = floor($secondsDiff/60/60/24);
$remainingHour = floor(($secondsDiff-($remainingDay*60*60*24))/60/60);
$remainingMinutes = floor(($secondsDiff-($remainingDay*60*60*24)-($remainingHour*60*60))/60);
$remainingSeconds = floor(($secondsDiff-($remainingDay*60*60*24)-($remainingHour*60*60))-($remainingMinutes*60));
$actualDateDisplay = date($dateFormat,$actualDate);
$targetDateDisplay = date($dateFormat,$targetDate);
}
?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
var days = <?php echo $remainingDay; ?>
var hours = <?php echo $remainingHour; ?>
var minutes = <?php echo $remainingMinutes; ?>
var seconds = <?php echo $remainingSeconds; ?>
function setCountDown ()
{
seconds--;
if (seconds < 0){
minutes--;
seconds = 59
}
if (minutes < 0){
hours--;
minutes = 59
}
if (hours < 0){
hours = 23
}
document.getElementById("remain").innerHTML = " "+hours+" hr "+minutes+" min "+seconds+" sec";
SD=window.setTimeout( "setCountDown()", 1000 );
if (minutes == '00' && seconds == '00') {
seconds = "00"; window.clearTimeout(SD);
window.location = "result.php"
}
}
</script>
</head>
<body onLoad="setCountDown();">
<div id="remain">
<?php echo "$remainingHour hours, $remainingMinutes minutes, $remainingSeconds seconds";?>
</div>
You should read the value into session variable and using that afterwards:
<?php
session_start();
if (isset($_SESSION['targetdate'])) {
// session variable_exists, use that
$targetDate = $_SESSION['targetdate'];
} else {
// No session variable, red from mysql
$result=mysql_query("select * from test where testid='29' LIMIT 1");
$time=mysql_fetch_array($result);
$dateFormat = "d F Y -- g:i a";
$targetDate = time() + ($time['duration']*60);
$_SESSION['targetdate'] = $targetDate;
}
$actualDate = time();
$secondsDiff = $targetDate - $actualDate;
$remainingDay = floor($secondsDiff/60/60/24);
$remainingHour = floor(($secondsDiff-($remainingDay*60*60*24))/60/60);
$remainingMinutes = floor(($secondsDiff-($remainingDay*60*60*24)- ($remainingHour*60*60))/60);
$remainingSeconds = floor(($secondsDiff-($remainingDay*60*60*24)- ($remainingHour*60*60))-($remainingMinutes*60));
$actualDateDisplay = date($dateFormat,$actualDate);
$targetDateDisplay = date($dateFormat,$targetDate);
?>
When the user starts the exam, save the start time in the database. Use that for everything. Don't rely on client side code for this as the user can easily modify it.
If you save the start time, you know when the user started and what the current time is. You can use that to see if time is up or not. A javascript timer is good to show how much time is remaining, but it should be getting that info from the database.
You'll probably need to register a table like active_exams with an examId field and datetimeStarted. Then load the timer as the number of seconds for that exam since it was started.
You may be able to create some workaround with cookies, localStorage or even the session but keep in mind those will be modifiable (or at least forgettable in the case of the session) by the user.
Page refresh doesn't matter if you have the Timer's "start-time" saved in your database for particular user.
Fetch this "start-time" from database and compute it to get the consumed time and accordingly show the remaining or elapsed time.
来源：https://stackoverflow.com/questions/11272190/how-to-make-countdown-timer-to-not-reset-on-page-refresh