{"id":13107,"date":"2023-03-21T06:39:15","date_gmt":"2023-03-21T03:09:15","guid":{"rendered":"https:\/\/nabfollower.com\/blog\/stopwatch-react-14d5\/"},"modified":"2023-03-21T06:39:15","modified_gmt":"2023-03-21T03:09:15","slug":"stopwatch-react-14d5","status":"publish","type":"post","link":"https:\/\/nabfollower.com\/blog\/stopwatch-react-14d5\/","title":{"rendered":"\u06a9\u0631\u0648\u0646\u0648\u0645\u062a\u0631 &#8211; React &#8211; \u0627\u0646\u062c\u0645\u0646 DEV"},"content":{"rendered":"<div data-article-id=\"1408306\" id=\"article-body\">\n<p>\u06cc\u06a9 \u0648\u06cc\u062c\u062a \u06a9\u0631\u0648\u0646\u0648\u0645\u062a\u0631 \u0628\u0633\u0627\u0632\u06cc\u062f \u06a9\u0647 \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u0645\u062f\u062a \u0632\u0645\u0627\u0646 \u06af\u0630\u0634\u062a\u0647 \u0631\u0627 \u0627\u0646\u062f\u0627\u0632\u0647 \u06af\u06cc\u0631\u06cc \u06a9\u0646\u062f.  \u062a\u0627\u06cc\u0645\u0631 \u0641\u0639\u0644\u06cc \u0631\u0627 \u0646\u0634\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f \u0648 \u062f\u0648 \u062f\u06a9\u0645\u0647 \u062f\u0631 \u0632\u06cc\u0631 \u062f\u0627\u0631\u062f: &#8220;\u0634\u0631\u0648\u0639\/\u062a\u0648\u0642\u0641&#8221; \u0648 &#8220;\u0628\u0627\u0632\u0646\u0634\u0627\u0646\u06cc&#8221;.<\/p>\n<p><strong>\u0627\u0644\u0632\u0627\u0645\u0627\u062a<\/strong><\/p>\n<ul>\n<li>\u062f\u06a9\u0645\u0647 \u0634\u0631\u0648\u0639\/\u062a\u0648\u0642\u0641: \u0628\u0633\u062a\u0647 \u0628\u0647 \u0627\u06cc\u0646\u06a9\u0647 \u062a\u0627\u06cc\u0645\u0631 \u062f\u0631 \u062d\u0627\u0644 \u0627\u062c\u0631\u0627 \u0628\u0627\u0634\u062f\u060c \u062a\u0627\u06cc\u0645\u0631 \u0631\u0627 \u0634\u0631\u0648\u0639 \u06cc\u0627 \u0645\u062a\u0648\u0642\u0641 \u0645\u06cc \u06a9\u0646\u062f.<\/li>\n<li>\u0628\u0627\u0632\u0646\u0634\u0627\u0646\u06cc: \u062a\u0627\u06cc\u0645\u0631 \u0631\u0627 \u0628\u0647 0 \u0628\u0627\u0632\u0646\u0634\u0627\u0646\u06cc \u0645\u06cc \u06a9\u0646\u062f \u0648 \u062a\u0627\u06cc\u0645\u0631 \u0631\u0627 \u0645\u062a\u0648\u0642\u0641 \u0645\u06cc \u06a9\u0646\u062f.<\/li>\n<li>\u062a\u0627\u06cc\u0645\u0631 \u062a\u0639\u062f\u0627\u062f \u062b\u0627\u0646\u06cc\u0647 \u0647\u0627\u06cc \u0633\u067e\u0631\u06cc \u0634\u062f\u0647 \u0631\u0627 \u062a\u0627 \u0645\u06cc\u0644\u06cc \u062b\u0627\u0646\u06cc\u0647 \u0646\u0634\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f.\n<ul>\n<li>\u0628\u0627 \u06a9\u0644\u06cc\u06a9 \u0628\u0631 \u0631\u0648\u06cc \u062a\u0627\u06cc\u0645\u0631 \u0628\u0627\u06cc\u062f \u062a\u0627\u06cc\u0645\u0631 \u0634\u0631\u0648\u0639 \u06cc\u0627 \u0645\u062a\u0648\u0642\u0641 \u0634\u0648\u062f.  \u0628\u0631\u0686\u0633\u0628 \u062f\u06a9\u0645\u0647 Start\/Stop \u0646\u06cc\u0632 \u0628\u0627\u06cc\u062f \u0628\u0631 \u0627\u06cc\u0646 \u0627\u0633\u0627\u0633 \u0628\u0647 \u0631\u0648\u0632 \u0634\u0648\u062f.<\/li>\n<li>\u0628\u0631\u0627\u06cc \u0641\u0631\u0645\u062a \u0632\u0645\u0627\u0646 \u0646\u0645\u0627\u06cc\u0634 \u0628\u0627 \u0641\u0631\u0645\u062a hh:mm:ss:ms \u06cc\u06a9 \u06af\u0632\u06cc\u0646\u0647 \u0627\u0636\u0627\u0641\u06cc \u0627\u062e\u062a\u06cc\u0627\u0631\u06cc \u062e\u0648\u0628 \u0627\u0633\u062a.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>\u0634\u0645\u0627 \u0622\u0632\u0627\u062f \u0647\u0633\u062a\u06cc\u062f \u06a9\u0647 \u062e\u0644\u0627\u0642\u06cc\u062a \u062e\u0648\u062f \u0631\u0627 \u0628\u0647 \u06a9\u0627\u0631 \u0628\u06af\u06cc\u0631\u06cc\u062f \u062a\u0627 \u0638\u0627\u0647\u0631 \u06a9\u0631\u0648\u0646\u0648\u0645\u062a\u0631 \u0631\u0627 \u0637\u0631\u0627\u062d\u06cc \u06a9\u0646\u06cc\u062f.  \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0648\u06cc\u062c\u062a \u06a9\u0631\u0648\u0646\u0648\u0645\u062a\u0631 Google \u0631\u0627 \u0628\u0631\u0627\u06cc \u0627\u0644\u0647\u0627\u0645 \u06af\u0631\u0641\u062a\u0646 \u0648 \u06cc\u06a9 \u0645\u062b\u0627\u0644 \u0627\u0645\u062a\u062d\u0627\u0646 \u06a9\u0646\u06cc\u062f.<\/p>\n<p><\/p>\n<hr\/>\n<h2>\n<p>  \u0631\u0627\u0647 \u062d\u0644:<br \/>\n<\/h2>\n<p>\u0627\u06cc\u0646 \u0633\u0648\u0627\u0644 \u062f\u0631 \u0646\u06af\u0627\u0647 \u0627\u0648\u0644 \u0633\u0627\u062f\u0647 \u0628\u0647 \u0646\u0638\u0631 \u0645\u06cc \u0631\u0633\u062f \u0627\u0645\u0627 \u062f\u0631 \u0648\u0627\u0642\u0639 \u067e\u06cc\u0686\u06cc\u062f\u0647 \u062a\u0631 \u0627\u0632 \u0622\u0646 \u0686\u06cc\u0632\u06cc \u0627\u0633\u062a \u06a9\u0647 \u0628\u0647 \u0646\u0638\u0631 \u0645\u06cc \u0631\u0633\u062f.  \u062a\u0648\u062c\u0647 \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u062f \u06a9\u0647 \u067e\u0627\u0631\u0627\u0645\u062a\u0631 \u062a\u0627\u062e\u06cc\u0631 setInterval \u0642\u0627\u0628\u0644 \u0627\u0639\u062a\u0645\u0627\u062f \u0646\u06cc\u0633\u062a.  \u0645\u062f\u062a \u0632\u0645\u0627\u0646\u06cc \u0648\u0627\u0642\u0639\u06cc \u06a9\u0647 \u0628\u06cc\u0646 \u062a\u0645\u0627\u0633\u200c\u0647\u0627 \u0648 \u062a\u0645\u0627\u0633\u200c\u0647\u0627\u06cc \u0628\u0631\u06af\u0634\u062a\u06cc \u0645\u06cc\u200c\u06af\u0630\u0631\u062f \u0628\u0647 \u062f\u0644\u0627\u06cc\u0644 \u0645\u062e\u062a\u0644\u0641 \u0645\u0645\u06a9\u0646 \u0627\u0633\u062a \u0628\u06cc\u0634\u062a\u0631 \u0627\u0632 \u062a\u0623\u062e\u06cc\u0631 \u062f\u0627\u062f\u0647 \u0634\u062f\u0647 \u0628\u0627\u0634\u062f.  \u0628\u0647 \u062f\u0644\u06cc\u0644 \u0627\u06cc\u0646 \u0631\u0641\u062a\u0627\u0631\u060c \u0646\u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u0645 \u0641\u0631\u0636 \u06a9\u0646\u06cc\u0645 \u06a9\u0647 \u0647\u0631 \u0628\u0627\u0631 \u0628\u0627\u0632\u062e\u0648\u0627\u0646\u06cc \u0628\u0627\u0632\u0647\u200c\u0627\u06cc \u0641\u0639\u0627\u0644 \u0645\u06cc\u200c\u0634\u0648\u062f\u060c \u0647\u0645\u0627\u0646 \u0645\u062f\u062a \u0632\u0645\u0627\u0646\u06cc \u06a9\u0647 \u06af\u0630\u0634\u062a.  \u0628\u0631\u0627\u06cc \u0627\u0637\u0645\u06cc\u0646\u0627\u0646 \u0627\u0632 \u0627\u06cc\u0646\u06a9\u0647 \u0627\u0632 \u0628\u0647\u200c\u0631\u0648\u0632\u062a\u0631\u06cc\u0646 \u0632\u0645\u0627\u0646\u200c\u0628\u0646\u062f\u06cc\u200c\u0647\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645\u060c \u0628\u0627\u06cc\u062f \u0632\u0645\u0627\u0646 \u0641\u0639\u0644\u06cc \u0631\u0627 \u062f\u0631 \u06a9\u062f \u067e\u0627\u0633\u062e \u0628\u0647 \u062a\u0645\u0627\u0633 \u0628\u062e\u0648\u0627\u0646\u06cc\u0645.<\/p>\n<p><strong>\u062d\u0627\u0644\u062a<\/strong><br \/>\u0628\u062e\u0634 \u0645\u0634\u06a9\u0644 \u0627\u06cc\u0646 \u0633\u0648\u0627\u0644 \u0627\u06cc\u0646 \u0627\u0633\u062a \u06a9\u0647 \u062a\u0635\u0645\u06cc\u0645 \u0628\u06af\u06cc\u0631\u06cc\u062f \u06a9\u0647 \u0686\u0647 \u0686\u06cc\u0632\u06cc \u062f\u0631 \u062d\u0627\u0644\u062a \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0642\u0631\u0627\u0631 \u0645\u06cc \u06af\u06cc\u0631\u062f \u0648 \u0686\u06af\u0648\u0646\u0647 \u0622\u0646\u0647\u0627 \u0631\u0627 \u0645\u062f\u06cc\u0631\u06cc\u062a \u06a9\u0646\u06cc\u062f.  \u0645\u0627 \u0628\u0647 \u0686\u0646\u062f \u062d\u0627\u0644\u062a \u0646\u06cc\u0627\u0632 \u062f\u0627\u0631\u06cc\u0645:<\/p>\n<ul>\n<li>\n<code>totalDuration<\/code>: \u0645\u062c\u0645\u0648\u0639 \u0632\u0645\u0627\u0646\u06cc \u06a9\u0647 \u062a\u0627 \u06a9\u0646\u0648\u0646 \u06af\u0630\u0634\u062a\u0647 \u0627\u0633\u062a.<\/li>\n<li>\n<code>timerId<\/code>: \u0634\u0646\u0627\u0633\u0647 \u062a\u0627\u06cc\u0645\u0631 \u062a\u0627\u06cc\u0645\u0631 \u0628\u0627\u0632\u0647 \u0632\u0645\u0627\u0646\u06cc \u0641\u0639\u0644\u06cc \u06cc\u0627 <code>null<\/code> \u0627\u06af\u0631 \u062f\u0631 \u062d\u0627\u0644 \u062d\u0627\u0636\u0631 \u0647\u06cc\u0686 \u062a\u0627\u06cc\u0645\u0631 \u062f\u0631 \u062d\u0627\u0644 \u0627\u062c\u0631\u0627 \u0648\u062c\u0648\u062f \u0646\u062f\u0627\u0631\u062f.<\/li>\n<li>\n<code>lastTickTiming<\/code>: \u0627\u06cc\u0646 \u0632\u0645\u0627\u0646\u06cc \u0627\u0633\u062a \u06a9\u0647 \u0622\u062e\u0631\u06cc\u0646 \u0628\u0627\u0632\u0647 \u062a\u0645\u0627\u0633 \u0645\u062c\u062f\u062f \u0627\u062c\u0631\u0627 \u0634\u062f\u0647 \u0627\u0633\u062a.  \u0645\u0627 \u0628\u0647 \u0627\u0641\u0632\u0627\u06cc\u0634 \u0622\u0646 \u0627\u062f\u0627\u0645\u0647 \u062e\u0648\u0627\u0647\u06cc\u0645 \u062f\u0627\u062f <code>totalDuration<\/code> \u062a\u0648\u0633\u0637 \u062f\u0644\u062a\u0627 \u0628\u06cc\u0646 \u0632\u0645\u0627\u0646 \u062c\u0627\u0631\u06cc (<code>Date.now()<\/code>) \u0648 <code>lastTickTiming<\/code>.  \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0627\u06cc\u0646 \u0631\u0648\u06cc\u06a9\u0631\u062f\u060c <code>totalDuration<\/code> \u062d\u062a\u06cc \u0627\u06af\u0631 \u062a\u0645\u0627\u0633 \u0647\u0627 \u062f\u0631 \u0641\u0648\u0627\u0635\u0644 \u0646\u0627\u0645\u0646\u0638\u0645 \u0627\u062c\u0631\u0627 \u0634\u0648\u0646\u062f\u060c \u0647\u0645\u0686\u0646\u0627\u0646 \u062f\u0642\u06cc\u0642 \u062e\u0648\u0627\u0647\u0646\u062f \u0628\u0648\u062f.  \u0645\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u0645 <code>useRef<\/code> \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u0627\u06cc\u0646 \u0645\u0642\u062f\u0627\u0631 \u0632\u06cc\u0631\u0627 \u062f\u0631 \u06a9\u062f \u0631\u0646\u062f\u0631 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0646\u0634\u062f\u0647 \u0627\u0633\u062a.<\/li>\n<\/ul>\n<p>\u0627\u0632 \u0622\u0646\u062c\u0627\u06cc\u06cc \u06a9\u0647 \u0686\u0646\u062f \u062f\u06a9\u0645\u0647 \u062f\u0631 \u0646\u06cc\u0627\u0632\u0645\u0646\u062f\u06cc\u200c\u0647\u0627 \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f \u06a9\u0647 \u0639\u0645\u0644\u06a9\u0631\u062f \u062a\u06a9\u0631\u0627\u0631\u06cc \u062f\u0627\u0631\u0646\u062f\u060c \u0628\u0627\u06cc\u062f \u0627\u06cc\u0646 \u0639\u0645\u0644\u06a9\u0631\u062f\u0647\u0627 \u0631\u0627 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0686\u0646\u062f \u0639\u0645\u0644\u06a9\u0631\u062f \u06a9\u0647 \u062a\u0648\u0633\u0637 \u062f\u06a9\u0645\u0647\u200c\u0647\u0627 \u0641\u0639\u0627\u0644 \u0645\u06cc\u200c\u0634\u0648\u0646\u062f \u062a\u0639\u0631\u06cc\u0641 \u06a9\u0646\u06cc\u0645:<\/p>\n<p><code>startTimer<\/code><br \/>\u0627\u06cc\u0646 \u0639\u0645\u0644\u06a9\u0631\u062f \u062a\u0627\u06cc\u0645\u0631 \u0631\u0627 \u062e\u0627\u0645\u0648\u0634 \u0645\u06cc \u06a9\u0646\u062f \u0648 \u0622\u0646 \u0631\u0627 \u0628\u0647 \u0631\u0648\u0632 \u0645\u06cc \u06a9\u0646\u062f <code>totalDuration<\/code> \u0627\u0631\u0632\u0634 \u0647\u0631 \u0628\u0627\u0631 <code>setInterval<\/code> \u062a\u0645\u0627\u0633 \u0645\u062c\u062f\u062f \u0628\u0627 \u062f\u0644\u062a\u0627 \u0628\u06cc\u0646 \u0622\u062e\u0631\u06cc\u0646 \u0632\u0645\u0627\u0646 \u0628\u0647 \u0631\u0648\u0632 \u0631\u0633\u0627\u0646\u06cc \u0627\u062c\u0631\u0627 \u0645\u06cc \u0634\u0648\u062f (<code>lastTickTiming<\/code>) \u0648 \u0632\u0645\u0627\u0646 \u0641\u0639\u0644\u06cc.  \u0645\u0627 \u0627\u0632 \u06cc\u06a9 \u0632\u0645\u0627\u0646 \u0628\u0646\u062f\u06cc \u0641\u0627\u0635\u0644\u0647 \u0627\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u0645 <code>1ms<\/code> \u0627\u0632 \u0622\u0646\u062c\u0627\u06cc\u06cc \u06a9\u0647 \u06a9\u0631\u0648\u0646\u0648\u0645\u062a\u0631\u0647\u0627 \u0628\u0633\u06cc\u0627\u0631 \u062d\u0633\u0627\u0633 \u0628\u0647 \u0632\u0645\u0627\u0646 \u0647\u0633\u062a\u0646\u062f \u0648 \u062f\u0642\u062a \u062f\u0631 \u0633\u0637\u062d \u0645\u06cc\u0644\u06cc \u062b\u0627\u0646\u06cc\u0647 \u0645\u0648\u0631\u062f \u0646\u0638\u0631 \u0627\u0633\u062a.<\/p>\n<p><code>stopInterval<\/code><br \/>\u06cc\u06a9 \u0639\u0645\u0644\u06a9\u0631\u062f \u0633\u0627\u062f\u0647 \u0628\u0631\u0627\u06cc \u062c\u0644\u0648\u06af\u06cc\u0631\u06cc \u0627\u0632 \u0627\u062c\u0631\u0627\u06cc \u062a\u0627\u06cc\u0645\u0631 \u0641\u0627\u0635\u0644\u0647 (\u0627\u0632 \u0637\u0631\u06cc\u0642 <code>clearInterval<\/code>) \u0648 \u062c\u0631\u06cc\u0627\u0646 \u0631\u0627 \u067e\u0627\u06a9 \u06a9\u0646\u06cc\u062f <code>timerId<\/code>.  \u0627\u06cc\u0646 \u062a\u0648\u0633\u0637 \u062f\u06a9\u0645\u0647 &#8220;Stop&#8221; \u0648 &#8220;Reset&#8221; \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f.<\/p>\n<p><code>resetTimer<\/code><br \/>\u0645\u06cc \u062e\u0648\u0627\u0647\u06cc\u0645 \u062f\u0631 \u0627\u06cc\u0646 \u062a\u0627\u0628\u0639 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0631\u0627 \u0628\u0647 \u062d\u0627\u0644\u062a \u0627\u0648\u0644\u06cc\u0647 \u0628\u0627\u0632\u06af\u0631\u062f\u0627\u0646\u06cc\u0645.  \u0628\u0627 \u062a\u0645\u0627\u0633\u060c \u062a\u0627\u06cc\u0645\u0631 \u0641\u0627\u0635\u0644\u0647 \u0631\u0627 \u0645\u062a\u0648\u0642\u0641 \u0645\u06cc \u06a9\u0646\u062f <code>stopInterval()<\/code> \u0648 \u0647\u0645\u0686\u0646\u06cc\u0646 \u06a9\u0644 \u0645\u062f\u062a \u0632\u0645\u0627\u0646 \u0631\u0627 \u0628\u0647 0 \u0628\u0627\u0632\u0646\u0634\u0627\u0646\u06cc \u0645\u06cc \u06a9\u0646\u062f. \u062a\u0646\u0638\u06cc\u0645 \u0645\u062c\u062f\u062f \u0645\u0642\u062f\u0627\u0631 \u0645\u0647\u0645 \u0646\u06cc\u0633\u062a <code>lastTickTiming<\/code> \u0632\u06cc\u0631\u0627 \u062f\u0631 \u0627\u0628\u062a\u062f\u0627\u06cc \u062a\u0646\u0638\u06cc\u0645 \u062e\u0648\u0627\u0647\u062f \u0634\u062f<code>startTimer()<\/code>\u060c \u0642\u0628\u0644 \u0627\u0632 \u0627\u062c\u0631\u0627\u06cc \u0627\u0648\u0644\u06cc\u0646 \u062a\u0645\u0627\u0633 \u0628\u0627\u0632\u0647 \u0627\u06cc.  \u062a\u0648\u0633\u0637 \u062f\u06a9\u0645\u0647 &#8220;\u062a\u0646\u0638\u06cc\u0645 \u0645\u062c\u062f\u062f&#8221; \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f.<\/p>\n<p><code>toggleTimer<\/code><br \/>\u062a\u0627\u0628\u0639\u06cc \u0628\u0631\u0627\u06cc \u062c\u0627\u0628\u0647\u200c\u062c\u0627\u06cc\u06cc \u0628\u06cc\u0646 \u062a\u0645\u0627\u0633 <code>stopInterval()<\/code> \u0648 <code>startTimer()<\/code> \u0628\u0633\u062a\u0647 \u0628\u0647 \u0627\u06cc\u0646\u06a9\u0647 \u0622\u06cc\u0627 \u062a\u0627\u06cc\u0645\u0631 \u0641\u0639\u0644\u06cc \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f \u06cc\u0627 \u062e\u06cc\u0631.  \u062a\u0648\u0633\u0637 \u0646\u0645\u0627\u06cc\u0634 \u0632\u0645\u0627\u0646 \u0648 \u062f\u06a9\u0645\u0647 &#8220;\u0634\u0631\u0648\u0639&#8221;https:\/\/dev.to\/&#8221;Stop&#8221; \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f.<\/p>\n<p><strong>\u062f\u0633\u062a\u0631\u0633\u06cc<\/strong><br \/>\u0627\u0641\u0631\u0627\u062f\u06cc \u06a9\u0647 \u0628\u0627 a11y \u0622\u0634\u0646\u0627\u06cc\u06cc \u0646\u062f\u0627\u0631\u0646\u062f \u06cc\u06a9 \u0631\u0648\u06cc\u062f\u0627\u062f onClick\/&#8217;click&#8217; \u0628\u0647 \u0639\u0646\u0635\u0631 DOM \u0627\u0636\u0627\u0641\u0647 \u0645\u06cc \u06a9\u0646\u0646\u062f \u06a9\u0647 \u0632\u0645\u0627\u0646 \u0631\u0627 \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u06a9\u0646\u062f (\u0645\u0639\u0645\u0648\u0644\u0627\u064b <\/p>\n<p>) \u0648 \u0622\u0646 \u0631\u0627 \u06a9\u0627\u0645\u0644 \u062f\u0631 \u0646\u0638\u0631 \u0628\u06af\u06cc\u0631\u06cc\u062f.  \u0628\u0627 \u0627\u06cc\u0646 \u062d\u0627\u0644\u060c \u0627\u06cc\u0646 \u062a\u0627\u06cc\u0645\u0631 \u0641\u0642\u0637 \u0628\u0627 \u0627\u0646\u062c\u0627\u0645 \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u0628\u0631\u0627\u06cc 11y \u0645\u0646\u0627\u0633\u0628 \u0646\u06cc\u0633\u062a.  \u0628\u0631\u062e\u06cc \u0645\u0645\u06a9\u0646 \u0627\u0633\u062a \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u0646\u062f <code>tabIndex=\"0\"<\/code> (\u0628\u0631\u0627\u06cc \u0627\u062c\u0627\u0632\u0647 \u062f\u0627\u062f\u0646 \u0628\u0647 \u062a\u0645\u0631\u06a9\u0632) \u0648 <code>role=\"button\"<\/code> \u0628\u0647 \u0639\u0646\u0635\u0631\u06cc \u06a9\u0647 \u0645\u0637\u0645\u0626\u0646\u0627 a11y \u0631\u0627 \u0628\u0647\u0628\u0648\u062f \u0645\u06cc \u0628\u062e\u0634\u062f\u060c \u0627\u0645\u0627 \u0628\u0647\u062a\u0631\u06cc\u0646 \u0646\u06cc\u0633\u062a.<\/p>\n<p>\u0628\u0631\u0627\u06cc \u0628\u0647\u062a\u0631\u06cc\u0646 a11y\u060c \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u0645 \u0648 \u0628\u0627\u06cc\u062f \u0627\u0632 a \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u0645 <code>&lt;button&gt;<\/code> \u0628\u0631\u0627\u06cc \u0627\u0631\u0627\u0626\u0647 \u0632\u0645\u0627\u0646 \u0628\u0646\u062f\u06cc\u060c \u06a9\u0647 \u0628\u0627 \u0645\u0632\u0627\u06cc\u0627\u06cc \u0627\u0636\u0627\u0641\u06cc a11y \u0645\u0627\u0646\u0646\u062f \u0641\u0648\u06a9\u0648\u0633 \u0648 \u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc \u0627\u0632 \u0635\u0641\u062d\u0647 \u06a9\u0644\u06cc\u062f \u0647\u0645\u0631\u0627\u0647 \u0627\u0633\u062a.  \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 a <code>&lt;button&gt;<\/code>\u060c \u0627\u0632 \u0641\u0648\u06a9\u0648\u0633 \u062e\u0648\u062f\u06a9\u0627\u0631 \u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc \u0645\u06cc \u06a9\u0646\u06cc\u062f (\u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u0632 Tab \u0628\u0631\u0627\u06cc \u0641\u0648\u06a9\u0648\u0633 \u0631\u0648\u06cc \u062a\u0627\u06cc\u0645\u0631 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f) \u0648 \u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc \u0627\u0632 \u0635\u0641\u062d\u0647 \u06a9\u0644\u06cc\u062f (\u0628\u0631\u0627\u06cc \u0634\u0631\u0648\u0639\/ \u062a\u0648\u0642\u0641 \u062a\u0627\u06cc\u0645\u0631 \u0631\u0648\u06cc Spacebar \u0636\u0631\u0628\u0647 \u0628\u0632\u0646\u06cc\u062f).  \u062f\u0648\u0645\u06cc \u0628\u062f\u0648\u0646 \u06a9\u062f \u0633\u0641\u0627\u0631\u0634\u06cc \u0628\u0631\u0627\u06cc \u0627\u0641\u0632\u0648\u062f\u0646 \u0634\u0646\u0648\u0646\u062f\u06af\u0627\u0646 \u0631\u0648\u06cc\u062f\u0627\u062f\u0647\u0627\u06cc \u06a9\u0644\u06cc\u062f\u06cc \u0628\u0647 \u0639\u0646\u0627\u0635\u0631 \u063a\u06cc\u0631 \u062a\u0639\u0627\u0645\u0644\u06cc \u0627\u0645\u06a9\u0627\u0646 \u067e\u0630\u06cc\u0631 \u0646\u062e\u0648\u0627\u0647\u062f \u0628\u0648\u062f.<\/p>\n<p><strong>\u062a\u062c\u0631\u0628\u0647 \u06cc \u06a9\u0627\u0631\u0628\u0631<\/strong><br \/><code>user-select<\/code>: \u0647\u06cc\u0686 \u06a9\u062f\u0627\u0645 \u0628\u0647 \u062a\u0627\u06cc\u0645\u0631 \u0627\u0636\u0627\u0641\u0647 \u0646\u0645\u06cc \u0634\u0648\u062f \u062a\u0627 \u0627\u06af\u0631 \u06a9\u0627\u0631\u0628\u0631 \u0631\u0648\u06cc \u0622\u0646\u0647\u0627 \u062f\u0648\u0628\u0627\u0631 \u06a9\u0644\u06cc\u06a9 \u06a9\u0646\u062f\u060c \u0627\u0631\u0642\u0627\u0645 \u0627\u0646\u062a\u062e\u0627\u0628 \u0646\u0645\u06cc \u0634\u0648\u0646\u062f.  \u0645\u0639\u0645\u0648\u0644\u0627\u064b \u0627\u0646\u062a\u062e\u0627\u0628 \u0627\u0631\u0642\u0627\u0645 \u0645\u0648\u0631\u062f \u0646\u0638\u0631 \u0646\u06cc\u0633\u062a.<\/p>\n<hr\/>\n<p>StopWatchWrapper.js<\/p>\n<pre class=\"highlight plaintext\"><code>import React from 'react';\nimport { StopWatch } from '.\/StopWatch';\n\nexport const StopWatchWrapper = () =&gt; {\n  return &lt;StopWatch \/&gt;;\n};\n\n<\/code><\/pre>\n<p>StopWatch.js<\/p>\n<pre class=\"highlight plaintext\"><code>import React, { useState, useRef } from 'react';\nimport '.\/stopwatch.css';\n\nconst MS_IN_SECOND = 1000;\nconst SECONDS_IN_MINUTE = 60;\nconst MINUTES_IN_HOUR = 60;\nconst MS_IN_HOUR = MINUTES_IN_HOUR * SECONDS_IN_MINUTE * MS_IN_SECOND;\nconst MS_IN_MINUTE = SECONDS_IN_MINUTE * MS_IN_SECOND;\n\nconst padTwoDigit = (number) =&gt; (number &gt;= 10 ? String(number) : `0${number}`);\n\/* key point is this function: *\/\nconst formatTime = (timeParam) =&gt; {\n  let time = timeParam;\n  const parts = {\n    hours: 0,\n    minutes: 0,\n    seconds: 0,\n    ms: 0,\n  };\n\n  if (time &gt; MS_IN_HOUR) {\n    parts.hours = Math.floor(time \/ MS_IN_HOUR);\n    time %= MS_IN_HOUR;\n  }\n\n  if (time &gt; MS_IN_MINUTE) {\n    parts.minutes = Math.floor(time \/ MS_IN_MINUTE);\n    time %= MS_IN_MINUTE;\n  }\n\n  if (time &gt; MS_IN_SECOND) {\n    parts.seconds = Math.floor(time \/ MS_IN_SECOND);\n    time %= MS_IN_SECOND;\n  }\n\n  parts.ms = time;\n\n  return parts;\n};\n\nexport const StopWatch = () =&gt; {\n  const lastTickTiming = useRef(null); \/\/ use `useRef` to create this value since it's not used in the render code.\n  const [totalDuration, setTotalDuration] = useState(0);\n  const [timerId, setTimerId] = useState(null); \/\/ Timer ID of the active interval, if one is running.\n\n  const isRunning = timerId != null; \/\/ Derived state to determine if there's a timer running.\n\n  const startTimer = () =&gt; {\n    lastTickTiming.current = Date.now(); \/\/ \u7528\u4e8e\u8bb0\u5f55\u4e0a\u6b21setInterval\u7684callback\u505c\u5728\u54ea\u513f\u4e86(\u8bb0\u5f55\u4e86ms)\n\n    \/\/\u4e0b\u9762\u8fd9\u4e2asetInterval\u4e00\u76f4run, \u6bcf\u96941ms run\u4e00\u6b21callback, \u7136\u540e\u6839\u636e \u4e4b\u524d\u7684\u73b0\u5728\u7684\u65f6\u95f4-\u4e0a\u6b21\u8bb0\u5f55\u7684ms = passedtime, \u518d\u53bb\u66f4\u65b0totalDuration\n    const timer = window.setInterval(() =&gt; {\n      const now = Date.now();\n      const timePassed = now - lastTickTiming.current;\n      \/\/ Use the callback form of setState to ensure we are using the latest value of duration.\n      setTotalDuration((duration) =&gt; duration + timePassed);\n      lastTickTiming.current = now; \/\/ update lastTickTiming\n    }, 1);\n\n    setTimerId(timer);\n  };\n\n  const stopInterval = () =&gt; {\n    window.clearInterval(timerId);\n    setTimerId(null);\n  };\n\n  const resetTimer = () =&gt; {\n    stopInterval();\n    setTotalDuration(0);\n  };\n\n  const toggleTimer = () =&gt; {\n    if (isRunning) stopInterval();\n    else startTimer();\n  };\n\n  const formattedTime = formatTime(totalDuration);\n  \/\/ console.log(formattedTime);\n  return (\n    &lt;div&gt;\n      &lt;button\n        className=\"time\"\n        onClick={() =&gt; {\n          toggleTimer();\n        }}\n      &gt;\n        {formattedTime.hours &gt; 0 &amp;&amp; (\n          &lt;span&gt;\n            &lt;span className=\"time-number\"&gt;{formattedTime.hours}&lt;\/span&gt;\n            &lt;span className=\"time-unit\"&gt;h&lt;\/span&gt;\n          &lt;\/span&gt;\n        )}\n\n        {formattedTime.minutes &gt; 0 &amp;&amp; (\n          &lt;span&gt;\n            &lt;span className=\"time-number\"&gt;{formattedTime.minutes}&lt;\/span&gt;\n            &lt;span className=\"time-unit\"&gt;m&lt;\/span&gt;\n          &lt;\/span&gt;\n        )}\n\n        &lt;span&gt;\n          &lt;span className=\"time-number\"&gt;{formattedTime.seconds}&lt;\/span&gt;\n          &lt;span className=\"time-unit\"&gt;s&lt;\/span&gt;\n        &lt;\/span&gt;\n\n        &lt;span className=\"time-number time-number--small\"&gt;\n          {padTwoDigit(Math.floor(formattedTime.ms \/ 10))}\n        &lt;\/span&gt;\n      &lt;\/button&gt;\n\n      &lt;div&gt;\n        &lt;button\n          onClick={() =&gt; {\n            toggleTimer();\n          }}\n        &gt;\n          {isRunning ? 'Stop' : 'Start'}\n        &lt;\/button&gt;\n        &lt;button\n          onClick={() =&gt; {\n            resetTimer();\n          }}\n        &gt;\n          Reset\n        &lt;\/button&gt;\n      &lt;\/div&gt;\n    &lt;\/div&gt;\n  );\n};\n\n<\/code><\/pre>\n<p>timewatch.css<\/p>\n<pre class=\"highlight plaintext\"><code>.time {\n  align-items: baseline;\n  background-color: transparent;\n  border: none;\n  cursor: pointer;\n  display: flex;\n  gap: 16px;\n  user-select: none;\n}\n\n.time-unit {\n  font-size: 24px\n}\n\n.time-number {\n  font-size: 62px;\n}\n\n.time-number--small {\n  font-size: 36px;\n}\n<\/code><\/pre>\n<hr\/>\n<p>\u062a\u0648\u062c\u0647: \u0645\u0646\u0637\u0642 \u0628\u0627\u0644\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u0628\u0631\u0627\u06cc \u0634\u0645\u0627\u0631\u0634 \u0645\u0639\u06a9\u0648\u0633 \u062a\u0627\u06cc\u0645\u0631 \u0646\u06cc\u0632 \u06a9\u0627\u0631 \u06a9\u0646\u062f.  \u0645\u0647\u0645\u062a\u0631\u06cc\u0646 \u0686\u06cc\u0632\u06cc \u06a9\u0647 \u0628\u0627\u06cc\u062f \u062a\u063a\u06cc\u06cc\u0631 \u06a9\u0646\u062f \u0639\u0628\u0627\u0631\u062a\u0646\u062f \u0627\u0632:<br \/>1.<code>const [totalDuration, setTotalDuration] = useState(maxMinutes * MS_IN_MINUTE);<\/code>\u060c <code>maxMinutes<\/code> \u0644\u0648\u0627\u0632\u0645 \u0645\u0648\u0644\u0641\u0647 \u062a\u0627\u06cc\u0645\u0631 \u0627\u0633\u062a \u06a9\u0647 \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u0628\u0627 \u0627\u0631\u0627\u062f\u0647 \u06a9\u0627\u0631\u0628\u0631 \u062a\u0635\u0645\u06cc\u0645 \u06af\u06cc\u0631\u06cc \u06a9\u0646\u062f.<\/p>\n<p>2.<code>setTotalDuration((duration) =&gt; duration - timePassed)<\/code>.  \u0631\u0648\u0634 \u0645\u062d\u0627\u0633\u0628\u0647 \u0645\u062f\u062a \u0632\u0645\u0627\u0646 \u06a9\u0644 \u062a\u063a\u06cc\u06cc\u0631 \u06a9\u0631\u062f\u0647 \u0627\u0633\u062a. <\/p>\n<\/p><\/div>\n","protected":false},"excerpt":{"rendered":"<p>\u06cc\u06a9 \u0648\u06cc\u062c\u062a \u06a9\u0631\u0648\u0646\u0648\u0645\u062a\u0631 \u0628\u0633\u0627\u0632\u06cc\u062f \u06a9\u0647 \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u0645\u062f\u062a \u0632\u0645\u0627\u0646 \u06af\u0630\u0634\u062a\u0647 \u0631\u0627 \u0627\u0646\u062f\u0627\u0632\u0647 \u06af\u06cc\u0631\u06cc \u06a9\u0646\u062f. \u062a\u0627\u06cc\u0645\u0631 \u0641\u0639\u0644\u06cc \u0631\u0627 \u0646\u0634\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f \u0648 \u062f\u0648 \u062f\u06a9\u0645\u0647 \u062f\u0631 \u0632\u06cc\u0631 \u062f\u0627\u0631\u062f: &#8220;\u0634\u0631\u0648\u0639\/\u062a\u0648\u0642\u0641&#8221; \u0648 &#8220;\u0628\u0627\u0632\u0646\u0634\u0627\u0646\u06cc&#8221;. \u0627\u0644\u0632\u0627\u0645\u0627\u062a \u062f\u06a9\u0645\u0647 \u0634\u0631\u0648\u0639\/\u062a\u0648\u0642\u0641: \u0628\u0633\u062a\u0647 \u0628\u0647 \u0627\u06cc\u0646\u06a9\u0647 \u062a\u0627\u06cc\u0645\u0631 \u062f\u0631 \u062d\u0627\u0644 \u0627\u062c\u0631\u0627 \u0628\u0627\u0634\u062f\u060c \u062a\u0627\u06cc\u0645\u0631 \u0631\u0627 \u0634\u0631\u0648\u0639 \u06cc\u0627 \u0645\u062a\u0648\u0642\u0641 \u0645\u06cc \u06a9\u0646\u062f. \u0628\u0627\u0632\u0646\u0634\u0627\u0646\u06cc: \u062a\u0627\u06cc\u0645\u0631 \u0631\u0627 \u0628\u0647 0 \u0628\u0627\u0632\u0646\u0634\u0627\u0646\u06cc \u0645\u06cc \u06a9\u0646\u062f &hellip;<\/p>\n","protected":false},"author":2,"featured_media":13108,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"fifu_image_url":"","fifu_image_alt":"","footnotes":""},"categories":[339],"tags":[],"class_list":["post-13107","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dev"],"_links":{"self":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/13107","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/comments?post=13107"}],"version-history":[{"count":0,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/13107\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media\/13108"}],"wp:attachment":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media?parent=13107"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/categories?post=13107"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/tags?post=13107"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}