ساعة إيقاف تعمل

الدرس 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 كل ثانية.

إذا كنت تريد إيقاف الفاصل الزمني (interval)، استخدم clearInterval مع القيمة التي ترجعها setInterval:

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

التحدي

متوسط

أضف الدعم التالي إلى ملف JS الخاص بك:

بمجرد النقر على زر start/stop، قم بتعيين فاصل زمني (interval) يقوم بتحديث نص ساعة الإيقاف كل ثانية بمقدار واحد، وتأكد من تنسيقه بشكل صحيح.
بمجرد النقر على زر start/stop مرة أخرى، قم بإيقاف الفاصل الزمني (interval) الجاري.

بمجرد إضافة setInterval إلى الكود الخاص بك، ستحتاج إلى النقر فوق زر reset في عرض الويب:

جرّب بنفسك

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
    <body>
        <!-- Write HTML code here -->
        <script src="script.js"></script>
    </body>
</html>