If you want to download the source code then click here
Hello friends, as you know that I have made more videos with the help of javascript, jquery, out of which digital clock, countdown timer, the greeting clock was about and today’s article is about stopwatch counter. You guys can see it and today I am writing this article in which you can see a lot of simple functionality like play pause functionality, stop reset functionality, SVG circle animation, you will get to see all these functionalities.
If I tell you about its structure, then I have written all the code in a single file (index.html), in which I have written the CSS code inside the style tag at the last of the head tag. The code of HTML is written inside the body tag and the code of jquery is written inside the script tag at the end of the body.
Now I am going to tell you about the HTML structure in which I have taken a div named wrap, inside it, I have taken a unique id named timer. Inside this, I have taken SVG circle and have taken four span tags below it in which id of an hour, minute, second, millisecond has been given then add 00 default text/value i.e. text in it. After this, under the id named Timer, a div named option has been taken, in which there are buttons for all the controls like play, pause, stop, reset and I have also added icons to it, for this, I have used font awesome. You can copy its link by visiting the official website of font-awesome and you can also see its documentation that how the icons are used. Here the structure of HTML ends, you will find its code below.
Now I am talking about CSS, in this, I have given a fixed width of 250px to the id named timer and have taken it in the center by making margin 0 auto, then fixed the play, pause, stop, reset button with width height, and then its Linear-gradient the background color, then gave it box-shadow and then transitioned it to smooth out its hover effect. After this, this button is given a transform scale(0.95) by using the pseudo selector active. After that, I have kept the pause button hidden from the play pause button so that when the timer is on, the pause button appears, so I have already kept it hidden. Now the animation of this SVG circle, I have kept the duration of the animation 60 seconds and kept animation-play-state: paused i.e. this animation will happen only when you click on the play button. Its keyframe animation is done with the help of stroke-dashoffset. You can see its code how I have worked in CSS.
After that I talk about js, in which I have first taken two variables, after that, I have created a function named playFunc, inside it all the functionality of play pause has been added, inside it I have given the condition of if-else in which if the timer will play then it will have pause will have a class add, then addAnimation will have a class add, then after that animation-play-state: running; The one we had paused earlier will now be running. After that if you click on pause then it will remove the class of pause then animation-play-state: paused; That means the one who was in running mode will come to pause mode and the function of a stop will be called and below I have created two functions of play and pause in which I have set the timer then below it I have set default value millisecond, second, The default value of all this of minute and hour will be 0.
For more js practice video tutorial
Make Spinning Wheel Only CSS, JAVASCRIPT | Simple Spinning Wheel Game Decide a Random Numbers
Digital Greeting Clock Using Only Javascript | Good morning message using htm,css & js
Digital Clock UI Design with Animation Using HTML, CSS, JQUERY
3D Clock Animation Using HTML, CSS and Jquery Tilt
How To Create Jquery Plugin | Change Random Background Color On Page Reload
After this, I have created a function named timer, inside which I have updated the timer using the same function whose default value we have just set to 0. After that, I have put an if condition. In which the condition of a millisecond, second or minute has been put. Then the main work that we do is to print the value i.e. to display it.
After that I have created a function named updatetime, in which I have updated according to the millisecond. Which will keep changing every millisecond. Another value has been returned.
After that, resetFunc, in this function, we have to reset all the values ​​and start back from 0, so I have set the id of milliseconds, second, minute, or hour to 00, for this, I have used the jquery text function. After that, by using the if-else condition, we have used the function of hasClass, in which if the timer will pause, then the animation of our SVG circle will stop from where it is and start again from 0 and if it is on play mode then that Continuum will remain.
After that, if I talk about the last function, then I have made stopFunc in the last, inside which I have stopped the circle animation at the same and it will start from where it stopped, so for this, I have used only if condition.
hasClass is used in which if you pause then the class of addAnimation will be removed and SVG circle animation will stop at the same ie stop and if there is no pause then SVG circle animation will start from the same i.e. play.
So guys how did you like my article and if you don’t see its video tutorial then go and watch it now so that you can be better in society, you can visit my learndesign youtube channel and watch more funny videos and learn something new. Hey, if you are interested in educational videos, front-end developer useful videos, landing page design videos, and more, then today if you have learned something new from my website and youtube channel, then do like, share, and subscribe it. be happy keep learning.
