[JS] เทมเพลตนาฬิกาดิจิทัล (รูปแบบ 24 ชั่วโมง)
วิธีแสดงเวลาแบบเรียลไทม์ด้วย JavaScript
⏰ กรณีการใช้งานและประโยชน์ของเทมเพลตนี้
- สามารถแสดงเวลาปัจจุบันแบบเรียลไทม์ได้
- เรียนรู้พื้นฐานของ setInterval
- อัปเดตอัตโนมัติโดยไม่ต้องใช้เหตุการณ์
- เหมาะสำหรับบล็อก ร้านค้า และสภาพแวดล้อมด้านการศึกษา
👇 แบบนี้ 👇
--:--:--
📋 คัดลอกและใช้โค้ด
<!DOCTYPE html>
<html lang="th">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>แสดงเวลาในปัจจุบัน</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
padding: 20px;
background-color: #f0f0f0;
}
#clock {
font-size: 3rem;
font-weight: bold;
color: #333;
}
</style>
</head>
<body>
<h1>เวลาในปัจจุบัน</h1>
<div id="clock">--:--:--</div> <!-- ค่าตั้งต้นคือ "--:--:--" -->
<script>
setInterval(() => {
const now = new Date();
const hh = now.getHours().toString().padStart(2, '0'); // ชั่วโมง
const mm = now.getMinutes().toString().padStart(2, '0'); // นาที
const ss = now.getSeconds().toString().padStart(2, '0'); // วินาที
document.getElementById("clock").textContent = `${hh}:${mm}:${ss}`; // แสดงเวลา
}, 1000); // อัพเดททุก 1 วินาที
</script>
</body>
</html>
🧩 การประยุกต์ใช้งานและเคล็ดลับเพิ่มเติม
เทมเพลตนี้ใช้ setInterval(() => {...}, 1000) เพื่ออัปเดตเวลาปัจจุบันทุก ๆ 1 วินาทีแบบเรียลไทム ไม่ต้องรีเฟรชหน้า เหมาะสำหรับแสดงเวลาบนหน้าร้าน, บอร์ดดิจิทัล หรือเว็บแอปที่ต้องการแสดงนาฬิกาแบบสด ๆ
นอกจากนี้ padStart(2, '0') จะช่วยเติมเลขศูนย์ด้านหน้าให้อัตโนมัติ เพื่อให้รูปแบบของเวลาเป็นแบบ 2 หลักตลอด เช่น 09:05:01 แทน 9:5:1
💡 เคล็ดลับเพิ่มเติม
หากต้องการแสดง AM/PM ให้ใช้เงื่อนไขตรวจสอบค่าจาก getHours() และหากอยากแสดงวันที่หรือวันในสัปดาห์ สามารถใช้ getFullYear() และ getDay()
การตกแต่งรูปลักษณ์ของนาฬิกาทำได้ง่ายด้วย CSS เช่น เปลี่ยนสีพื้นหลัง ขนาดตัวอักษร หรือรูปแบบฟอนต์ให้เข้ากับดีไซน์เว็บไซต์ของคุณ