How to Create Simple Stopwatch in HTML/CSS with JavaScript

Submitted by alpha_luna on Friday, May 20, 2016 - 15:46.
Language
HTML/CSS

Simple Stopwatch in HTML/CSS with JavaScript

This is an example of a simple stopwatch. It has the ability to keep track on an individual event, especially in a sports event. Try this yourself. This is easy to learn project. It has 3 buttons to operate this stopwatch. These are:
  1. Start
  2. Stop
  3. Pause
Hope this simple work will help you in your future project. Enjoy!

Source Code

Kindly copy the source code below to your BODY tag.
  1.   <section>
  2.         <input type="radio" name="controls" id="start">
  3.         <input type="radio" name="controls" id="stop">
  4.         <input type="radio" name="controls" id="reset">
  5.         <div class="stopwatch">
  6.                 <div class="cell">
  7.                         <span class="num ten ten_hour">0 1 2 3 4 5 6 7 8 9</span>
  8.                 </div>
  9.                 <div class="cell">
  10.                         <span class="num ten hour">0 1 2 3 4 5 6 7 8 9</span>
  11.                 </div>
  12.                 <div class="cell">
  13.                         <span class="num">:</span>
  14.                 </div>
  15.                 <div class="cell">
  16.                         <span class="num sex ten_minu">0 1 2 3 4 5</span>
  17.                 </div>
  18.                 <div class="cell">
  19.                         <span class="num ten minu">0 1 2 3 4 5 6 7 8 9</span>
  20.                 </div>
  21.                 <div class="cell">
  22.                         <span class="num">:</span>
  23.                 </div>
  24.                 <div class="cell">
  25.                         <span class="num sex ten_sec">0 1 2 3 4 5</span>
  26.                 </div>
  27.                 <div class="cell">
  28.                         <span class="num ten sec">0 1 2 3 4 5 6 7 8 9</span>
  29.                 </div>
  30.                 <div class="cell">
  31.                         <span class="num">:</span>
  32.                 </div>
  33.                 <div class="cell">
  34.                         <span class="num ten hund_mill">0 1 2 3 4 5 6 7 8 9</span>
  35.                 </div>
  36.                 <div class="cell">
  37.                         <span class="num ten ten_mill">0 1 2 3 4 5 6 7 8 9</span>
  38.                 </div>
  39.                 <div class="cell">
  40.                         <span class="num ten mill">0 1 2 3 4 5 6 7 8 9</span>
  41.                 </div>
  42.         </div>
  43.         <div class="control">
  44.                 <label for="start">Start</label>
  45.                 <label for="stop">Stop</label>
  46.                 <label for="reset">Reset</label>
  47.         </div>
  48. </section>
  49.  
  50.         <script src='style.js'></script>
  51.  
  52.         <script>
  53.                 if (document.location.search.match(/type=embed/gi)) {
  54.                   window.parent.postMessage('resize', "*");
  55.                 }
  56.         </script>

Output:

Result So what can you say about this work? Share your thoughts in the comment section below or email me at [email protected]. Practice Coding. Thank you very much.

Note: Due to the size or complexity of this submission, the author has submitted it as a .zip file to shorten your download time. After downloading it, you will need a program like Winzip to decompress it.

Virus note: All files are scanned once-a-day by SourceCodester.com for viruses, but new viruses come out every day, so no prevention program can catch 100% of them.

FOR YOUR OWN SAFETY, PLEASE:

1. Re-scan downloaded files using your personal virus checker before using it.
2. NEVER, EVER run compiled files (.exe's, .ocx's, .dll's etc.)--only run source code.

Tags
Stopwatch

Comments

Add new comment

About text formats