{"id":15145,"date":"2023-05-29T11:13:04","date_gmt":"2023-05-29T11:13:04","guid":{"rendered":"https:\/\/kwebby.com\/blog\/?p=15145"},"modified":"2024-07-19T09:30:16","modified_gmt":"2024-07-19T09:30:16","slug":"stopwatch-using-javascript","status":"publish","type":"post","link":"https:\/\/kwebby.com\/blog\/stopwatch-using-javascript\/","title":{"rendered":"Building a Stopwatch with Lap Time Functionality Using JavaScript"},"content":{"rendered":"\n

Stopwatches are essential tools for measuring time intervals accurately. <\/p>\n\n\n\n

This blog post will explore how to create a stopwatch with lap time functionality using JavaScript<\/a>. <\/p>\n\n\n\n

We’ll delve into the code step by step and explain the purpose and functionality of each component.<\/p>\n\n\n\n

What is DragGAN AI Tool Which Took the Internet by Storm? 4 Incredible Features<\/a><\/p>\n\n\n\n

You can see the demo on codepen.io here<\/a>.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

The Structure for StopWatch (HTML & CSS)<\/h2>\n\n\n\n

Following are the basic structure for stopwatch as you can see in the demo above. <\/p>\n\n\n\n

HTML:<\/p>\n\n\n\n

<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
<div<\/span> <\/span>class<\/span>=<\/span>"<\/span>container<\/span>"<\/span>><\/span><\/span>\n    <\/span><div<\/span> <\/span>class<\/span>=<\/span>"<\/span>stopwatch<\/span>"<\/span>><\/span><\/span>\n      <\/span><div<\/span> <\/span>class<\/span>=<\/span>"<\/span>display<\/span>"<\/span>><\/span><\/span>\n        <\/span><div<\/span> <\/span>id<\/span>=<\/span>"<\/span>time<\/span>"<\/span>><\/span>00:00:00<\/span><\/div><\/span><\/span>\n        <\/span><button<\/span> <\/span>id<\/span>=<\/span>"<\/span>start<\/span>"<\/span> <\/span>onclick<\/span>=<\/span>"<\/span>startStopwatch()<\/span>"<\/span>><\/span>Start<\/span><\/button><\/span><\/span>\n        <\/span><button<\/span> <\/span>id<\/span>=<\/span>"<\/span>lap<\/span>"<\/span> <\/span>onclick<\/span>=<\/span>"<\/span>lapTime()<\/span>"<\/span>><\/span>Lap<\/span><\/button><\/span><\/span>\n        <\/span><button<\/span> <\/span>id<\/span>=<\/span>"<\/span>reset<\/span>"<\/span> <\/span>onclick<\/span>=<\/span>"<\/span>resetStopwatch()<\/span>"<\/span>><\/span>Reset<\/span><\/button><\/span><\/span>\n      <\/span><\/div><\/span><\/span>\n      <\/span><ul<\/span> <\/span>id<\/span>=<\/span>"<\/span>laps<\/span>"<\/span>><\/ul><\/span><\/span>\n    <\/span><\/div><\/span><\/span>\n  <\/span><\/div><\/span><\/span>\n  <\/span><\/span>\n  <\/span><audio<\/span> <\/span>id<\/span>=<\/span>"<\/span>startSound<\/span>"<\/span>><\/span><\/span>\n    <\/span><source<\/span> <\/span>src<\/span>=<\/span>"<\/span>start_sound.mp3<\/span>"<\/span> <\/span>type<\/span>=<\/span>"<\/span>audio\/mpeg<\/span>"<\/span>><\/span><\/span>\n    Your browser does not support the audio element.<\/span><\/span>\n  <\/span><\/audio><\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
CSS:<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
.<\/span>container<\/span> <\/span>{<\/span><\/span>\n  display<\/span>:<\/span> <\/span>flex<\/span>;<\/span><\/span>\n  <\/span>justify<\/span>-<\/span>content<\/span>:<\/span> <\/span>center<\/span>;<\/span><\/span>\n  <\/span>align<\/span>-<\/span>items<\/span>:<\/span> <\/span>center<\/span>;<\/span><\/span>\n  height<\/span>:<\/span> 100<\/span>vh<\/span>;<\/span><\/span>\n}<\/span><\/span>\n<\/span>\n.<\/span>stopwatch<\/span> <\/span>{<\/span><\/span>\n  width<\/span>:<\/span> 300<\/span>px<\/span>;<\/span><\/span>\n}<\/span><\/span>\n<\/span>\n.<\/span>display<\/span> <\/span>{<\/span><\/span>\n  <\/span>text<\/span>-<\/span>align<\/span>:<\/span> <\/span>center<\/span>;<\/span><\/span>\n  <\/span>margin<\/span>-<\/span>bottom<\/span>:<\/span> 10<\/span>px<\/span>;<\/span><\/span>\n}<\/span><\/span>\n<\/span>\n#<\/span>time<\/span> <\/span>{<\/span><\/span>\n  <\/span>font<\/span>-<\/span>size<\/span>:<\/span> 36<\/span>px<\/span>;<\/span><\/span>\n  <\/span>font<\/span>-<\/span>weight<\/span>:<\/span> <\/span>bold<\/span>;<\/span><\/span>\n  <\/span>margin<\/span>-<\/span>bottom<\/span>:<\/span> 10<\/span>px<\/span>;<\/span><\/span>\n}<\/span><\/span>\n<\/span>\nbutton<\/span> <\/span>{<\/span><\/span>\n  padding<\/span>:<\/span> 10<\/span>px<\/span> 20<\/span>px<\/span>;<\/span><\/span>\n  <\/span>margin<\/span>-<\/span>right<\/span>:<\/span> 5<\/span>px<\/span>;<\/span><\/span>\n}<\/span><\/span>\n<\/span>\n#<\/span>laps<\/span> <\/span>{<\/span><\/span>\n  <\/span>list<\/span>-<\/span>style<\/span>-<\/span>type<\/span>:<\/span> <\/span>none<\/span>;<\/span><\/span>\n  padding<\/span>:<\/span> <\/span>0<\/span>;<\/span><\/span>\n}<\/span><\/span>\n<\/span>\n#<\/span>laps<\/span> <\/span>li<\/span> <\/span>{<\/span><\/span>\n  <\/span>margin<\/span>-<\/span>bottom<\/span>:<\/span> 5<\/span>px<\/span>;<\/span><\/span>\n}<\/span><\/span>\n<\/span><\/code><\/pre><\/div>\n\n\n\n
Setting up the Variables<\/h2>\n\n\n\n
The initial code sets<\/a> up several variables required for the stopwatch. The startTime<\/strong><\/code>, currentTime<\/strong><\/code>, and elapsedTime<\/strong><\/code> variables are used to track the timing values. isRunning<\/strong><\/code> keeps track of whether the stopwatch is currently running and lapCount<\/strong><\/code> stores the number of laps recorded.<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
let<\/span> <\/span>startTime<\/span>,<\/span> <\/span>lapStartTime<\/span>,<\/span> <\/span>currentTime<\/span>,<\/span> <\/span>elapsedTime<\/span> <\/span>=<\/span> <\/span>0<\/span>;<\/span><\/span>\nlet<\/span> <\/span>isRunning<\/span> <\/span>=<\/span> <\/span>false;<\/span><\/span>\nlet<\/span> <\/span>lapCount<\/span> <\/span>=<\/span> <\/span>1<\/span>;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
Starting and Stopping the Stopwatch<\/h2>\n\n\n\n
The startStopwatch()<\/strong><\/code> function controls the behavior of the “Start\/Stop” button. When the button is clicked, it checks if the stopwatch is already running. <\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
function<\/span> <\/span>startStopwatch<\/span>()<\/span> <\/span>{<\/span><\/span>\n  <\/span>if<\/span> (<\/span>isRunning<\/span>) <\/span>{<\/span><\/span>\n    <\/span>stopStopwatch<\/span>()<\/span>;<\/span><\/span>\n  <\/span>}<\/span> <\/span>else<\/span> <\/span>{<\/span><\/span>\n    <\/span>if<\/span> (<\/span>elapsedTime<\/span> <\/span>===<\/span> <\/span>0<\/span>) <\/span>{<\/span><\/span>\n      <\/span>startTime<\/span> <\/span>=<\/span> <\/span>Date<\/span>.<\/span>now<\/span>()<\/span>;<\/span><\/span>\n    <\/span>}<\/span> <\/span>else<\/span> <\/span>{<\/span><\/span>\n      <\/span>startTime<\/span> <\/span>=<\/span> <\/span>Date<\/span>.<\/span>now<\/span>() <\/span>-<\/span> <\/span>elapsedTime<\/span>;<\/span><\/span>\n    <\/span>}<\/span><\/span>\n    <\/span>lapStartTime<\/span> <\/span>=<\/span> <\/span>startTime<\/span>;<\/span><\/span>\n    <\/span>isRunning<\/span> <\/span>=<\/span> <\/span>true;<\/span><\/span>\n    <\/span>updateDisplay<\/span>()<\/span>;<\/span><\/span>\n    <\/span>playSound<\/span>()<\/span>;<\/span><\/span>\n    <\/span>requestAnimationFrame<\/span>(<\/span>updateStopwatch<\/span>)<\/span>;<\/span><\/span>\n  <\/span>}<\/span><\/span>\n}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
The updateDisplay()<\/strong><\/code> function updates the stopwatch display, and the playSound()<\/strong><\/code> function plays a sound effect. <\/p>\n\n\n\n
Finally, the updateStopwatch()<\/strong><\/code> function is called using requestAnimationFrame()<\/strong><\/code> to continuously update the stopwatch display.<\/p>\n\n\n\n
Stopping the Stopwatch<\/h2>\n\n\n\n
The stopStopwatch()<\/strong><\/code> function is called when the stopwatch is stopped. It sets isRunning<\/code> to false<\/code> and calculates the elapsed time by subtracting the startTime<\/code> from the current time. The updateDisplay()<\/code> function is called to update the display accordingly.<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
function<\/span> <\/span>stopStopwatch<\/span>()<\/span> <\/span>{<\/span><\/span>\n  <\/span>isRunning<\/span> <\/span>=<\/span> <\/span>false;<\/span><\/span>\n  <\/span>elapsedTime<\/span> <\/span>=<\/span> <\/span>Date<\/span>.<\/span>now<\/span>() <\/span>-<\/span> <\/span>startTime<\/span>;<\/span><\/span>\n  <\/span>updateDisplay<\/span>()<\/span>;<\/span><\/span>\n}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
Resetting the Stopwatch<\/h2>\n\n\n\n
The resetStopwatch()<\/strong><\/code> function resets the stopwatch when it is not running. It sets the elapsedTime<\/code> and lapCount<\/code> variables to their initial values, updates the display, and clears the lap times.<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
function<\/span> <\/span>resetStopwatch<\/span>()<\/span> <\/span>{<\/span><\/span>\n  <\/span>if<\/span> (<\/span>!<\/span>isRunning<\/span>) <\/span>{<\/span><\/span>\n    <\/span>elapsedTime<\/span> <\/span>=<\/span> <\/span>0<\/span>;<\/span><\/span>\n    <\/span>lapCount<\/span> <\/span>=<\/span> <\/span>1<\/span>;<\/span><\/span>\n    <\/span>updateDisplay<\/span>()<\/span>;<\/span><\/span>\n    <\/span>clearLaps<\/span>()<\/span>;<\/span><\/span>\n  <\/span>}<\/span><\/span>\n}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
Recording Lap Times<\/h2>\n\n\n\n
The lapTime()<\/strong><\/code> function is called when the “Lap” button is clicked. It calculates the lap time by subtracting the startTime<\/strong><\/code> from the current time. The lap time is then formatted using the formatTime()<\/strong><\/code> function, and the lap time is added to the list of laps using the addLap()<\/strong><\/code> function.<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
function<\/span> <\/span>lapTime<\/span>()<\/span> <\/span>{<\/span><\/span>\n  <\/span>if<\/span> (<\/span>isRunning<\/span>) <\/span>{<\/span><\/span>\n    <\/span>const<\/span> <\/span>lapTime<\/span> <\/span>=<\/span> <\/span>Date<\/span>.<\/span>now<\/span>() <\/span>-<\/span> <\/span>lapStartTime<\/span>;<\/span><\/span>\n    <\/span>const<\/span> <\/span>formattedTime<\/span> <\/span>=<\/span> <\/span>formatTime<\/span>(<\/span>lapTime<\/span>)<\/span>;<\/span><\/span>\n    <\/span>addLap<\/span>(<\/span>formattedTime<\/span>)<\/span>;<\/span><\/span>\n    <\/span>lapStartTime<\/span> <\/span>=<\/span> <\/span>Date<\/span>.<\/span>now<\/span>()<\/span>;<\/span><\/span>\n  <\/span>}<\/span><\/span>\n}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
Updating the Stopwatch Display<\/h2>\n\n\n\n
The updateStopwatch()<\/strong><\/code> function is responsible for updating the stopwatch display in real-time. It calculates the currentTime<\/strong><\/code> by subtracting the startTime<\/strong><\/code> from the current time and calls the updateDisplay()<\/strong><\/code> function to display the formatted time.<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
function<\/span> <\/span>updateStopwatch<\/span>()<\/span> <\/span>{<\/span><\/span>\n  <\/span>if<\/span> (<\/span>isRunning<\/span>) <\/span>{<\/span><\/span>\n    <\/span>currentTime<\/span> <\/span>=<\/span> <\/span>Date<\/span>.<\/span>now<\/span>() <\/span>-<\/span> <\/span>startTime<\/span>;<\/span><\/span>\n    <\/span>updateDisplay<\/span>()<\/span>;<\/span><\/span>\n    <\/span>requestAnimationFrame<\/span>(<\/span>updateStopwatch<\/span>)<\/span>;<\/span><\/span>\n  <\/span>}<\/span><\/span>\n}<\/span><\/span>\n<\/span>\nfunction<\/span> <\/span>updateDisplay<\/span>()<\/span> <\/span>{<\/span><\/span>\n  <\/span>const<\/span> <\/span>formattedTime<\/span> <\/span>=<\/span> <\/span>formatTime<\/span>(<\/span>isRunning<\/span> <\/span>?<\/span> <\/span>currentTime<\/span> <\/span>:<\/span> <\/span>elapsedTime<\/span>)<\/span>;<\/span><\/span>\n  <\/span>document<\/span>.<\/span>getElementById<\/span>(<\/span>'<\/span>time<\/span>'<\/span>)<\/span>.<\/span>textContent<\/span> <\/span>=<\/span> <\/span>formattedTime<\/span>;<\/span><\/span>\n  <\/span>document<\/span>.<\/span>getElementById<\/span>(<\/span>'<\/span>start<\/span>'<\/span>)<\/span>.<\/span>textContent<\/span> <\/span>=<\/span> <\/span>isRunning<\/span> <\/span>?<\/span> <\/span>'<\/span>Stop<\/span>'<\/span> <\/span>:<\/span> <\/span>'<\/span>Start<\/span>'<\/span>;<\/span><\/span>\n}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
Formatting the Time<\/h2>\n\n\n\n
The formatTime()<\/strong><\/code> function takes a time value in milliseconds and formats it into hours, minutes, seconds, and milliseconds. It pads single-digit values with leading zeros to ensure consistent formatting.<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
function<\/span> <\/span>formatTime<\/span>(<\/span>time<\/span>)<\/span> <\/span>{<\/span><\/span>\n  <\/span>const<\/span> <\/span>milliseconds<\/span> <\/span>=<\/span> <\/span>Math<\/span>.<\/span>floor<\/span>((<\/span>time<\/span> <\/span>%<\/span> <\/span>1000<\/span>) <\/span>\/<\/span> <\/span>10<\/span>)<\/span>;<\/span><\/span>\n  <\/span>const<\/span> <\/span>seconds<\/span> <\/span>=<\/span> <\/span>Math<\/span>.<\/span>floor<\/span>((<\/span>time<\/span> <\/span>\/<\/span> <\/span>1000<\/span>) <\/span>%<\/span> <\/span>60<\/span>)<\/span>;<\/span><\/span>\n  <\/span>const<\/span> <\/span>minutes<\/span> <\/span>=<\/span> <\/span>Math<\/span>.<\/span>floor<\/span>((<\/span>time<\/span> <\/span>\/<\/span> <\/span>1000<\/span> <\/span>\/<\/span> <\/span>60<\/span>) <\/span>%<\/span> <\/span>60<\/span>)<\/span>;<\/span><\/span>\n  <\/span>const<\/span> <\/span>hours<\/span> <\/span>=<\/span> <\/span>Math<\/span>.<\/span>floor<\/span>(<\/span>time<\/span> <\/span>\/<\/span> <\/span>1000<\/span> <\/span>\/<\/span> <\/span>60<\/span> <\/span>\/<\/span> <\/span>60<\/span>)<\/span>;<\/span><\/span>\n<\/span>\n  <\/span>const<\/span> <\/span>formattedHours<\/span> <\/span>=<\/span> <\/span>hours<\/span>.<\/span>toString<\/span>()<\/span>.<\/span>padStart<\/span>(<\/span>2<\/span>,<\/span> <\/span>'<\/span>0<\/span>'<\/span>)<\/span>;<\/span><\/span>\n  <\/span>const<\/span> <\/span>formattedMinutes<\/span> <\/span>=<\/span> <\/span>minutes<\/span>.<\/span>toString<\/span>()<\/span>.<\/span>padStart<\/span>(<\/span>2<\/span>,<\/span> <\/span>'<\/span>0<\/span>'<\/span>)<\/span>;<\/span><\/span>\n  <\/span>const<\/span> <\/span>formattedSeconds<\/span> <\/span>=<\/span> <\/span>seconds<\/span>.<\/span>toString<\/span>()<\/span>.<\/span>padStart<\/span>(<\/span>2<\/span>,<\/span> <\/span>'<\/span>0<\/span>'<\/span>)<\/span>;<\/span><\/span>\n  <\/span>const<\/span> <\/span>formattedMilliseconds<\/span> <\/span>=<\/span> <\/span>milliseconds<\/span>.<\/span>toString<\/span>()<\/span>.<\/span>padStart<\/span>(<\/span>2<\/span>,<\/span> <\/span>'<\/span>0<\/span>'<\/span>)<\/span>;<\/span><\/span>\n<\/span>\n  <\/span>return<\/span> <\/span>`<\/span>${<\/span>formattedHours<\/span>}<\/span>:<\/span>${<\/span>formattedMinutes<\/span>}<\/span>:<\/span>${<\/span>formattedSeconds<\/span>}<\/span>.<\/span>${<\/span>formattedMilliseconds<\/span>}<\/span>`<\/span>;<\/span><\/span>\n}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
Adding Lap Times<\/h2>\n\n\n\n
The addLap()<\/strong><\/code> function appends a new lap time to the list of laps. It creates a new list item element and sets its text content<\/a> to include the lap count and the formatted lap time. The new lap time is added to the top of the list using prepend()<\/strong><\/code>, and the lap count is incremented.<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
function<\/span> <\/span>addLap<\/span>(<\/span>time<\/span>)<\/span> <\/span>{<\/span><\/span>\n  <\/span>const<\/span> <\/span>lapList<\/span> <\/span>=<\/span> <\/span>document<\/span>.<\/span>getElementById<\/span>(<\/span>'<\/span>laps<\/span>'<\/span>)<\/span>;<\/span><\/span>\n  <\/span>const<\/span> <\/span>listItem<\/span> <\/span>=<\/span> <\/span>document<\/span>.<\/span>createElement<\/span>(<\/span>'<\/span>li<\/span>'<\/span>)<\/span>;<\/span><\/span>\n  <\/span>listItem<\/span>.<\/span>textContent<\/span> <\/span>=<\/span> <\/span>`<\/span>Lap <\/span>${<\/span>lapCount<\/span>}<\/span>: <\/span>${<\/span>time<\/span>}<\/span>`<\/span>;<\/span><\/span>\n  <\/span>lapList<\/span>.<\/span>appendChild<\/span>(<\/span>listItem<\/span>)<\/span>;<\/span><\/span>\n  <\/span>lapCount<\/span>++;<\/span><\/span>\n}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
Clearing Lap Times<\/h2>\n\n\n\n
The clearLaps()<\/strong><\/code> function clears all lap times by emptying the HTML content of the lap list.<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
function<\/span> <\/span>clearLaps<\/span>()<\/span> <\/span>{<\/span><\/span>\n  <\/span>const<\/span> <\/span>lapList<\/span> <\/span>=<\/span> <\/span>document<\/span>.<\/span>getElementById<\/span>(<\/span>'<\/span>laps<\/span>'<\/span>)<\/span>;<\/span><\/span>\n  <\/span>lapList<\/span>.<\/span>innerHTML<\/span> <\/span>=<\/span> <\/span>''<\/span>;<\/span><\/span>\n}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
Playing Sound (Optional)<\/h2>\n\n\n\n
The playSound()<\/strong><\/code> function plays a sound effect when the stopwatch is started. It retrieves the audio element, resets its current time to the beginning, and plays the audio.<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
function<\/span> <\/span>playSound<\/span>()<\/span> <\/span>{<\/span><\/span>\n  <\/span>const<\/span> <\/span>audio<\/span> <\/span>=<\/span> <\/span>document<\/span>.<\/span>getElementById<\/span>(<\/span>'<\/span>startSound<\/span>'<\/span>)<\/span>;<\/span><\/span>\n  <\/span>audio<\/span>.<\/span>currentTime<\/span> <\/span>=<\/span> <\/span>0<\/span>;<\/span><\/span>\n  <\/span>audio<\/span>.<\/span>play<\/span>()<\/span>;<\/span><\/span>\n}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
Conclusion<\/h2>\n\n\n\n
Congratulations! Using JavaScript, you have learned how to build a stopwatch with lap time functionality. This functionality allows you to accurately measure time intervals and record lap times. <\/p>\n\n\n\n
You can further enhance the stopwatch by customizing the CSS to match your preferred design and adding additional features as desired. Have fun experimenting and building upon this foundation!<\/p>\n","protected":false},"excerpt":{"rendered":"
Stopwatches are essential tools for measuring time intervals accurately. This blog post will explore how to create a stopwatch with lap time functionality using JavaScript.…<\/p>\n","protected":false},"author":5,"featured_media":15149,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[522,4],"tags":[],"class_list":["post-15145","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-development","category-tutorials"],"_links":{"self":[{"href":"https:\/\/kwebby.com\/blog\/wp-json\/wp\/v2\/posts\/15145","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kwebby.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kwebby.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kwebby.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/kwebby.com\/blog\/wp-json\/wp\/v2\/comments?post=15145"}],"version-history":[{"count":6,"href":"https:\/\/kwebby.com\/blog\/wp-json\/wp\/v2\/posts\/15145\/revisions"}],"predecessor-version":[{"id":22587,"href":"https:\/\/kwebby.com\/blog\/wp-json\/wp\/v2\/posts\/15145\/revisions\/22587"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kwebby.com\/blog\/wp-json\/wp\/v2\/media\/15149"}],"wp:attachment":[{"href":"https:\/\/kwebby.com\/blog\/wp-json\/wp\/v2\/media?parent=15145"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kwebby.com\/blog\/wp-json\/wp\/v2\/categories?post=15145"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kwebby.com\/blog\/wp-json\/wp\/v2\/tags?post=15145"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
If it is, the stopStopwatch()<\/strong><\/code> the function is called to stop the stopwatch and calculate the elapsed time<\/a>. Otherwise, if the stopwatch is not running, it startTime<\/strong><\/code> is set to the current time minus the elapsed time, and the stopwatch starts running. <\/p>\n\n\n\n