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. Moving html element to a random direction (581)
  2. Get and change IFrame content through a JavaScript script created in another IFrame (10670)
  3. SHA1 Encrypt data in JavaScript (17997)
  4. PHP-MySQL free course, online tutorials PHP MySQL code (55677)
  5. PHP Laravel Tutorials (1337)

Popular pages this month

  1. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (320)
  2. Register and show online users and visitors (214)
  3. Node.js Move and Copy file (173)
  4. Read Excel file data in PHP - PhpExcelReader (159)
  5. PHP-MySQL free course, online tutorials PHP MySQL code (156)