A
Anonymous
Guest
Hey guys!
I have the following countdown timer and everything seems to be working. There are just a few problem with the code. First of all, when I keep clicking on start, it will countdown at a faster rate, is there a way to fix this? Someone mentioned to add clearInterval? I tried to add that that to my stop() but it doesn't work. I also have an input form, where it should be grabbing the timer result once the user has stopped the timer. At the moment, it is grabbing both the string <br></br as well, which is not what I want... Here is my code:
P.S Does anyone have a better countdown timer that I can use?
I have the following countdown timer and everything seems to be working. There are just a few problem with the code. First of all, when I keep clicking on start, it will countdown at a faster rate, is there a way to fix this? Someone mentioned to add clearInterval? I tried to add that that to my stop() but it doesn't work. I also have an input form, where it should be grabbing the timer result once the user has stopped the timer. At the moment, it is grabbing both the string <br></br as well, which is not what I want... Here is my code:
Code:
<?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() {
clearInterval('time');
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>
<span class="timer_display" id="time" ...></span>
<input type="test" id="input">
<h1 id="buttons"></h1>
<button type="submit" name="start" onclick="startTimer()">Start</button>
<button type="submit" name="stop" onclick="stop()">Stop</button>
</div>
</div>
</body>
</html>P.S Does anyone have a better countdown timer that I can use?