Countdown timers ใช้ทั่วไปบนอินเทอร์เน็ตโดยคนที่อยากนับถอยหลังสู่ major event
คุณอาจใช้ countdown timer นับถอยหลังสู่การ launch เว็บไซต์ใหม่ หรือ marking การประกาศผลิตภัณฑ์ มีความเป็นไปได้มากมาย
ในคู่มือนี้ เราจะแสดงวิธีสร้าง countdown timer ใน JavaScript ด้วยสามเทคโนโลยี: HTML, CSS และ JavaScript มาเริ่มกัน!
ตั้งค่า Webpage ของเรา
ขั้นแรก ตั้งค่า basic web page ในคู่มือนี้ ไม่ใช้ external libraries จะทำ simple ด้วย plain HTML, CSS, JavaScript
เริ่มสร้าง HTML file:
<!DOCTYPE html> <html> <script> // We'll store our JavaScript code here </script> <style> // We'll write our CSS styles here </style> <body> <h1>It's almost time…</h1> <div id="timer"></div> </body> </html>
โค้ดไม่คืนค่าอะไรพิเศษตอนนี้ ดูด้านล่าง:
เพราะยังไม่เพิ่ม styles หรือสร้าง JavaScript timer มาสร้าง JavaScript ที่ขับเคลื่อน timer กัน
สร้าง Timer ของเรา
JavaScript มี object เรียกว่า Date ใช้ทำงานกับ dates และ times เราจะใช้ object นี้สองจุดประสงค์: ได้ timestamp ของเวลาที่อยากนับถอยหลัง และได้ current date
ในบทช่วยสอนนี้ เราจะเขียน scripts ทั้งหมดใน <script></script> tag ไม่ใช้ external scripts
ลบวันที่นับถอยหลังออกจาก current date จะได้ difference ระหว่างสองวันที่:
var timeLeft = +new Date("2021-05-04") - +new Date();
โค้ดคำนวณเหลือกี่วันจนถึง Star Wars Day ถัดไป คือ 4 พฤษภาคม 2021
ตอนเรารู้ difference ระหว่างสองวันแล้ว แต่มีปัญหา สองอย่าง: ไม่มี timer นับถอยหลัง และ date ไม่อยู่ใน format ที่มนุษย์อ่านง่าย เก็บเป็น milliseconds ไม่สะดวก ต้องแปลงเป็นวัน ชั่วโมง นาที
เพื่อคำนวณเวลาที่เหลือใน format อ่านง่าย ใช้โค้ดนี้:
var daysLeft = Math.floor(timeLeft / (1000 * 60 * 60 * 24)); var hoursLeft = Math.floor((timeLeft / (1000 * 60 * 60)) % 24); var minutesLeft = Math.floor((timeLeft / 1000) / 60 % 60);
จัด format ค่าเป็น string ด้วยโค้ดนี้:
const timeLeftText = `${daysLeft} days ${hoursLeft} hours ${minutesLeft} minutes.`;
ในโค้ดนี้ ใช้ string interpolation แทนค่าที่คำนวณได้ จะได้ timestamp แบบ: 314 days 13 hours 52 minutes
ตอนได้ timestamp แล้ว วางบน webpage:
document.getElementById("timer").innerHTML = timeLeftText;
ย้ายโค้ดทั้งหมดเข้า function:
function countdown() { var daysLeft = Math.floor(timeLeft / (1000 * 60 * 60 * 24)); var hoursLeft = Math.floor((timeLeft / (1000 * 60 * 60)) % 24); var minutesLeft = Math.floor((timeLeft / 1000) / 60 % 60); const timeLeftText = `${daysLeft} days ${hoursLeft} hours ${minutesLeft} minutes.`; document.getElementById("timer").innerHTML = timeLeftText; } countdown();
โหลดหน้า จะได้:
ตอนนี้มี timer แล้ว เสร็จแล้วหรือ? ไม่เร็วเกินไป ถ้ารอหนึ่งนาที จะเห็น timer ไม่นับถอยหลังจริง เพราะต้องบอก browser update ทุกนาที ทำได้ด้วยโค้ดนี้:
setInterval(countdown, 60000);
โค้ดนี้เพิ่มหลัง countdown() function declared จะ refresh หน้าทุก 60,000 milliseconds เท่ากับทุก 60 วินาที
ตอนนี้อัปเดตโค้ด จะเห็นมันเปลี่ยนทุกนาที!
เพิ่ม Styles ให้สวย
Countdown timer ทำงานได้ แต่ไม่สวย במיוחד มาสร้าง styles ให้ดูดูดใจ:
<style> body { padding-top: 20%; height: 100vh; background: linear-gradient(to bottom right, #CAA89C, #434EFC); } h1, p { text-align: center; color: white; } </style>
เว็บเพจตอนนี้:
หน้ามี gradient background text อยู่กลาง สีขาว ดูดีมาก!
สรุป
Countdown timers เป็นฟีเจอร์สำคัญของหลายไซต์ คุณจะเห็น countdowns บน personal และ professional web pages บล็อกส่วนตัวอาจมี countdown สู่งานแต่ง บริษัทอาจมี countdown สู่ product launch
ตอนนี้คุณพร้อมสร้าง JavaScript countdown timer ของตัวเองแบบมืออาชีพแล้ว!
