สร้างนาฬิกาดิจิตอลโดยใช้ 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>





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



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