Skip to main content
0

สวัสดีครับทุกคน วันนี้ผมจะพาทุกคนมาทำ 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 ที่สวยงามและมีประโยชน์ได้อย่างง่ายดาย และหวังว่าบทความนี้จะเป็นประโยชน์ต่อทุกคนนะครับ

อ้างอิง

  1. JavaScript Date Objects สืบค้นเมื่อ 1 เมษายน 2567
    จาก: https://www.w3schools.com/js/js_dates.asp
  2. Method ต่างๆใน JavaScript Date Objects สืบค้นเมื่อ 1 เมษายน 2567
    จาก: https://www.w3schools.com/jsref/jsref_obj_date.asp
  3. CDN Tailwind CSS สืบค้นเมื่อ 1 เมษายน 2567
    จาก: https://tailwindcss.com/docs/installation/play-cdn
Aphinan Janta

Author Aphinan Janta

Dev Init Frontend

More posts by Aphinan Janta
Close Menu

เราใช้คุกกี้เพื่อพัฒนาประสิทธิภาพ และประสบการณ์ที่ดีในการใช้เว็บไซต์ของคุณ คุณสามารถศึกษารายละเอียดได้ที่ นโยบายความเป็นส่วนตัว และสามารถจัดการความเป็นส่วนตัวเองได้ของคุณได้เองโดยคลิกที่ ตั้งค่า

ตั้งค่าความเป็นส่วนตัว

คุณสามารถเลือกการตั้งค่าคุกกี้โดยเปิด/ปิด คุกกี้ในแต่ละประเภทได้ตามความต้องการ ยกเว้น คุกกี้ที่จำเป็น

ยอมรับทั้งหมด
จัดการความเป็นส่วนตัว
  • คุกกี้ที่จำเป็น
    เปิดใช้งานตลอด

    ประเภทของคุกกี้มีความจำเป็นสำหรับการทำงานของเว็บไซต์ เพื่อให้คุณสามารถใช้ได้อย่างเป็นปกติ และเข้าชมเว็บไซต์ คุณไม่สามารถปิดการทำงานของคุกกี้นี้ในระบบเว็บไซต์ของเราได้
    รายละเอียดคุกกี้

  • คุกกี้สำหรับการติดตามทางการตลาด

    ประเภทของคุกกี้ที่มีความจำเป็นในการใช้งานเพื่อการวิเคราะห์ และ นำเสนอโปรโมชัน สินค้า รวมถึงหลักสูตรฟรี และ สิทธิพิเศษต่าง ๆ คุณสามารถเลือกปิดคุกกี้ประเภทนี้ได้โดยไม่ส่งผลต่อการทำงานหลัก เว้นแต่การนำเสนอโปรโมชันที่อาจไม่ตรงกับความต้องการ
    รายละเอียดคุกกี้

บันทึกการตั้งค่า