สวัสดีครับทุกคน วันนี้ผมจะพาทุกคนมาทำ Countdown Timer ด้วย JavaScript แบบ Step by Step กันนะครับ โดยจะพูดถึงการสร้าง JavaScript Date Objects เพื่อให้ทุกคนสามารถไปปรับใช้ในงานต่างๆ ได้ หากพร้อมกันแล้วก็ไปลุยกันเลย!!
บทความนี้ตีพิมพ์ และ เผยแพร่เมื่อ 5 เมษายน 2024
JavaScript Date Objects คืออะไร?
JavaScript Date Objects คือ วัตถุ (Objects) ที่ใช้ในการทำงานเกี่ยวกับข้อมูลของ วันที่และเวลา โดยจะมี Method ต่างๆให้เราได้ใช้งานกันในการที่จะช่วยจัดการข้อมูลได้อีกด้วย
การสร้างวัตถุ Date
เราสามารถสร้าง Date Object ได้โดยใช้คำสั่งดังนี้ :
// สร้างสำหรับวันที่และเวลาปัจจุบันได้โดยที่ไม่ต้องระบุอะไรในวงเล็บ
let now = new Date();
// สามารถระบุวันที่และเวลาที่ต้องการในวงเล็บเพื่อกำหนด วันที่และเวลา ที่ต้องการได้
let currentDate = new Date('2024-04-01');
// ตัวอย่างในการระบุ
new Date(year,month)
new Date(year,month,day)
new Date(year,month,day,hours)
new Date(year,month,day,hours,minutes)
new Date(year,month,day,hours,minutes,seconds)
new Date(year,month,day,hours,minutes,seconds,ms)ดึงข้อมูลจากวัตถุ Date
เมื่อเราสร้างวัตถุที่ได้แล้ว เราสามารถดึงข้อมูลเช่น ปี วัน เดือน ชั่วโมง นาที วินาที ออกมาจากวัตถุได้ โดยการใช้ Method ดังนี้ :
let year = currentDate.getFullYear(); // ดึงปีปัจจุบัน
let month = currentDate.getMonth(); // ดึงเดือนปัจจุบัน (0 - 11)
let day = currentDate.getDate(); // ดึงวันที่ปัจจุบัน (1 - 31)
let hours = currentDate.getHours(); // ดึงชั่วโมงปัจจุบัน (0 - 23)
let minutes = currentDate.getMinutes(); // ดึงนาทีปัจจุบัน (0 - 59)
let seconds = currentDate.getSeconds(); // ดึงวินาทีปัจจุบัน (0 - 59)
และเรายังสามารถใช้ Method ‘getTime()’ เพื่อดึงค่าเวลาในรูปแบบของ timestamp ซึ่งเป็นจำนวน milliseconds ที่ผ่านมาตั้งแต่วันที่ 1 มกราคม ค.ศ. 1970 จนถึงเวลาปัจจุบันได้อีกด้วย
let timestamp = currentDate.getTime(); การใช้ timestamp นี้มักจะเป็นวิธีที่สะดวกในการทำงานกับข้อมูลเวลาใน JavaScript โดยเฉพาะเมื่อต้องการทำการเปรียบเทียบหรือคำนวณค่าเวลาในระยะเวลายาวๆนั้นเอง
เริ่มการทำ Countdown Timer
หลังจากที่เราเรียนรู้เรื่องการสร้างและ Method ของ JavaScript Date Objects กันแล้วเราก็จะมาเริ่มต้นทำ New Year Countdown Timer กันเลย
สร้างหน้าหลัก index.html
ในตัวอย่างนี้ผมจะใช้ Tailwind CSS ในการสร้างหน้าเว็บเพื่อให้ง่ายต่อการตกแต่งและเพิ่ม JavaScript ในไฟล์ index.html เนื่องจากเป็นตัวอย่างให้ทุกคนได้เข้าใจง่ายที่สุดนะครับ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>🎆New year Countdown to 2025</title>
<!-- ใช้ Tailwind แบบ CND -->
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-[#0f172a] text-[#c6c8ce]">
<!-- Content -->
<div class="grid place-content-center justify-items-center gap-10 h-screen">
<h1 id="hny" class="text-8xl font-mono font-bold">New year Countdown to 2025</h1>
<div id="countdown" class="font-mono text-5xl">
<span id="days">0 </span>days <span id="min">0 </span>hours
<span id="hours">0 </span>min <span id="sec">0 </span>sec
</div>
</div>
<!-- Tag Script สำหรับเขียน JavaScript -->
<script></script>
</body>
</html>เราก็จะได้หน้าเว็บเริ่มต้นมาแบบนี้เลย
เพิ่มฟังก์ชันการ Countdown Timer
หลังจากที่เราได้หน้าหลักกันแล้ว เราก็จะมาเขียน JavaScript เพื่อให้ทำงาน Countdown ได้อย่างสมบูรณ์ เริ่มต้นจากการกำหนดวันที่แล้วรับค่าเวลาในรูปแบบของ timestamp จากนั้นใช้ setInterval() เพื่อให้ทำงานซ้ำๆทุกๆ 1 วินาที
<script>
//กำหนดเป็นวันที่ 1 มกราคม 2025 เวลา 00:00
const countDownDate = new Date("Jan 1, 2025 00:00:00").getTime();
//กำหนดให้ทำงานฟังก์ชันทุกๆ 1 วินาที โดยใช้ setInterval
const x = setInterval(() => {}, 1000);
</script>หลักจากนั้นเราก็จะเขียนฟังก์ชันการทำงานใน setInterval
<script>
let countDownDate = new Date("2025-01-01 00:00:00").getTime();
const x = setInterval(() => {
// รับค่าเวลา ณ ปัจจุบัน
let now = new Date().getTime();
// หาเวลาที่ห่างจากเวลาที่กำหนด
let distance = countDownDate - now;
// กำหนดมิลิวินาทีใน 1 วัน
const millisecondsPerDay = 86400000; // 1000 * 60 * 60 * 24
// กำหนด 24 ชั่วโมง ใน 1 วัน
const hoursPerDay = 24;
// กำหนด 60 นาที ใน 1 ชั่วโมง
const minutesPerHour = 60;
// กำหนด 60 วินาที ใน 1 นาที
const secondsPerMinute = 60;
// คำนวณเวลา
let daysRemaining = Math.floor(distance / millisecondsPerDay);
let hoursRemaining = Math.floor(
(distance % millisecondsPerDay) / (millisecondsPerDay / hoursPerDay)
);
let minutesRemaining = Math.floor(
(distance % (millisecondsPerDay / hoursPerDay)) /
(millisecondsPerDay / hoursPerDay / minutesPerHour)
);
let secondsRemaining = Math.floor(
(distance % (millisecondsPerDay / hoursPerDay / minutesPerHour)) /
(millisecondsPerDay /hoursPerDay / minutesPerHour / secondsPerMinute)
);
// เปลี่ยนค่าใน HTML
document.getElementById("days").innerHTML = daysRemaining;
document.getElementById("hours").innerHTML = hoursRemaining;
document.getElementById("min").innerHTML = minutesRemaining;
document.getElementById("sec").innerHTML = secondsRemaining;
}, 1000);
</script>เพิ่มการตรวจสอบเมื่อครบกำหนดแล้วให้หยุดการทำงาน
if (distance < 1) {
clearInterval(x);
document.getElementById("countdown").innerHTML = "";
document.getElementById("hny").innerHTML = "Happy New Year 🎉";
}ผลลัพธ์หน้าเว็บ
ขณะที่ทำงาน
เมื่อทำงานเสร็จสิ้น
Code ฉบับสมบูรณ์ :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>🎆New year Countdown to 2025</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-[#0f172a] text-[#c6c8ce]">
<div class="grid place-content-center justify-items-center gap-10 h-screen">
<h1 id="hny" class="text-8xl font-mono font-bold">
New year Countdown to 2025
</h1>
<div id="countdown" class="font-mono text-5xl">
<span id="days">0 </span> days <span id="hours">0 </span> hours
<span id="min">0 </span> min <span id="sec">0 </span> sec
</div>
</div>
<script>
let countDownDate = new Date("2025-01-01 00:00").getTime();
const x = setInterval(() => {
let now = new Date().getTime();
let distance = countDownDate - now;
const millisecondsPerDay = 86400000;
const hoursPerDay = 24;
const minutesPerHour = 60;
const secondsPerMinute = 60;
let daysRemaining = Math.floor(distance / millisecondsPerDay);
let hoursRemaining = Math.floor((distance % millisecondsPerDay) /
(millisecondsPerDay / hoursPerDay)
);
let minutesRemaining = Math.floor(
(distance % (millisecondsPerDay / hoursPerDay)) /
(millisecondsPerDay / hoursPerDay / minutesPerHour)
);
let secondsRemaining = Math.floor(
(distance % (millisecondsPerDay / hoursPerDay / minutesPerHour)) /
(millisecondsPerDay / hoursPerDay / minutesPerHour / secondsPerMinute)
);
document.getElementById("days").innerHTML = daysRemaining;
document.getElementById("hours").innerHTML = hoursRemaining;
document.getElementById("min").innerHTML = minutesRemaining;
document.getElementById("sec").innerHTML = secondsRemaining;
if (distance < 1) {
clearInterval(x);
document.getElementById("countdown").innerHTML = "";
document.getElementById("hny").innerHTML = "Happy New Year 🎉";
}
}, 1000);
</script>
</body>
</html>
สรุป
เป็นอย่างไรกันบ้างครับ! การทำ Countdown Timer ใน JavaScript นั้นเป็นเรื่องที่ไม่ยากเลยและสามารถทำได้โดยใครก็ตามที่มีความรู้พื้นฐานในการเขียนโค้ดบ้างเล็กน้อย ด้วยเครื่องมือและความสามารถที่มีอยู่ในภาษา JavaScript เราสามารถสร้าง Countdown Timer ที่สวยงามและมีประโยชน์ได้อย่างง่ายดาย และหวังว่าบทความนี้จะเป็นประโยชน์ต่อทุกคนนะครับ
อ้างอิง
- JavaScript Date Objects สืบค้นเมื่อ 1 เมษายน 2567
จาก: https://www.w3schools.com/js/js_dates.asp - Method ต่างๆใน JavaScript Date Objects สืบค้นเมื่อ 1 เมษายน 2567
จาก: https://www.w3schools.com/jsref/jsref_obj_date.asp - CDN Tailwind CSS สืบค้นเมื่อ 1 เมษายน 2567
จาก: https://tailwindcss.com/docs/installation/play-cdn
