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:
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.
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.
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?
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
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…
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>
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;
}
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.
