The script presented in this page is a simple chronometer / stopwatch, with Start, Stop, and Reset options. It displays the tenths of second, seconds, and minutes, and can be set to stop and execute a function when the time of the chronometer reaches to a certain value.
- For more details, see the instructions bellow, and the comments in code.

To test this script, click the Start button. In this example the chronometer is set to automatically stop and display an alert window after 3 seconds and 8 tenths of second.
0:0
   

• To add this script in a webpage, copy the following code in the place where you want to display the chronometer.
<div id="showtm" style="font-size:21px; font-weight:800;">0:0</div>
<script type="text/javascript"><!--
// chronometer / stopwatch JS script - coursesweb.net

// Here set the minutes, seconds, and tenths-of-second when you want the chronometer to stop
// If all these values are set to 0, the chronometer not stop automatically
var stmints = 0;
var stseconds = 0;
var stzecsec = 0;

// function to be executed when the chronometer stops
function toAutoStop() {
  alert('Your life goes on');
}

// the initial tenths-of-second, seconds, and minutes
var zecsec = 0;
var seconds = 0;
var mints = 0;

var startchron = 0;

function chronometer() {
  if(startchron == 1) {
    zecsec += 1;       // set tenths of a second

    // set seconds
    if(zecsec > 9) {
      zecsec = 0;
      seconds += 1;
    }

    // set minutes
    if(seconds > 59) {
      seconds = 0;
      mints += 1;
    }

    // adds data in #showtm
    document.getElementById('showtm').innerHTML = mints+ ' : '+ seconds+ '<sub>'+ zecsec+ '</sub>';

    // if the chronometer reaches to the values for stop, calls whenChrStop(), else, auto-calls chronometer()
    if(zecsec == stzecsec && seconds == stseconds && mints == stmints) toAutoStop();
    else setTimeout("chronometer()", 100);
  }
}

function startChr() { startchron = 1; chronometer(); }      // starts the chronometer
function stopChr() { startchron = 0; }                      // stops the chronometer
function resetChr() {
  zecsec = 0;  seconds = 0; mints = 0; startchron = 0; 
  document.getElementById('showtm').innerHTML = mints+ ' : '+ seconds+ '<sub>'+ zecsec+ '</sub>';
}

// start the chronometer, delete this line if you want to not automatically start the stopwatch
startChr();
--></script>

- The function startChr() starts the chronometer.
- To stop the stopwatch, call the stopChr() function.
- To reset the chronometer, call the resetChr() function.

Example:
<button onclick="stopChr()">Stop</button>
<button onclick="resetChr()">Reset</button>

- If you want the script to automatically stops and execute the function toAutoStop(), set values to the following variables in the script. These values represent the time after the chronometer will auto-stops.
var stmints = 0;
var stseconds = 0;
var stzecsec = 0;

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which tag is a block element?
<div> <img> <span>
<div>Web Programming and Development</div>
Which CSS code displays the text underlined?
font-style: italic; text-decoration: underline; font-weight: 500;
h2 {
  text-decoration: underline;
}
Click on the JavaScript function that can access other function after a specified time.
insertBefore() setTimeout() querySelector()
function someFunction() { alert("CoursesWeb.net"); }
setTimeout("someFunction()", 2000);
Click on the instruction that returns the number of items of a multidimensional array in PHP.
count($array) count($array, 1) strlen()
$food =["fruits" =>["banana", "apple"), "veggie" =>["collard", "pea"));
$nr_food = count($food, 1);
echo $nr_food;       // 6
JavaScript Chronometer / Stopwatch

Last accessed pages

  1. Contact page - CoursesWeb (11442)
  2. Tabs effect with CSS (12143)
  3. Making DIV Contents Scroll Horizontally, with multiple Div`s inside (18069)
  4. Create a simple anti-spam Captcha verification code (1403)
  5. ActionScript 3 - Change MovieClip Color (6360)

Popular pages this month

  1. Making DIV Contents Scroll Horizontally, with multiple Div`s inside (2470)
  2. Contact page - CoursesWeb (2397)
  3. Tabs effect with CSS (2391)
  4. Insert, Select and Update NULL value in MySQL (1510)
  5. PHP getElementById and getElementsByTagName (934)