โค้ดนับเวลาถอยหลัง โดยใช้ jQuery Framework

โค้ดนับเวลาถอยหลัง โดยใช้ jQuery Framework บทความนี้สอนใช้ jQuery ร่วมกับคำสั่ง JavaScript เพื่อสร้างโค้ดนับเวลาถอยหลัง ด้วยคำสั่ง setInterval ร่วมกับ clearInterval สามารถเขียนโปรแกรมได้ดังนี้

ตัวอย่าง โค้ดนับเวลาถอยหลัง โดยใช้ jQuery Framework

1. ติดตั้ง jQuery Framework ผ่าน CDN

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

2. เขียนโค้ด HTML สำหรับแสดงตัวเลข สำหรับนับเวลาถอยหลัง

<div id="data"></div>

3. เขียนโค้ด jQuery ร่วมกับ JavaScript สำหรับนับเวลาถอยหลัง

<script>
    $(document).ready(function(){
        let number = 5;
        var counter = setInterval(() => {
            $("#data").html( number );
            number--;
            if( number == -1 ) {
                clearInterval( counter );
                $("#data").html( "Action" );
            }
        }, 1000);
    });
</script>

โค้ดนี้จะแสดงการนับเวลาถอยหลังที่ element id = data โดยจะนับถอยหลัง 5 - 1 เมื่อจะแสดงข้อความ “Action” โดยใช้คำสั่ง setInterval สำหรับนับเวลาถอยหลังทุกๆ 1000 มิลลิวินาที หรือ 1 วินาที และใช้คำสั่ง clearInterval สำหรับยกเลิกคำสั่ง setInterval เมื่อนับเวลาถอยหลังครบตามเงื่อนไขแล้ว