How to output a count down timer with javascript and php

Hey guys!

I hope that I can post a php or javascript program code here because I can’t find the section anywhere. I have got a count down timer working in javascript and have included the source file in my script tag in html… I am new to javascript but would like to output the time whenever the user stops the code and to use that in my php script, not sure how to do that but here is the code:

html code:

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<link rel="stylesheet" type="text/css" href="stopwatch.css">
	<link rel="stylesheet" type="text/css" href="">
	<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
</head>
<body>
  <div class="container">
     <h1 class="title">Stopwatch</h1>
     <h1 id="timerLabel">00:00:00</h1>
     <input type="button" value="START" class="myButton" onclick="start()" id="startBtn">
     <input type="button" value="STOP" class="myButton" onclick="stop()">
     <input type="button" value="RESET" class="myButton" onclick="reset()">
   </div>
   <script src="timer2.js">
   	
 



   </script>
</body>
</html>

Java code:

var status =0;
var time = 0;

function start() {
   status = 1;
   document.getElementById("startBtn").disabled = true;
   timer();
}

function stop() {
   status = 0;
   
    
}

function reset() {
   status = 0;
   time = 0;
   document.getElementById("startBtn").disabled = false;
   document.getElementById("timerLabel").innerHTML = "00:00:00";
}

function timer() {
   if (status == 1) {
   	   setTimeout(function() {
   	      time++;
   	      var min = Math.floor(time/100/60);
   	      var sec = Math.floor(time/100);
   	      var mSec = time % 100;

   	      if(min < 10) {
   	      	   min = "0" + min;
   	      }

   	      if (sec >= 60) {
   	      	 sec = sec % 60;
   	      }

   	      if (sec < 10) {
   	         sec = "0" + sec;

   	      }

   	      document.getElementById("timerLabel").innerHTML = min + ":" + sec + ":" + mSec;
   	      timer();
   	      
   	   }, 10);
   }
}

I’ve edited your post for readability. When you enter a code block into the forum, precede it with a line of three backticks and follow it with a line of three backticks to make easier to read. See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.

markdown_Forums


I’ve also edited your post by changing Java to JavaScript: Java is a completely different language, and you’re more likely to get help if you’re asking about the correct thing.

Hey guys!

I have the following code that displays a timer but I would like to have an output so that I can use it in php to do a if statement with, is this possible?

This is my html code:


<!DOCTYPE html>
<html>
<head>
	<title></title>
	<link rel="stylesheet" type="text/css" href="stopwatch.css">
	<link rel="stylesheet" type="text/css" href="">
	<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
</head>
<body>
  <div class="container">
     <h1 class="title">Stopwatch</h1>
     <h1 id="timerLabel">00:00:00</h1>
     <input type="button" value="START" class="myButton" onclick="start()" id="startBtn">
     <input type="button" value="STOP" class="myButton" onclick="stop()">
     <input type="button" value="RESET" class="myButton" onclick="reset()">
     <h1 id="timerResult"></h1>
<input type="button" class="myButton" onclick="output()" value="Output">

   
   </div>
   <script src="timer2.js">
   	
 





   </script>
</body>
</html>

This is my timer.js code:

var status =0;
var time = 0;

function start() {
   status = 1;
   document.getElementById("startBtn").disabled = true;
   timer();
}

function stop() {
   status = 0;
   
}

function reset() {
   status = 0;
   time = 0;
   document.getElementById("startBtn").disabled = false;
   document.getElementById("timerLabel").innerHTML = "00:00:00";
}

function timer() {
   if (status == 1) {
   	   setTimeout(function() {
   	      time++;
   	      var min = Math.floor(time/100/60);
   	      var sec = Math.floor(time/100);
   	      var mSec = time % 100;

   	      if(min < 10) {
   	      	   min = "0" + min;
   	      }

   	      if (sec >= 60) {
   	      	 sec = sec % 60;
   	      }

   	      if (sec < 10) {
   	         sec = "0" + sec;

   	      }

   	      document.getElementById("timerLabel").innerHTML = min + ":" + sec + ":" + mSec;
   	      timer();
   	      
   	   }, 10);
   }


   
}

function output() {
 document.getElementById('timerResult').innerHTML = document.getElementById('timerLabel').innerHTML;
}


I have been trying to get some assistance with this timer and someone informed me that the output button should output the timer on the page with that output function but when I clicked on the output button, nothing is showing. The button doesn’t seem to work…

I am not sure if the output function is correct but basically what I am trying to do is to display the timer on the page whenever the user has stopped the clock and to do some if statement in php to give the user points… The output button doesn’t seem to click

My apologies…

It didn’t work before but not sure whether did I click it properly or not… The other thing that I would like to know is that how would I use this value in php? I would like to use some if statements but php and javascript are two different languages correct? Sorry, I am new to javascript …

Sorry about that and I will try to be more specific… Basically, I would like to use this timer output in php to check for certain conditions. I would like to give the user certain points if they do a test within a certain time…That is why I like to output this timer so that the user doesn’t cheat and it is stored somewhere as a string variable, to be used in my php processing page

yes, that is correct. Sorry for the confusion earlier… I am basically creating a piano website and trying to give the user certain music test at the end of each video that they have watched. I would like to time them and if they can do the test within a certain time, reward them with points… Let’s say that the user finished in under a minute, then I can give them 500 points, if they finished under 5 mins, to give them 300 points etc

Initially, I was thinking about having an automatic timer that starts when they begin the test and counting down if possible. I think this would prevent them from cheating as they can stop the timer anytime with this current timer…I think a countdown timer is better than one that is counting up. Then, it should automatically save the timer result in a string variable once they have finished the test or in a database…

hey guys!

I have managed to get my timer working but at the moment, it is counting up instead of down, not sure how to change that but I have also managed to output the timer in my php section and to update the database. The strange thing is that sometimes, the update will work and update the time but then sometimes, it will just update to 0. Should I just use time function in the database or timestamp?


<?php

if (!isset($_POST['submit'])) {
    header("Location: index.php?timer2=error");
} else {

include_once 'includes/dbh.php';



$test = $_POST['timer'];



$userid = 'piano0011';




$sql = "UPDATE primerlevel_tests
        SET time_achieved = ?
        WHERE user_uid = ?
       ";

$stmt = mysqli_stmt_init($conn);
        if (!mysqli_stmt_prepare($stmt, $sql)) {
          echo 'SQL error';
        } else {
          mysqli_stmt_bind_param($stmt, "ss", $test, $userid);
          mysqli_stmt_execute($stmt);
        }



 }
?>







<!DOCTYPE html>
<html>
<head>
	<title></title>
	<link rel="stylesheet" type="text/css" href="stopwatch.css">
	<link rel="stylesheet" type="text/css" href="">
	<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
</head>
<body>
  <form action="" method="POST">
  <input type ="text" name="timer" id='test1' >
   <button type="submit" name="submit">Click here to submit result</button>
  <div class="container">
     <h1 class="title">Stopwatch</h1>
     <h1 id="timerLabel">00:00:00</h1>
      <h1 id="timerResult"></h1>
     <input type="button" value="START" class="myButton" onclick="start()" id="startBtn">
     <input type="button" value="STOP" class="myButton" onclick="stop()">
     <input type="button" value="RESET" class="myButton" onclick="reset()">

<input type="button" class="myButton" onclick="output()" value="output">


   
   </div>
</form>
   
   <script>
var status =0;
var time = 0;

function start() {
   status = 1;
   document.getElementById("startBtn").disabled = true;
   timer();
}

function stop() {
   status = 0;
   
}

function reset() {
   status = 0;
   time = 0;
   document.getElementById("startBtn").disabled = false;
   document.getElementById("timerLabel").innerHTML = "00:00:00";
}

function timer() {
   if (status == 1) {
       setTimeout(function() {
          time++;
          var min = Math.floor(time/100/60);
          var sec = Math.floor(time/100);
          var mSec = time % 100;

          if(min < 10) {
               min = "0" + min;
          }

          if (sec >= 60) {
             sec = sec % 60;
          }

          if (sec < 10) {
             sec = "0" + sec;

          }

          document.getElementById("timerLabel").innerHTML = min + ":" + sec + ":" + mSec;
          timer();
          
       }, 10);
   }


   
}

function output() {
 var x = document.getElementById('timerResult').innerHTML = document.getElementById('timerLabel').innerHTML;

 document.getElementById('test1').value = x;

}






    
   </script>

  

 

 </form>


   
</body>
</html>








thanks and I am just wondering how to change the code to make it count down?

I have changed the timer() time-- but it looks really weird:


<!DOCTYPE html>
<html>
<head>
	<title></title>
	<link rel="stylesheet" type="text/css" href="stopwatch.css">
	<link rel="stylesheet" type="text/css" href="">
	<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
</head>
<body>
  <form action="" method="POST">
  <input type ="hidden" name="timer" id='test1' >
  
  <div class="container">
     <h1 class="title">Stopwatch</h1>
     <h1 id="timerLabel">02:00:00</h1>
      <h1 id="timerResult"></h1>
     <input type="button" value="START" class="myButton" onclick="start()" id="startBtn">
     <input type="button" value="STOP" class="myButton" onclick="stop()">
     <input type="button" value="RESET" class="myButton" onclick="reset()">
      <button class="myButton" type="submit" name="submit">Submit Result</button>
<input type="button" class="myButton" onclick="output()" value="output">
<br></br>
<br></br>
<p class="instruction">Make sure that you click on the output button first before submitting your result</p>
   
   </div>
</form>
   
   <script>
var status =0;
var time = 0;

function start() {
   status = 1;
   document.getElementById("startBtn").disabled = true;
   timer();
}

function stop() {
   status = 0;
   
}

function reset() {
   status = 0;
   time = 0;
   document.getElementById("startBtn").disabled = false;
   document.getElementById("timerLabel").innerHTML = "00:00:00";
}

function timer() {
   if (status == 1) {
       setTimeout(function() {
          time--;
          var min = Math.floor(time/100/60);
          var sec = Math.floor(time/100);
          var mSec = time % 100;

          if(min < 10) {
               min = "0" + min;
          }

          if (sec >= 60) {
             sec = sec % 60;
          }

          if (sec < 10) {
             sec = "0" + sec;

          }

          document.getElementById("timerLabel").innerHTML = min + ":" + sec + ":" + mSec;
          timer();
          
       }, 10);
   }


   
}

function output() {
 var x = document.getElementById('timerResult').innerHTML = document.getElementById('timerLabel').innerHTML;

 document.getElementById('test1').value = x;

}

Hey guys!

I have a countdown timer and there are several issues here. Whenever, I click on the start button, the timer does start but if I keep clicking on it, it will speed it up. I also can’t get the buttons to align it to the center when I did margin 15% auto for my main div class and when I tried to include the form attribute, the timer stops working for some reason but works without the form attribute:

<?php

$timer = 60;


?>





<!DOCTYPE html>
<html>
<head>
	<title></title>
	<link rel="stylesheet" type="text/css" href="style.css">
	<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
</head>
<body>


<script>
   var timer = <?php echo $timer ?>;    // 1 minute timer.... 
   var min = 0;
   var sec = 0;

   function startTimer() {
   	   min = parseInt(timer/60);
   	   sec = parseInt(timer%60);

   	   if(timer<1) {
   	   	   document.write("You have to start again!");
   	   }

   	   document.getElementById("time").innerHTML = "<b>Time Left:  </b>" + min.toString() + ":" + sec.toString();
   	   timer--;
   	   setTimeout(function() {
          startTimer();
   	   }, 1000);
   }



     function stop() {
     	
     	alert("Thank you for completing the test. You finished the test at: " +  min.toString() + ":" + sec.toString());
     	 
         var result = document.getElementById('time').innerHTML;
         document.getElementById('input').value = result;
    //   window.location.href = "update.php";
     }



</script>
<div class="timer">
<h1>Welcome to Timertrone.</h1>
<br></br>


   <div class="timer_display"><center><b><span id="time" ...></span></center></b></div>


<form>
<input type="text" id="input">
<h1 id="buttons"></h1>
<button type="submit" name="start" onclick="startTimer()">Start</button>
<button type="submit" name="start" onclick="stop()">Stop</button>
</div>
</form>
</body>
</html>


Here is my CSS code:

div.timer {
  margin: 15% auto;

}

 #buttons {

position: relative;
left: 200px;
}

div.timer_display {
   font-family: 'Lobster', cursive;
   font-size: 40px;
   color: blue;
   padding-top: 100px;
}

Hey!

  • Timer speed problem :
    It’s normal. In fact, each time you click on your time element, you launch again the function startTimer. So there will be multiple startTimer function that will decrease your timer each second!
    One way of stopping it is to use the clearTimeout function. You need to refactor your code in order to use clearTimeout as you’re using an anonymous function.
  • Align problem : wrap your two buttons elements in a div tag and use flexbox (align-items: center and justify-content: center)
  • Form element : I didn’t understand what you meant by form attribute ?

One last thing : your closing div tag should be after your closing form tag.

I have added the closing div after the form tag but now, the buttons are not showing…

My current code is as follows:

<?php

$timer = 60;


?>





<!DOCTYPE html>
<html>
<head>
	<title></title>
	<link rel="stylesheet" type="text/css" href="style.css">
	<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
</head>
<body>


<script>
   var timer = <?php echo $timer ?>;    // 1 minute timer.... 
   var min = 0;
   var sec = 0;

   function startTimer() {
   	   min = parseInt(timer/60);
   	   sec = parseInt(timer%60);

   	   if(timer<1) {
   	   	   document.write("You have to start again!");
   	   }

   	   document.getElementById("time").innerHTML = "<b>Time Left:  </b>" + min.toString() + ":" + sec.toString();
   	   timer--;
   	   setTimeout(function() {
          startTimer();
   	   }, 1000);
   }



     function stop() {
     	
     	alert("Thank you for completing the test. You finished the test at: " +  min.toString() + ":" + sec.toString());
     	 
         var result = document.getElementById('time').innerHTML;
         document.getElementById('input').value = result;
    //   window.location.href = "update.php";
     }



</script>
<div class="timer">
<h1>Welcome to Timertrone.</h1>
<br></br>
<form>

   <div class="timer_display" id="time" ...>



<input type="text" id="input">
<h1 id="buttons"></h1>
<button type="submit" name="start" onclick="startTimer()">Start</button>
<button type="submit" name="stop" onclick="stop()">Stop</button>

</form>
</div>
</div>
</body>
</html>

I think the problem might be the span tag but not sure but would be great if I can get the form tag working in there …

I have almost got it to work but the timer is not picked up by the php post variable: I am trying to output it into the textbox in my form section:

<?php

$timer = 60;
$result = $_POST['timer'];
echo $result;

?>





<!DOCTYPE html>
<html>
<head>
	<title></title>
	<link rel="stylesheet" type="text/css" href="style.css">
	<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
</head>
<body>


<script>
   var timer = <?php echo $timer ?>;    // 1 minute timer.... 
   var min = 0;
   var sec = 0;

   function startTimer() {
   	   min = parseInt(timer/60);
   	   sec = parseInt(timer%60);

   	   if(timer<1) {
   	   	   document.write("You have to start again!");
   	   }

   	   document.getElementById("time").innerHTML =  + min.toString() + ":" + sec.toString();
   	   timer--;
   	   setTimeout(function() {
          startTimer();
   	   }, 1000);
   }



     function stopTimer() {
     
     alert("Thank you for completing the test. You finished the test at: " +  min.toString() + ":" + sec.toString());
     	  
         var result = document.getElementById('time').innerHTML;
         document.getElementById('input').value = result;
    //   window.location.href = "update.php";
     }



</script>
<form>
<div class="timer">
<h1>Welcome to Timertrone.</h1>
<br></br>
<form action="" method="POST">

  <b>Time Left:  </b> <span class="timer_display" id="time"> ...</span>



<input type="text" name="timer" id="input">
<h1 id="buttons"></h1>
<button type="button" name="start" onclick="startTimer()">Start</button>
<button type="submit" name="stop" onclick="stopTimer()">Stop</button>

</form>



</div>
</div>
</body>
</html>

I don’t get why you should involve php in here instead of dealing with it all in js???

When i’m too lazy to write my own date/time functions i just throw in moment.js lib and let it do the stuff for me :slight_smile:

1 Like

I fully agree with you.

My apologies… i must have forgotten that i had a thread already…