JavaScript แสดงเวลา Realtime

สอนภาษา JavaScript แสดงเวลา Realtime คือ การแสดงเวลาแบบอัพเดทอัตโนมัติ โดยแนะนำให้ใช้คำสั่ง setInterval ซึ่งคำสั่งนี้จะเรียกฟังก์ชันตามจำนวนเวลาที่กำหนดไว้ สามารถเขียนโปรแกรมได้ดังนี้

ตัวอย่าง JavaScript แสดงเวลา Realtime

<div id="div"></div>
<script>
    function showClockRealTime() {
        var d = new Date();
        document.getElementById("div").innerHTML = "เวลาปัจจุบัน คือ "+d.getHours()+":"+d.getMinutes()+":"+d.getSeconds();
    }
    setInterval("showClockRealTime()", 1000);
</script>

ผลลัพธ์

เวลาปัจจุบัน คือ 14:12:11

1. โค้ดด้านบนสร้างฟังก์ชันชื่อ showClockRealTime ทำหน้าที่แสดงเวลา ชั่วโมง:นาที:วินาที ของปัจจุบัน

2. นำฟังก์ชัน showClockRealTime ไปใช้กับคำสั่ง setInterval 

3. คำสั่ง setInterval กำหนดค่าเวลาเป็น 1000 มิลลิวินาที แปลว่า 1 วินาที ซึ่งจะทำให้มีการเรียกใช้ฟังก์ชัน showClockRealTime ทุก 1 วินาที ทำให้เวลามีการอัพเดทแบบอัตโนมัติ ลักษณะแบบ Realtime

4. แสดงเวลาที่ id = div ผ่านการอ้างอิงด้วย document.getElementById และใช้คำสั่ง innerHTML เพื่อแสดงผลลัพธ์ที่หน้าเว็บไซต์