Tracking time in seconds and milliseconds with a stopwatch

Question

Tracking time in seconds and milliseconds with a stopwatch

Greetings! I am currently working on a reaction test to measure how quickly users react, and I seem to be struggling to find the necessary resources. I am curious about creating a basic stopwatch in seconds and milliseconds that can be triggered later by an onclick function in HTML.

Below is the code I have developed so far:

HTML

<input type="button" class="first" value="Call" onclick="call function" />

That's essentially what I have at this point. I have expertise in HTML, CSS, JavaScript, and some familiarity with jQuery.

I appreciate any assistance you can provide!

javascript jquery html css

Answer 1

Answer №1

To start the stopwatch, you can utilize the setInterval function along with a separate function to handle toggling and resetting.

You have the option to either directly attach the click handler to the button as shown below or I personally recommend binding it within the JavaScript code itself using .onclick=function(){....}

var s = 0,
  ms = 0,
  sEl = document.getElementById('s'),
  msEl = document.getElementById('ms'),
  play = false;
stopwatch = setInterval(function() {
  if (!play) return;
  if (ms === 99) {
    s += 1;
    ms = 0;
  } else {
    ms += 1;
  }
  update();

}, 1);

function update() {

  sEl.innerText = s;
  msEl.innerText = ms;
}

function toggle() {
  if (!play) {
    s = 0, ms = 0;
    update();
  }
  play = !play;
}

body {
  font-family: arial;
}
#s {
  font-size: 50px;
}
#ms {
  font-size: 30px;
  display:inline-block;
  width:35px;
}
button {
  border: 1px solid grey;
  background: lightgrey;
  padding: 10px 40px;
}

<span id="s">0</span>s <span id="ms">00</span>ms
<br />
<button onclick="toggle();">Toggle</button>

Answer 2

To start the stopwatch, you can utilize the setInterval function along with a separate function to handle toggling and resetting.

You have the option to either directly attach the click handler to the button as shown below or I personally recommend binding it within the JavaScript code itself using .onclick=function(){....}

var s = 0,
  ms = 0,
  sEl = document.getElementById('s'),
  msEl = document.getElementById('ms'),
  play = false;
stopwatch = setInterval(function() {
  if (!play) return;
  if (ms === 99) {
    s += 1;
    ms = 0;
  } else {
    ms += 1;
  }
  update();

}, 1);

function update() {

  sEl.innerText = s;
  msEl.innerText = ms;
}

function toggle() {
  if (!play) {
    s = 0, ms = 0;
    update();
  }
  play = !play;
}

body {
  font-family: arial;
}
#s {
  font-size: 50px;
}
#ms {
  font-size: 30px;
  display:inline-block;
  width:35px;
}
button {
  border: 1px solid grey;
  background: lightgrey;
  padding: 10px 40px;
}

<span id="s">0</span>s <span id="ms">00</span>ms
<br />
<button onclick="toggle();">Toggle</button>

Tracking time in seconds and milliseconds with a stopwatch

Answer №1

Similar questions

jquery tutorial: looping through a function

Scrolling to the top of the Popper component when an element is selected

Upcoming API and backend developments

The online server is unable to access the route from the ajax function in a separate JavaScript file

Ensuring that the empty bubble remains undisturbed, here's a guide on effectively implementing the if

What steps can I take to resolve the problem of my NativeScript app not running on android?

What is the best method for initializing a grid combo box value using JavaScript?

Expanding Gridview Width within a Container in ASP.Net: A Step-by-Step Guide

What could be causing my Vue.js sorting array script to malfunction?

Rails 5 not allow user submission of bootstrap modal form

ajaxSubmit uploadProgress feature is failing to respond

Please tap to dial: Access to navigation is restricted

Encountering an error message stating that navigator.block is not a function when attempting to navigate to

Utilizing absolute path in Typescript: A comprehensive guide

Has anyone created a modified version of jRails that is compatible with Rails 2.3 and jQuery 1.4?

Tips for running multiple JavaScript functions in ASP.NET using Button's OnClientClick property

The :not() selector does not currently have the capability to support complex selectors within it

Material UI autocomplete bug: a frustrating issue with suggestions

"Enhance your browsing experience with Chrome by automatically changing the background when

Merging Two Angular Pages within a Jhipster Application