Earlier I shared with you how to make a simple stopwatch. We use a stopwatch for various purposes. Which helps us to run the countdown for a certain period of time. But there is a difference between a countdown timer and a stopwatch.
The countdown timer cannot be turned off when you wish. However, you can turn this stopwatch on and off whenever you want.
Here’s the basic structure I made a box and made three small displays in it. Counted time can be seen in this display. There are also two buttons that will help turn the stopwatch on and off.
However, there is a problem with this design, you can not restart here. Because I made it so easy. You can see this design if you want to add a restart button.
Step 1: Basic structure of stopwatch
I have created a box using the following HTML and CSS code. I will add all the information to this box. The width of this box: 300px and height: 90px have been used.
Here the background color I used is white and it helped margin: 100px auto to place it in the middle of the webpage.
Step 2: 3 countdown viewing boxes
To make these two buttons, I took the help of HTML’s button function. The buttons are width: 140px, height: 50px and background-color: # 2e80b3.
Then I added hover color on these buttons. When you move the mouse or click on the buttons, the background color will be black and the text color will be converted to white.
Now I put those two buttons in a certain position. First I lowered the buttons slightly using margin-top: 25px. Then the ‘last-child’ helped to change the background color of the second button.
Now I set the value of the constant called timer to zero (0). As a result, the time of that stopwatch will be 0 in normal conditions. Then I instructed timerInterval is a constant.
Now all the calculations of this countdown timer have to be made. Here I have added all the information in “timerInterval”.
➤ First, the value of ‘timer’ has been set to ‘1/60’, that is, its value will continue to increase by 1/60 every time*.
➤ Then I have determined how the time of milliseconds, seconds, and minutes will increase. I have used Math.floor for this. The Math. floor () function returns the largest integer less than or equal to a given number.
➤ First I added the calculation of milliseconds. Then I set the second calculation. Here 60 times is done with the calculation of milliseconds. Because one second equals 60 milliseconds.
➤ Now it has been decided how the minute time will increase. As I have indicated here, the value of the timer will be divided by 60 and that value will increase each time*.
Now with the help of ‘innerHTML‘ I have arranged to show those times in the display. InnerHTML is a property of the HTML DOM.
There will be some changes before showing in the time display here. I have indicated here that if the value of time is less than 10, then a 0 will be added before that time. After adding 0, that number can be seen in the display.
Now it’s time to activate the stop button. Clicking this button will turn off the timer. “ClearInterval” helped. This value can be passed in clearInterval () to stop the timer.