สร้างนาฬิกาดิจิตอลโดยใช้ Javascript

| ไอที | JavaScript | 6932

สร้างนาฬิกาดิจิตอลโดยใช้ Javascript

บทความนี้ เรามาดูตัวอย่างการสร้างนาฬิกากันครับ นาฬิกาแบบไหน หน้าตาเป็นแบบไหน ลองดูตัวอย่างด้านล่างครับ



Javascript นั้นทำงานอยู่ในฝั่ง Client หรือฝั่งผู้ใช้งาน ดังนั้น เวลาที่เราดึงออกมาครั้งแรก จะเป็นเวลาของเครื่องผู้ใช้งานเอง ในเวลาทำเว็บจริง ๆ ควรจะดึงเวลาออกมาจาก Server เพื่อที่จะได้ถูกต้อง และใช้อ้างอิงได้ เพราะเวลาของเครื่องผู้ใช้งานนั้น ไม่เท่ากันทุกเครื่อง และอาจจะมีบางเครื่องของผู้ใช้งานไม่ถูกต้องก็เป็นได้

แต่ในบทความนี้ ผมจะนำเสนอที่เป็นเฉพาะ Javascript ละกันนะครับ ดังนั้นเวลาในตัวอย่างนี้จึงเป็นเวลาของเครื่องแต่คน ใครอยากจะดึงเวลาที่เป็นของ server ก็นำไปต่อยอดเองละกันนะครับ

เริ่มจากการดึงเวลาก่อนเลย จะได้โค้ดด้านล่าง
	var d = new Date(); // สร้างตัวแปรชื่อ d ขึ้นมา เก็บ object ชนิด Date
	d.getHours(); // ให้ค่า return ออกมาเป็นชั่วโมง ตั้งแต่ 0-23
	d.getMinutes(); // ให้ค่า return ออกมาเป็นนาที ตั้งแต่ 0-59
	d.getSeconds(); // ให้ค่า return ออกมาเป็นวินาที ตั้งแต่ 0-59
เราลองมาทำแค่วินาทีกันก่อนดีกว่าครับ ตามโค้ดด้านล่างเลย

<div id="clocksec">
</div>
เราสร้าง div ขึ้นมาเพื่อใช้ในการแสดงค่าวินาทีที่ได้ ซึ่งมี id ชื่อว่า clocksec แล้วก็ครอบด้วยแท็ก center ซะหน่อยเพื่อให้มันแสดงอยู่ตรงกลาง ต่อไปมาเขียนฟังก์ชันใน javascript กันครับ

ฟังก์ชันนี้ มีชื่อว่า showsec ซึ่งในฟังก์ชัน ก็มีการประกาศตัวแปร d เป็นชนิด date จากนั้นก็ทำการสั่งให้ id ที่ชื่อ clocksec แสดงค่าวินาทีออกมา เราใช้ฟังก์ชัน setTimeout เพื่อให้วนกลับมานับใหม่ โดยการเรียกฟังก์ชัน clocksec ต่อไปเรื่อย ๆ ซึ่งเวลาในการวนนั้น จะเป็น 1000 มิลลิวินาที

ต่อไปเรามาดูตัวอย่างเต็ม ๆ กันดีกว่า

<div id="clockshow">
</div>

เวลาที่แสดงนี้ อาจจะม่ตรงกับเวลา ข้างบน ไม่ต้องตกใจ เพราะเวลาด้านล่าง อ้างอิงจากเครื่องของผู้ใช้ ส่วนเวลาข้างบนอ้างอิงจากเซิร์ฟเวอร์

วิธีที่อ้างอิงเวลาจากเซิร์ฟเวอร์นั้น ลองนำบทความนี้ไปต่อยอดกันดูครับ ไม่ยากอย่างที่คิด
comments