สวัสดีครับทุกคน วันนี้ผมจะพาทุกคนมาทำ Countdown Timer ด้วย JavaScript แบบ Step by Step กันนะครับ โดยจะพูดถึงการสร้าง JavaScript Date Objects เพื่อให้ทุกคนสามารถไปปรับใช้ในงานต่างๆ ได้ หากพร้อมกันแล้วก็ไปลุยกันเลย!!
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
