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 adds an image in web page?
<div> <img> <span>
<img src="http://coursesweb.net/imgs/webcourses.gif" width="191" height="63" alt="Courses-Web" />
Which of these CSS codes displays the text oblique?
font-style: italic; text-decoration: underline; font-weight: 500;
#id {
  font-style: italic;
}
Click on the jQuery function used to hide with animation a HTML element.
click() hide() show()
$(document).ready(function() {
  $(".a_class").click(function(){ $(this).hide("slow"); });
});
Click on the correctly defined function in PHP.
fname function() {} function fname() {} function $fname() {};
function fname($a, $b) {
  echo $a * $b;
}
JavaScript Chronometer / Stopwatch

Last accessed pages

  1. Get and Modify content of an Iframe (15658)
  2. Contact page - CoursesWeb (5492)
  3. Tabs effect with CSS (6210)
  4. Output or Force Download MP3 with PHP (1621)
  5. Insert, Select and Update NULL value in MySQL (35121)

Popular pages this month

  1. Tabs effect with CSS (2293)
  2. Contact page - CoursesWeb (2285)
  3. Insert, Select and Update NULL value in MySQL (1440)
  4. Making DIV Contents Scroll Horizontally, with multiple Div`s inside (1020)
  5. PHP getElementById and getElementsByTagName (790)