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.
• 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 used to add lists into <ul> and <ol> elements?
<dt> <dd> <li><ul>
<li>http://coursesweb.net/html/</li>
<li>http://coursesweb.net/css/</li>
</ul>
Which value of the "display" property creates a block box for the content and ads a bullet marker?
block list-item inline-block.some_class {
display: list-item;
}Which instruction converts a JavaScript object into a JSON string.
JSON.parse() JSON.stringify eval()var obj = {
"courses": ["php", "javascript", "ajax"]
};
var jsonstr = JSON.stringify(obj);
alert(jsonstr); // {"courses":["php","javascript","ajax"]}Indicate the PHP class used to work with HTML and XML content in PHP.
stdClass PDO DOMDocument$strhtml = '<body><div id="dv1">CoursesWeb.net</div></body>';
$dochtml = new DOMDocument();
$dochtml->loadHTML($strhtml);
$elm = $dochtml->getElementById("dv1");
echo $elm->nodeValue; // CoursesWeb.net