محرر ويب أونلاين

<!DOCTYPE html>
<html>
<body>
    <h1>JavaScript clearInterval</h1>
    <p>The clearInterval() function can be used to stop the exection
        of the timer initialy created by setInterval() function.</p>
    <p id="clock">Current time will be shown here</p>
    <button id="stopButton">Stop timer</button>
    
    <script>
        // clock في متغير إسمه clock يساوي id هنا قمنا بتخزين العنصر الذي يملك
        let clock = document.querySelector('#clock');

        // سيتم تنفيذه كلما مرت ثانية واحدة setInterval() الأمر الموضوع في الدالة
        // timer قمنا بتخزينه في المتغير setInterval() الرقم الذي ترجعه الدالة
        let timer = setInterval(() => {
            clock.innerHTML = new Date().toLocaleTimeString();
        }, 1000);

        // سيتم stopButton يساوي id هنا قلنا أنه عند النقر على العنصر الذي يملك
        // timer إلغاء تنفيذ أوامر المؤقت الذي يشير إليه العدد المخزن في المتغير
        document.querySelector('#stopButton').addEventListener('click', () => {
            clearInterval(timer);
        });
    </script>
</body>
</html>