How to Create Simple Stopwatch in HTML/CSS with JavaScript

Submitted by alpha_luna on Friday, May 20, 2016 - 15:46.

Language

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

Comments

Add new comment

About text formats