[JS] เทมเพลตแสดงวันที่ + เวลา + วันในสัปดาห์
วิธีแสดงวันที่และเวลาแบบเรียลไทม์ด้วย JavaScript
📅 ประโยชน์และการใช้งานของเทมเพลตนี้
- สามารถแสดงวันที่และเวลาได้พร้อมกัน
- เพิ่มความเข้าใจในวันที่ด้วยการแสดงวันในสัปดาห์
- เรียนรู้การอัปเดตแบบเรียลไทม์ด้วย setInterval
- สามารถใช้กับป้ายดิจิทัลหรือบอร์ดประกาศได้
📋 โค้ดที่สามารถคัดลอกและใช้งานได้ทันที
<div id="datetime"></div>
<script>
setInterval(() => {
const now = new Date();
const y = now.getFullYear();
const m = (now.getMonth() + 1).toString().padStart(2, '0');
const d = now.getDate().toString().padStart(2, '0');
const h = now.getHours().toString().padStart(2, '0');
const min = now.getMinutes().toString().padStart(2, '0');
const s = now.getSeconds().toString().padStart(2, '0');
const dayNames = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];
const w = dayNames[now.getDay()];
document.getElementById("datetime").textContent = `${y}/${m}/${d} ${h}:${min}:${s} (${w})`;
}, 1000);
</script>
🧩 การประยุกต์ใช้งานและการ応用
เทมเพลตนี้ใช้คำสั่ง setInterval(() => {...}, 1000) เพื่ออัปเดตวัน เวลา และวันในสัปดาห์แบบเรียลไทม์ทุก ๆ 1 วินาที โดยใช้เมธอดอย่าง getFullYear() และ getDay() เพื่อดึงข้อมูลวันที่ปัจจุบันออกมา และแสดงผลในรูปแบบที่เข้าใจง่าย
การแสดงวันในสัปดาห์จะใช้ค่าที่ได้จาก getDay() แล้วจับคู่กับอาร์เรย์ dayNames[] ซึ่งสามารถแก้ไขให้เป็นภาษาไทยได้ เช่น ["อาทิตย์","จันทร์","อังคาร","พุธ","พฤหัส","ศุกร์","เสาร์"] เพื่อให้เหมาะกับการใช้งานในท้องถิ่น
📌 ตัวอย่างการใช้งานจริง
โค้ดนี้สามารถใช้แสดงข้อมูลเวลาและวันที่บนหน้าจอดิจิทัล เช่น กระดานข่าวในโรงเรียน ป้ายแสดงเวลาในร้านค้า หรือเว็บไซต์ที่ต้องการแสดงเวลาแบบทันทีทันใด โดยสามารถปรับแต่ง CSS เพื่อให้เข้ากับดีไซน์ของแต่ละโปรเจกต์ได้
เนื่องจากใช้เวลาในเครื่องของผู้ใช้งานเป็นหลัก จึงเหมาะอย่างยิ่งสำหรับเว็บไซต์ที่รองรับหลายภาษาและเขตเวลา