I'm trying to make a program that tests your reaction time, but I don't know how to measure the time between two events, like button clicks. Here's my code so far. Thanks in advance to anyone that can help.
<!DOCTPYE html>
<html>
<head>
<script>
var button = document.getElementById("reactionTester");
var start = document.getElementById("start");
function init() {
var startInterval/*in milliseconds*/ = Math.floor(Math.random() * 30) * 1000;
setTimeout(startTimer, startInterval);
}
function startTimer() {
/*start timer and then later use stopTimer() to stop the timer and find
the difference bettween both button clicks.*/
}
</script>
</head>
<body>
<form id="form">
<input type="button" id="reactionTester" onclick="stopTimer()">
<input type="button" value="start" id="start" onclick="init()">
</form>
</body>
</html>
I'm trying to make a program that tests your reaction time, but I don't know how to measure the time between two events, like button clicks. Here's my code so far. Thanks in advance to anyone that can help.
<!DOCTPYE html>
<html>
<head>
<script>
var button = document.getElementById("reactionTester");
var start = document.getElementById("start");
function init() {
var startInterval/*in milliseconds*/ = Math.floor(Math.random() * 30) * 1000;
setTimeout(startTimer, startInterval);
}
function startTimer() {
/*start timer and then later use stopTimer() to stop the timer and find
the difference bettween both button clicks.*/
}
</script>
</head>
<body>
<form id="form">
<input type="button" id="reactionTester" onclick="stopTimer()">
<input type="button" value="start" id="start" onclick="init()">
</form>
</body>
</html>
-
4
You don't need
setTimeout. When the user clicks on the first button, put the time in a variable. When they click on the second button, subtract that time from the current time. – Barmar Commented Jan 2, 2014 at 20:52 -
Dreamweaver want you to remove the
*/from after the setTimeout – Phlume Commented Jan 2, 2014 at 20:53
5 Answers
Reset to default 8var startTime;
function startButton() {
startTime = Date.now();
}
function stopButton() {
if (startTime) {
var endTime = Date.now();
var difference = endTime - startTime;
alert('Reaction time: ' + difference + ' ms');
startTime = null;
} else {
alert('Click the Start button first');
}
}
Bind your start and stop buttons to these functions.
DEMO
For getting the time that has passed, you'll always need a start_time and end_time. startTimer() should set a start_time variable (or something similarly named), and stopTimer() should set an end_time variable.
stopTimer() can then subtract the two times and you've got the number of milliseconds passed.
(JavaScript stores times in milliseconds, so oldTime - newTime = milliseconds passed.)
Edit: Example JSFiddle - http://jsfiddle/L3Xha/
var startTime, endTime;
// self-executing function
(function(){
// init the background to white
document.body.style.background = "white";
// reset the color of the BG after 3 seconds.
setTimeout(
function(){
document.body.style.background = "red";
startTime = Date.now();
}
, 3000);
$("#go").on("click", function(){
stopTime = Date.now();
$("#reflex").text(
"Your time was " + (stopTime - startTime) + "ms."
);
});
})();
Keep track of the time of the first click, and on the second click, display the difference between now and the first click.
var start;
$('button').click(function() {
if (undefined === start) {
start = new Date().getTime();
return;
}
alert('Time difference is:' + (new Date.getTime() - start));
});
To measure millseconds between two button clicks, log timestamps in javascript
First Button:
document.getElementById('submit-button1').onclick = function() {
console.log(new Date().getTime()); //1388696290801
}
Second Button:
document.getElementById('submit-button2').onclick = function() {
console.log(new Date().getTime()); //1388696292730
}
You don't need a form, you just need buttons, you don't need intervals either. You also don't need jQuery.
<!DOCTPYE html>
<html>
<head>
<script>
var startTime, running;
function startStop() {
if (running) {
var timeTaken = Date.now() - startTime;
running = false;
console.log("Time: " + timeTaken);
}
else {
running = true;
startTime = Date.now();
}
}
</script>
</head>
<body>
<button onclick="startStop();">Start/Stop</button>
</body>
</html>
Edit
Date.now() is probably faster.