วิธีสร้างนาฬิกาจับเวลาใน JavaScript

JavaScript หยุดดูหรือค่อนข้างหยุดตัวจับเวลาสามารถนำมาใช้โดยใช้วิธีการจับเวลา JavaScript ซึ่งดำเนินการในช่วงเวลา

วิธีการจับเวลาของ JavaScript ทำให้งานบางอย่างทำงานโดยอัตโนมัติในทันที โดยที่คุณไม่ต้องคลิกปุ่มหรือเรียกเหตุการณ์

เวลา JavaScript ประกอบด้วยสองวิธีหลัก:

• setTimeout ( "นิพจน์จาวาสคริปต์", มิลลิวินาที);
• clearTimeout( ID ของ setTimeout( ) );

เมื่อใช้วิธีจับเวลา JavaScript คุณต้องเข้าใจวิธีที่ JavaScript รันคำสั่งในช่วงเวลา

setTimeout( ) เมธอด

ไวยากรณ์:

 setTimeout( "JavaScript Statements", milliseconds );

setTimeout( ) วิธีการจับเวลา JavaScript ใช้พารามิเตอร์เพียงสองพารามิเตอร์:

• พารามิเตอร์แรก: พารามิเตอร์นี้คือคำสั่ง JavaScript ที่คุณต้องการดำเนินการ สามารถส่งผ่านชื่อฟังก์ชันสตริงได้
• พารามิเตอร์ที่สอง: ระบุมิลลิวินาทีก่อนที่จะดำเนินการคำสั่ง JavaScript ในพารามิเตอร์แรก เรียกง่ายๆ ว่า ( Delay On Execution )

ตัวอย่าง : โครงสร้างของ setTimeout( ) Method

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

ตัวอย่าง: การคำนวณมิลลิวินาที

ในการทำงานกับวิธีการจับเวลาเหตุการณ์ JavaScript เป็นสิ่งสำคัญมากที่คุณเข้าใจวิธีคำนวณมิลลิวินาที

คุณมีหนึ่งวินาที ( 1 วินาที ) ในหนึ่งพันมิลลิวินาที ( 1,000 มิลลิวินาที )

สูตรมิลลิวินาที

 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( ) ซึ่งสะดวกมาก

มีพารามิเตอร์เพียงตัวเดียว: return ID ของ setTimeout( ) method

ไวยากรณ์:

 clearTimeout( return ID of setTimeout() );

หมายเหตุ: วิธีกำหนดเวลา setTimeout( ) จะคืนค่าเสมอ และค่านั้นจะถูกส่งไปยังวิธีการกำหนดเวลาเหตุการณ์ clearTimeout( )

พารามิเตอร์ ClearTimeout( )

var clearTime = setTimeout ( "คำสั่ง JavaScript", 100 );

ตัวแปร clearTime ถูกส่งกลับเป็นค่าโดยวิธีการจับเวลา setTimeout( ) ซึ่งสามารถส่งต่อไปยัง clearTimeout( ID ) เป็น 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>

นาฬิกาจับเวลาเสร็จสิ้นแล้ว และนี่คือลักษณะที่ควรจะเป็น