Skip to content
  • Home
  • Contact Us
  • About Us
  • Privacy Policy
  • DMCA
  • Linkedin
  • Pinterest
  • Facebook
thecscience

TheCScience

TheCScience is a blog that publishes daily tutorials and guides on engineering subjects and everything that related to computer science and technology

  • Home
  • Human values
  • Microprocessor
  • Digital communication
  • Linux
  • outsystems guide
  • Toggle search form

Stop Watch in Javascript programming language.

Posted on May 1, 2021November 19, 2022 By YASH PAL No Comments on Stop Watch in Javascript programming language.

In this javascript tutorial, we are going to learn how to make a start-stop watch counter timer in a javascript programming language or you can say a small stopwatch.

How to Make an Timer in Javascript programming language.

Table of Contents

  • Introduction to Javascript [counter] stopwatch program.
    • Code of program
      • Explanation

Introduction to Javascript [counter] stopwatch program.


First of all, this is just a simple javascript program. and I dedicate this project to beginners who want to learn. and by developing this project you will learn some new terms in a javascript programming language.

My recommendation is that first of all create this project by yourself and then try to understand my code. and to fully understand this project you should have some basic knowledge of javascript programming language.

First of all, as you see in the above-given image we need to create a button and when we click on that button the timer should need to start and if again we click on the button then the timer needs to stop. and also remember that the time is increased only in seconds.


Code of program


 <html>
 <head>
  <style type="text/css">
    .first {
      top: 40%;
      left: 40%;
      position: absolute;
    }
  </style>
 </head>
 <body class="first">
  <button id="start">Start</button>
   <p><span id="counter">0</span> elapsed second(s)</p> 
   <script type="text/javascript">
    //Write-Your-Code-Here
const buttonElement = document.querySelector("button");
const counterElement = document.getElementById("counter");
// Global variable to access it from function
let intervalId = null;
// Chronometer state, initially stopped
let started = false;

buttonElement.addEventListener("click", () => {
  if (!started) {
    // Start the chronometer: add 1 to the counter each second
    intervalId = setInterval(() => {
      counterElement.textContent = String(Number(counterElement.textContent) + 1);
    }, 1000);
    // Update button text
    buttonElement.textContent = "Stop";
  } else {
    // Stop the chronometer
    clearInterval(intervalId);
    // Update button text
    buttonElement.textContent = "Start";
  }
  // Change chronometer state
  started = !started;
});
    
   </script>
 </body>
</html>

Explanation


Here first of all we have created a button Start. and then we create a paragraph. after that using javascript, we select the button and then set an event listener. and then increasing the value of span by 1 on the time interval of 1 second. also if we click on the button then the text is changed from start to stop and again when we click it stops.


Also, read

  • Code Player Javascript project for students
  • Javascript project for practice – Github user information
  • Form validation using Jquery in HTML
javascript, project Tags:javascript, projects

Post navigation

Previous Post: Javascript project for practice | Github User Information
Next Post: Code Player | Javascript project for Students

Related Posts

Javascript project for practice | Github User Information javascript
Code Player | Javascript project for Students javascript
Add an Custom Snippet for Javascript in Visual Studio Code developer guide
Form Validation using Jquery in HTML javascript

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Pick Your Subject
Human Values

Copyright © 2023 TheCScience.

Powered by PressBook Grid Blogs theme