שעון עצר פעיל

שיעור 9 מתוך 10 בקורס שעון עצר – פרויקט HTML/CSS/JS של Coddy.

עכשיו, כשכפתורי ההתחלה והעצירה פועלים, הגיע הזמן להתחיל לספור!

כדי לספור, נשתמש בפונקציה של JavaScript שנקראת setInterval:

const interval = setInterval(func, milliseconds)

הפונקציה מקבלת שני ארגומנטים: פונקציה ומספר שמייצג אלפיות שנייה. הפונקציה נקראת בכל פעם שעובר מספר אלפיות השנייה שצוין.

לדוגמה:

let count = 0

function updateCount() {
	count += 1;
}

const interval = setInterval(updateCount, 1000)

בדוגמה שלמעלה, אנחנו מגדילים את המשתנה count ב-1 בכל שנייה.

אם רוצים לעצור מרווח זמן, משתמשים ב-clearInterval עם הערך שמוחזר מ-setInterval:

const interval = setInterval(updateCount, 1000)
clearInterval(interval)

אתגר

בינוני

הוסף את התמיכה הבאה לקובץ ה-JS שלך:

לאחר לחיצה על כפתור ההתחלה/עצירה, הגדר מרווח זמן שיעדכן את הטקסט של שעון העצר בכל שנייה באחד, ודא שהעיצוב נכון.
לאחר לחיצה על כפתור ההתחלה/עצירה שוב, נקה את מרווח הזמן הפעיל.

לאחר שתוסיף setInterval לקוד שלך, יהיה עליך ללחוץ על כפתור האיפוס בתצוגת האינטרנט:

נסו בעצמכם

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
    <body>
        <!-- כתבו כאן קוד HTML -->
        <script src="script.js"></script>
    </body>
</html>