每次页面刷新时在计数器计时器中显示正确的时间

时间：2015-05-09 18:01:37

标签： javascript php mysql

嗯！我不知道如果我的头衔正确甚至......我正在制作一个在线考试系统.. 我现在卡在一个页面里.. 我有一个页面，我一个接一个地显示问题，即点击下一个和上一个按钮，从数据库中显示相应的问题。在问题之前，我有一个计时器计数器，显示剩下的考试时间。 当我进入考试页面时，一切正常.1问题显示，计数器开始。 当我点击下一个按钮的下一个按钮（下一个＆上一个是提交按钮）时，问题就开始了，页面会在下一个问题显示时刷新，然后计数器从头开始。这里是代码用于显示问题以及JS中的计数器...... 

<?php

require_once('connect.php');
session_start();
if(!isset($_SESSION['ta'])){
$_SESSION['ta']=0;
}
if(!isset($_SESSION['qno'])){
$_SESSION['qno']=1;
$q2=$_SESSION['qno'];

}
else{

if(isset($_POST['next'])){

    $q2=$_POST['q2'];
    $ans=$_POST['ans'];
    $_SESSION['qno']+=1;
    $reply=$_POST['question1'];
    if(isset($_POST['question1'])){

    $query="select `qno` from `answer` where `uname`='{$_SESSION['user']}'
 and `qno`='$q2'";
    $q_r=mysqli_query($con,$query);

    $n1=mysqli_num_rows($q_r);

    if($n1<1){

        $_SESSION['ta']+=1;

    }


    $query="select `qno` from `answer` where `uname`='{$_SESSION['user
and `qno`='$q2'";
    $q_r=mysqli_query($con,$query);

    $n=mysqli_num_rows($q_r);

    if($n>0){
        $new_quer="update `answer` set `reply`='$reply' where 
`uname`='{$_SESSION['user']}' and `qno`='$q2'";
        mysqli_query($con,$new_quer);

    }
    else{
        $new_q="insert into `answer`
 values('{$_SESSION['user']}',$q2,year(now()),'$ans','$reply')";
        mysqli_query($con,$new_q);
    }



    $reply="";
}
}

if(isset($_POST['previous'])){
    $_SESSION['qno']-=1;
    $query="select `reply` from `answer` where 
`uname`='{$_SESSION['user']}' and `qno`='{$_SESSION['qno']}'";
    $q_r=mysqli_query($con,$query);
    while($row=mysqli_fetch_array($q_r)){
        $reply=$row['reply'];   
    }
}


if(isset($_POST['exam_submit'])){

        $q2=$_POST['q2'];
        $ans=$_POST['ans'];
        $reply=$_POST['question1'];
        $query="select `qno` from `answer` where 
`uname`='{$_SESSION['user']}' and `qno`='$q2'";
        $q_r=mysqli_query($con,$query);

        $n=mysqli_num_rows($q_r);

        if($n>0){
            $new_quer="update `answer` set `reply`='$reply' where 
`uname`='{$_SESSION['user']}' and `qno`='$q2'";
            mysqli_query($con,$new_quer);
        }
        else{
            $all_quer="insert into `answer` 
            values('{$_SESSION['user']}',
{$_SESSION['qno']},year(now()),'$ans','$reply')";
            mysqli_query($con,$all_quer);

        }
        $new_q="insert into `answer` 
values('{$_SESSION['user']}',$q2,year(now()),'$ans','$reply')";
        mysqli_query($con,$new_q);
        header('Location:result.php');      
}
} 

$q="select * from `uquestion` where `qno`='{$_SESSION['qno']}' and 
`uname`='{$_SESSION['user']}'";
$result=mysqli_query($con,$q);

if ($result) {

while($row=mysqli_fetch_array($result)){

$qno = $row['qno'];
$question = $row['question'];
$op1 = $row['op1'];
$op2 = $row['op2'];
$op3 = $row['op3'];
$op4 = $row['op4'];
$answer = $row['answer'];

}
}

?>

<div id="counter">
<form name="counter" style="text-align:center;" action="result.php"
method="post">
<input type="text" name="hh" id="hh" size="5" style="margin-top:5px; 
height:25px; text-align:center; font-size:18px; 
font-weight:bold; font-family:Verdana; color:blue; text-align:center;"> 
<input type="text" name="mm" id="mm" size="5" style="margin-top:5px;
height:25px; text-align:center; font-size:18px; 
font-weight:bold; font-family:Verdana; color:green; text-align:center;"> 
<input type="text" name="ss" id="ss" size="5" style="margin-top:5px;
height:25px; text-align:center; font-size:18px; 
font-weight:bold; font-family:Verdana; color:red; text-align:center;">
<br>   </form> </div>
<span style="margin-left: 39.7%; font-family:Verdana; font-weight:bold;
font-size:17px; color:blue">  
Hour </span> 
<span style="margin-left: 3.3%; font-family:Verdana; font-weight:bold; 
font-size:17px; color:green;">  
Minute </span>
<span style="margin-left:2.1%; text-align:center; font-family:Verdana;
font-weight:bold; font-size:17px; color:red;">  
Second </span>

<div style="margin-top:13px; background:-moz-linear-
gradient(top,white,#FCF,#E6E6E6,#FFF8DC); 
width:50%; margin-left:22%; padding-top:11px; padding-bottom:12px; 
padding-left:2%;">

<form name="exam" method="post" action="exam.php">
<input type="hidden" name="ans" value="<?php echo $answer; ?>">
<input type="hidden" name="q2" value="<?php echo $_SESSION['qno']; ?>">
 <table width="100%" cellpadding="5">
<tr> <td style="border-bottom:2px solid blue; font-size:15px; color:blue; 
font-weight:bold;
text-shadow:rgba(160,160,200,0.5) 5px 6px 4px; font-family:Verdana;">
Question : </td> </tr>
<tr> <td style="font-size:16px; color:red; font-weight:bold; 
text-shadow:rgba(200,160,170,0.6) 6px 7px 4px;
font-family:verdana;"> 
<?php echo $question ?> </td> </tr>

<tr> <td style="text-shadow:rgba(160,200,270,0.5) 5px 6px 4px; 
font-size:14px; color:green; font-weight:bold;
font-family:verdana;">

<input type="radio" name="question1" id="q1" value="op1" <?php    
if($reply=="op1"){ echo 'checked="checked"';}

 ?> />
<?php echo $op1; ?></td> </tr>
<tr> <td style="text-shadow:rgba(160,200,270,0.5) 5px 6px 4px; 
font-size:14px; color:green; font-weight:bold;
font-family:verdana;">
<input type="radio" name="question1" id="q2" value="op2" <?php 
if($reply=="op2"){ echo 'checked="checked"';}?> /> 
<?php echo $op2;  ?> </td> </tr>
<tr> <td style="text-shadow:rgba(160,200,170,0.5) 5px 6px 4px; 
font-size:14px; color:green; font-weight:bold;
font-family:verdana;">
<input type="radio" name="question1" id="q3" value="op3" <?php 
if($reply=="op3"){ echo 'checked="checked"';}?> /> 
<?php echo $op3;  ?> </td> </tr>
<tr> <td style="text-shadow:rgba(160,200,170,0.5) 5px 6px 4px; 
font-size:14px; color:green; font-weight:bold;
font-family:verdana;">
<input type="radio" name="question1" id="q4" value="op4" <?php 
if($reply=="op4"){ echo 'checked="checked"';}?> /> 
<?php echo $op4;  ?> </td> </tr>
<tr> <td>
<input type="submit" name="previous" value="Previous" style="width:16%; 
 height:30px;" <?php if($qno==1)
 echo 'disabled="disabled"'?>>
 <input type="submit" name="next" value="Next" style="width:16%; 
height:30px;" <?php if($qno==5)
echo 'disabled="disabled"'?>>  </td> </tr>

<tr> <td style="text-shadow:rgba(160,160,200,0.5) 4px 5px 4px; 
font-size:12px; color:#03F; font-weight:bold;
font-family:verdana; border-top:2px solid blue;"> Question <?php 
echo $qno; ?> of 10 </td> </tr>
<tr> <td style="text-shadow:rgba(160,160,200,0.5) 4px 5px 4px;
font-size:12px; color:#03F; font-weight:bold;
font-family:verdana;"> Total Attempted : <?php echo $_SESSION['ta']; ?> 
</td> </tr>

<tr> <td>
<input type="submit" name="exam_submit" value="I'm done!Submit Test"
onclick="return confirm('Are you Sure?')"
style="width:97%; height:37px; background:green;
color:white; font-family:Verdana; font-size:15px; font-weight:bold;">
  </td> </tr> 
 </table>
</form>

<script language="javascript">

var sec=0; 
var mins=1; 
document.counter.hh.value=00;
document.counter.mm.value=mins;
document.counter.ss.value=sec;
function display(){
if(document.counter.mm.value=="00" &&  document.counter.ss.value=="00"){
    document.counter.submit();
}

if (sec<=0){ 
sec=60 
mins-=1 
} 
if (mins<=-1){ 
sec=0 
mins+=1 
} 
else 
sec-=1

if(sec<10){
sec=sec*1;
sec='0'+sec;
}
if(mins<10){
mins=mins*1;
mins='0'+mins;
}

document.counter.mm.value=mins;
document.counter.ss.value=sec;

setTimeout("display()",1000)

}

display();

</script>
</div>

请建议如何处理它。您的帮助非常感谢。

2 个答案:

答案 0 :(得分：0)

您需要在服务器端运行计数器，可能使用会话。

以下是如何做到这一点。

$_SESSION['startTime'] = time();

然后在每个页面上使用javascript，您可以使用会话变量作为起始点运行倒数计时器，当用户单击按钮时，您可以使用以下命令更新倒数计时器的值：

 $currentTime = time() - $_SESSION['startTime'];

答案 1 :(得分：0)

你应该只使用秒钟来计算一下，这样就更容易管理了，无论如何我已经做了适合你的JavaScript代码。

首先在考试 - 命名表单中添加隐藏字段，并为其赋予PHP的值：

<?php
if(isset($_POST["howMuchTime"]) && $_POST["howMuchTime"] > 0) {
    $hmt = $_POST["howMuchTime"];
}
else { $hmt = 0;}
?>
<input type="hidden" name="howMuchTime" value="<?php echo $hmt; ?>" />

然后，在您的JavaScript代码中声明以下变量：

var totalTime = 450; // 7 minutes and 30 seconds
var hmt = document.exam.howMuchTime.value: // Keeps track of how much time is elapsed from the examination start
var timer = totalTime - hmt;

并改变你的小时 - 分钟 - 秒变量：

var hours = parseInt(timer / 3600); // Changes the "timer" var in hours
var mins = parseInt((timer - (hours * 3600)) / 60); //Changes the "timer" var in minutes
var sec = timer - (hours * 3600) - (mins * 60); // Changes the "timer" var in seconds
// And then the counter hh-mm-ss displayed
document.counter.hh.value = hours;
document.counter.mm.value = mins;
document.counter.ss.value = sec;

更改if函数中第一个display()语句中的条件：

if(document.counter.hh.value == "00" && document.counter.mm.value == "00" && document.counter.ss.value == "00")

并在display()函数中添加：

if(hours < 10) {
    // Add the first 0 to the "hours" value like you have done for minutes and seconds
    hours = hours * 1;
    hours = '0' + hours;
}

每次执行该功能时，也会更新小时值：

document.counter.hh.value = hours;

在display()函数中更新您在考试命名表单中创建的 howMuchTime 计数器（隐藏输入）：

document.exam.howMuchTime.value++;

经过测试，效果非常好。

相关问题
最新问题