كيفية إنشاء ساعة توقيت في جافا سكريبت

يمكن تنفيذ JavaScript stop watch أو بالأحرى مؤقت التوقف باستخدام طرق توقيت JavaScript التي يتم تنفيذها في فترات زمنية.

تعمل طرق توقيت JavaScript على أتمتة مهمة معينة يتم إجراؤها بسرعة دون الحاجة إلى النقر فوق زر أو استدعاء حدث.

يتكون توقيت JavaScript من طريقتين رئيسيتين:

• setTimeout ("تعبير جافا سكريبت" ، مللي ثانية) ؛
• clearTimeout (معرف setTimeout ()) ،

عند استخدام طرق توقيت JavaScript ، فأنت بحاجة إلى فهم كيفية تنفيذ JavaScript للجمل في فترات زمنية.

طريقة setTimeout ()

بناء الجملة:

 setTimeout( "JavaScript Statements", milliseconds );

تأخذ طريقة توقيت JavaScript setTimeout () معلمتين فقط:

• المعلمة الأولى: هذه المعلمة هي عبارات JavaScript التي تريد تنفيذها. يمكن أيضًا تمرير اسم دالة السلسلة إليها.
• المعلمة الثانية: تحدد المللي ثانية التي ستستغرقها قبل تنفيذ عبارات JavaScript في المعلمة الأولى. يمكن ببساطة الإشارة إليه باسم (تأخير في التنفيذ).

مثال: هيكل طريقة setTimeout ()

 var setTime = setTimeout( function ( ) { // javascript statements }, 500 ); Or var setTime = setTimeout( "setTimeFunction( )", 500 );

مثال: حساب ملي ثانية

للعمل مع طرق توقيت أحداث JavaScript ، من المهم جدًا أن تفهم كيفية حساب المللي ثانية.

لديك ثانية واحدة (1 ثانية) في ألف مللي ثانية (1000 مللي ثانية)

صيغ ميلي ثانية

 1000ms = 1s Yms = Xs if 1000ms = 1s 300ms = Xs #cross multiplying 1000ms * Xs = 300ms * 1s X * 1000 = 300 * 1 1000X = 300 X = 300 / 1000 X = 0.3s

هذا يعني 300 مللي ثانية = 0.3 ثانية ، وليس حتى ثانية واحدة (1 ثانية). سيتم تنفيذ عبارات JavaScript الخاصة بك في فاصل زمني يبلغ 0.3 ثانية (0.3 ثانية).

إنشاء ساعة توقف

باستخدام طرق حدث توقيت JavaScript ، يمكننا إنشاء ساعة الإيقاف الخاصة بنا.

مثال: الهيكل

 var clear; function stopWatch( ) { // javascript statement here clear = setTimeout( "stopWatch( )", 1000 ); } Or function stopWatch( ) { // javascript statement here clear = setTimeout( function ( ) { // javascript statement here }, 1000 ); } Or var stopWatch = function ( ) { // javascript statement here clear = setTimeout( "stopWatch( )", 1000 ); }

مثال: كود JavaScript لـ startwatch.js

 // initialize your variables outside the function var count = 0; var clearTime; var seconds = 0, minutes = 0, hours = 0; var clearState; var secs, mins, gethours ; function startWatch( ) { /* check if seconds is equal to 60 and add a +1 to minutes, and set seconds to 0 */ if ( seconds === 60 ) { seconds = 0; minutes = minutes + 1; } /* you use the javascript tenary operator to format how the minutes should look and add 0 to minutes if less than 10 */ mins = ( minutes < 10 ) ? ( '0' + minutes + ': ' ) : ( minutes + ': ' ); /* check if minutes is equal to 60 and add a +1 to hours set minutes to 0 */ if ( minutes === 60 ) { minutes = 0; hours = hours + 1; } /* you use the javascript tenary operator to format how the hours should look and add 0 to hours if less than 10 */ gethours = ( hours < 10 ) ? ( '0' + hours + ': ' ) : ( hours + ': ' ); secs = ( seconds < 10 ) ? ( '0' + seconds ) : ( seconds ); // display the stopwatch var x = document .getElementById("timer"); x.innerHTML = 'Time: ' + gethours + mins + secs; /* call the seconds counter after displaying the stop watch and increment seconds by +1 to keep it counting */ seconds++; /* call the setTimeout( ) to keep the stop watch alive ! */ clearTime = setTimeout( "startWatch( )", 1000 ); } // startWatch( ) //create a function to start the stop watch function startTime( ) { /* check if seconds, minutes, and hours are equal to zero and start the stop watch */ if ( seconds === 0 && minutes === 0 && hours === 0 ) { /* hide the fulltime when the stop watch is running */ var fulltime = document.getElementById( "fulltime" ); fulltime.style.display = "none"; /* hide the start button if the stop watch is running */ this.style.display = "none"; /* call the startWatch( ) function to execute the stop watch whenever the startTime( ) is triggered */ startWatch( ); } // if () } // startTime() /* you need to bind the startTime( ) function to any event type to keep the stop watch alive ! */ window.addEventListener( 'load', function ( ) { var start = document .getElementById("start"); start.addEventListener( 'click', startTime ); }); // startwatch.js end

طريقة clearTimeout ()

لإيقاف المؤقت ، تحتاج إلى الاتصال بطريقة حدث التوقيت clearTimeout () وهذا مفيد للغاية.

يحتوي على معلمة واحدة فقط: معرّف الإرجاع لطريقة setTimeout ()

بناء الجملة:

 clearTimeout( return ID of setTimeout() );

ملاحظة: تقوم طريقة التوقيت setTimeout () دائمًا بإرجاع قيمة ، ويتم تمرير هذه القيمة إلى طريقة حدث التوقيت clearTimeout ().

معلمة ClearTimeout ()

var clearTime = setTimeout ("JavaScript Statements"، 100) ؛

يتم إرجاع متغير clearTime كقيمة بواسطة طريقة توقيت setTimeout () ، والتي يمكن تمريرها إلى clearTimeout (ID) كمعرف للرجوع إليها - clearTimeout (clearTime) ؛

كيف تعمل

عندما يتم استدعاء طريقة clearTimeout () على طريقة توقيت setTimeout () النشطة ، فإن طريقة توقيت clearTimeout () ستوقف تنفيذ طريقة توقيت setTimeout () ولكن دون تدمير تنفيذها بالكامل.

تُترك طريقة setTimeout () في وضع الخمول خلال الفترة التي يُطلق فيها على طريقة clearTimeout () للتوقيت ، وعندما تعيد تنفيذ طريقة توقيت setTimeout () ، ستبدأ من النقطة التي توقف فيها تنفيذها ، وليس البدء من جديد. من البداية.

تمامًا مثلما تقوم بإيقاف مشغل وسائط mp3 مؤقتًا ، ثم إعادة تشغيله ، فإنه يستمر في التشغيل من الموضع السابق ، ولكن لا يبدأ من البداية.

على سبيل المثال ، لنفترض أن لدي مؤقتًا قيد التشغيل تم إنشاؤه باستخدام طريقة توقيت setTimeout () ، ونقطة البداية هي 00. قمت بتشغيل المؤقت ، وهو الآن يقرأ 41.

إذا استدعت طريقة clearTimeout () للتوقيت على طريقة setTimout () النشطة هذه ، فستجعلها خاملة خلال تلك الفترة ، وكلما أعدت تنفيذ طريقة توقيت setTimeout () ، سيبدأ العد من 41 ، وليس من 00 .

لجعل العداد يبدأ من 00 ، عليك إعادة ضبط عداده. هذا هو المنطق.

مثال: Stop The Time - stopwatch.js

 //create a function to stop the time function stopTime( ) { /* check if seconds, minutes and hours are not equal to 0 */ if ( seconds !== 0 || minutes !== 0 || hours !== 0 ) { /* display the full time before reseting the stop watch */ var fulltime = document .getElementById( "fulltime" ); //display the full time fulltime.style.display = "block"; var time = gethours + mins + secs; fulltime.innerHTML = 'Fulltime: ' + time; // reset the stop watch seconds = 0; minutes = 0; hours = 0; secs = '0' + seconds; mins = '0' + minutes + ': '; gethours = '0' + hours + ': '; /* display the stopwatch after it's been stopped */ var x = document.getElementById ("timer"); var stopTime = gethours + mins + secs; x.innerHTML = stopTime; /* display all stop watch control buttons */ var showStart = document.getElementById ('start'); showStart.style.display = "inline-block"; var showStop = document.getElementById ("stop"); showStop.style.display = "inline-block"; /* clear the stop watch using the setTimeout( ) return value 'clearTime' as ID */ clearTimeout( clearTime ); } // if () } // stopTime() /* you need to call the stopTime( ) function to terminate the stop watch */ window.addEventListener( 'load', function ( ) { var stop = document.getElementById ("stop"); stop.addEventListener( 'click', stopTime ); }); // stopwatch.js end

CSS

 #stopWatch { width: 280px; height: auto; text-align: center; display: block; padding: 5px; margin: 0 auto; } #timer, #fulltime { width: auto; height: auto; padding: 10px; font-weight: bold; font-family: tahoma; display: block; border: 1px solid #eee; text-align: center; box-shadow: 0 0 5px #ccc; background: #fbfbf0; color: darkblue; border-bottom:4px solid darkgrey; } button { cursor: pointer; font-weight: 700; } #fulltime { display:none; font-size:16px; font-weight:bold; }

HTML

 <!DOCTYPE html> <html lang="en"> <head> <title> JavaScript Stop Watch </title> <style text="text/css"> </style> <script type="text/javascript"> </script> </head> <body> <section> <p> Time : 00:00:00 </p> <button> Start </button> <button> Stop </button> <p> </p> </section> </body> </html>

اكتملت ساعة التوقف ، وهذا ما يجب أن تبدو عليه.