Timer using JavaScript

Submitted by: 
Language: 
Visitors have accessed this post 363 times.

This is a simple Timer using JavaScript. This program has the capability to pause the time and to resume the timer again. It has also one button for the reset function, that the user clicks this button to automatically set the timer begin to zero.

Creating the two buttons for the timer and for displaying the time as you can see in the image below.

ResultThis is the source code of the image above.

  1. <div id="container">
  2. <p id="output"></p>
  3. <div id="controls">
  4. <button class="button" id="startPause" onClick="startPause()">Start</button>
  5. <br />
  6. <br />
  7. <button class="button1" onClick="reset()">Reset</button>
  8. </div>
  9. </div>

Here's the source code for the design.

  1. /* CSS Document */
  2. body {
  3. background-color:#FFF;
  4. }
  5. #container {
  6. background:azure;
  7. width:500px;
  8. border:2px solid blue;
  9. margin:50px auto;
  10. padding:25px;
  11. overflow:hidden;
  12. }
  13.  
  14. #output {
  15. background:azure;
  16. width:150px;
  17. height:40px;
  18. margin:30px auto;
  19. font-size:22px;
  20. font-family:Verdana, Geneva, sans-serif;
  21. text-align:center;
  22. color:#E60000;
  23. border:3px solid blue;
  24. font-weight:bold;
  25. }
  26. #controls {
  27. width:150;
  28. margin:5px auto;
  29. }
  30.  
  31. .button {
  32. width:70px;
  33. font-size:20px;
  34. background:azure;
  35. border:2px solid blue;
  36. border-radius:8px;
  37. color:blue;
  38. padding:5px;
  39. width:150px;
  40. }
  41. .button1 {
  42. width:70px;
  43. font-size:20px;
  44. background:azure;
  45. border:2px solid red;
  46. border-radius:8px;
  47. color:red;
  48. padding:5px;
  49. width:150px;
  50. }
  51. .button:hover{
  52. background:blue;
  53. color:white;
  54. cursor:pointer;
  55. }
  56. .button1:hover{
  57. background:red;
  58. color:white;
  59. cursor:pointer;
  60. }

The complete source code.

  1. <!DOCTYPE html><html>
  2. <title>Stopwatch/Timer</title>
  3. <link href="css/style.css" rel="stylesheet" type="text/css">
  4. <script type="text/javascript" src="javascript/timer.js"></script>
  5. </head>
  6.  
  7. <div id="container">
  8. <p id="output"></p>
  9. <div id="controls">
  10. <button class="button" id="startPause" onClick="startPause()">Start</button>
  11. <br />
  12. <br />
  13. <button class="button1" onClick="reset()">Reset</button>
  14. </div>
  15. </div>
  16.  
  17. </body>
  18. </html>

The Result

ResultHope that this tutorial will help you a lot.

Share us your thoughts and comments below. Thank you so much for dropping by and reading this tutorial post. For more updates, don’t hesitate and feel free to visit this website more often and please share this with your friends or email me at [email protected]. Practice Coding. Thank you very much.


Comments

Good code to test

Add new comment

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • You may insert videos with [video:URL]
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd> <table> <tr> <td> <th> <img> <h1> <h2> <h3> <iframe> [video]
  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>, <asp>, <c>, <cpp>, <csharp>, <css>, <html4strict>, <java>, <javascript>, <mysql>, <php>, <python>, <sql>, <vb>, <vbnet>. The supported tag styles are: <foo>, [foo].
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Lines and paragraphs break automatically.
CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.