A timer function in PHP using javascript

In the following example, a timer function is designed. The user need to provide input of timer function, as the timer proceeds, the color of progress bar is changing.

<html>
<head>
<title></title>

<script language="javascript" type="text/javascript">
var id = null;
 
function myStartFunction(totalTime) 
{
  var txtbox = document.getElementById("txtbox"); 
  var mytable = document.getElementById("mytable"); 
  
  var width = 0;
  id = setInterval(frame, totalTime);
  function frame() 
  {
    if (width == totalTime) 
  {
      clearInterval(id);
    
    /*
    Here we need the logic to jump to the next question
    For example, if we have a form named "frm", to post the form we can write:
    document.frm.submit();
    
    We need to have the ID of next questioned stored in a hidden field "hidtxt" so that
    when the form is submitted, we can pick that ID in the post variable, then run the 
    select query on the ID to retrieve the question.
    */
    
    document.frm.submit();
    } 
  else 
  {
      width++; 
      mytable.style.width = width + '%'; 
    txtbox.value= width;
    
    if(width==totalTime/4)	  
      mytable.style.backgroundColor="#99FF00";
      else if(width==totalTime/2)  
        mytable.style.backgroundColor="#FFFF00";
    else if(width==(totalTime*3)/4)  
        mytable.style.backgroundColor="#FF6600";  
    else if(width==totalTime)  
        mytable.style.backgroundColor="#FF0000";  	  
    
    }
  }
}


function myStopFunction() 
{
    clearInterval(id);
}

</script>
</head>

<body>

<?php

echo $_POST['hidtxt'];
?>

<form id="frm" name="frm" method="post" action="">
<table id="mytable" border="1" bgcolor="#006600"><tr><td>&nbsp;</td></tr></table>
Current Counter value: &nbsp;<input name="txtbox" type="text" id="txtbox" readonly size="5">
<br><br>
Enter total time limit: &nbsp; <input name="txtlimit" type="text" id="txtlimit" size="5">
<input id="btn1" name="btn1" type="button" value="Start" onClick="myStartFunction(document.getElementById('txtlimit').value);" />
<input id="btn2" name="btn2" type="button" onclick="myStopFunction();" value="Stop" />
<input id="btnreset" name="btnreset" type="button" onClick="window.location.href='test.php';" value="Reset">
<input id="hidtxt" name="hidtxt" type="hidden" value="put here the ID of next question as php variable">
</form>

</body>
</html>

 

Add a Comment

Your email address will not be published. Required fields are marked *