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 HTML5 tag can be used to embed an external application (SWF, PDF) in web page?
<mark> <embed> <canvas>
<embed src="flash_game.swf" width="450" height="350" />
Which CSS pseudo-element adds a special style to the first line of a text?
:first-letter :before :first-line
#id:first-line {
  font-weight: bold;
  color: blue;
}
Click on the window object property which gets or sets the URL of current page.
window.location window.self window.status
var url = window.location;
alert(url);
Indicate the PHP function used to get the contents of a file or page and store it into a string.
fopen() file_put_contents() file_get_contents()
$homepage = file_get_contents("http://coursesweb.net/");
echo $homepage;
JavaScript Chronometer / Stopwatch

Last accessed pages

  1. querySelector and querySelectorAll (11851)
  2. Disable button and Enable it after specified time (8164)
  3. Vue Directives (7)
  4. PHP getElementById and getElementsByTagName (31491)
  5. Get and Modify content of an Iframe (18784)

Popular pages this month

  1. Making DIV Contents Scroll Horizontally, with multiple Div`s inside (1348)
  2. Tabs effect with CSS (1315)
  3. Contact page - CoursesWeb (1314)
  4. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (890)
  5. Insert, Select and Update NULL value in MySQL (552)