JavaScript'te Kronometre Nasıl Oluşturulur

JavaScript stop watch veya daha doğrusu stop down timer, zaman aralıklarında yürütülen JavaScript zamanlama yöntemleri kullanılarak uygulanabilir.

JavaScript zamanlama yöntemleri, bir düğmeye tıklamanıza veya bir olayı çağırmanıza gerek kalmadan anında yapılacak belirli bir görevi otomatikleştirir.

JavaScript zamanlaması iki temel yöntemden oluşur:

• setTimeout("javascript ifadesi", milisaniye);
• clearTimeout( setTimeout() kimliği);

JavaScript zamanlama yöntemlerini kullanırken, JavaScript'in ifadeleri zaman aralıklarında nasıl yürüttüğünü anlamanız gerekir.

setTimeout() Yöntemi

Sözdizimi:

 setTimeout( "JavaScript Statements", milliseconds );

setTimeout() JavaScript zamanlama yöntemi yalnızca iki parametre alır:

• ilk parametre: bu parametre, yürütmek istediğiniz JavaScript ifadeleridir. Bir dize işlevi adı da ona iletilebilir.
• ikinci parametre: İlk parametrede JavaScript deyimlerini çalıştırmadan önce geçmesi gereken milisaniyeyi belirtir. Basitçe ( Yürütmede Gecikme ) olarak adlandırılabilir.

Örnek : setTimeout() Yönteminin Yapısı

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

Örnek: Milisaniyeyi Hesaplama

JavaScript olay zamanlama yöntemleriyle çalışmak için milisaniyelerin nasıl hesaplanacağını anlamanız çok önemlidir.

Bin milisaniyede (1000ms) bir saniyeniz (1s) var

Milisaniye Formülleri

 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

Bu, bir saniyeye (1sn) kadar değil, 300 milisaniye = 0,3 saniye anlamına gelir. JavaScript ifadeleriniz 0,3 saniyelik (0,3 saniyelik) zaman aralığında yürütülecektir.

Kronometre Oluşturma

JavaScript zamanlama olay yöntemlerini kullanarak kronometremizi oluşturabiliriz.

Örnek: Yapı

 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 ); }

Örnek: startwatch.js için JavaScript Kodu

 // 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() Yöntemi

Zamanlayıcıyı durdurmak için clearTimeout() zamanlama olayı yöntemini çağırmanız gerekir ve bu çok kullanışlı olur.

Yalnızca bir parametresi vardır: setTimeout() yönteminin dönüş kimliği

Sözdizimi:

 clearTimeout( return ID of setTimeout() );

Not: setTimeout() zamanlama yöntemi her zaman bir değer döndürür ve bu değer clearTimeout() zamanlama olayı yöntemine iletilir.

ClearTimeout() Parametresi

var clearTime = setTimeout( "JavaScript İfadeleri", 100 );

clearTime değişkeni, setTimeout() zamanlama yöntemi tarafından bir değer olarak döndürülür ve bu, clearTimeout( ID ) öğesine referans olarak bir kimlik olarak iletilebilir - clearTimeout( clearTime );

Nasıl çalışır

Etkin olan bir setTimeout() zamanlama yönteminde clearTimeout() zamanlama yöntemi çağrıldığında, clearTimeout() zamanlama yöntemi setTimeout() zamanlama yönteminin yürütülmesini durdurur, ancak yürütmesini tamamen bozmadan.

setTimeout() zamanlama yöntemi, clearTimeout() zamanlama yönteminin çağrıldığı süre boyunca boşta bırakılır ve setTimeout() zamanlama yöntemini yeniden çalıştırdığınızda, baştan başlamaz, yürütmesinin durdurulduğu noktadan başlar. başlangıçtan beri.

Tıpkı bir mp3 medya oynatıcısını duraklattığınızda ve daha sonra oynattığınızda olduğu gibi, önceki konumundan çalmaya devam eder, ancak baştan başlamaz.

Örneğin, setTimeout() zamanlama yöntemi kullanılarak oluşturulmuş çalışan bir zamanlayıcım olduğunu ve başlangıç ​​noktasının 00 olduğunu varsayalım. Zamanlayıcıyı çalıştırıyorum ve şu anda 41 okuyor.

Bu aktif setTimout() yönteminde clearTimeout() zamanlama yöntemini çağırırsam, bu süre boyunca boşta yapacak ve setTimeout() zamanlama yöntemini yeniden çalıştırdığımda 00'dan değil 41'den saymaya başlayacak .

Zamanlayıcıyı 00'dan başlatmak için sayacını sıfırlamanız gerekir. Mantık bu.

Örnek: Zamanı Durdur - 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>

Kronometre tamamlandı ve böyle görünmesi gerekiyor.