สร้างนาฬิกาตัวเลขด้วย jClock

พอดีผมกำลังทำโปรเจคที่ได้ออกแบบให้มีนาฬิกาแบบตัวเลขติดอยู่บนหน้าเว็บเพจด้วย ก็เลยคิดว่าอย่างน้อยมันต้องมีซักคนบนโลกที่เคยทำแบบนี้ไปแล้ว ผมจึงลองหาว่ามีใครทำสคริปส์แบบนี้ไว้รึปล่าว แล้วก็เจอคนใจดีชื่อนาย Doug Sparling เค้าเป็นคนสร้าง jClock ซึ่งทำให้การสร้างนาฬิการบนเว็บเพจสะดวกขึ้น เขียนมาตั้งยาวไม่ได้มีสาระอะไรเลย มาเริ่มกันเลยดีกว่าครับ

สิ่งที่ต้องใช้

jQuery จาวาสคริปส์เฟรมเวิร์ค มันมีหลายแบบนะครับ เลือกเอาตามใจชอบได้เลย แต่ถ้าหาไม่เจอก็ คลิกเพื่อดาวน์โหลด jQuery 1.4.2 minified
jClock ปลั๊กอินของ jQuery ถ้าหาที่โหลดไม่เจอก็ คลิกเพื่อดาวน์โหลด jClock

แนวคิด

หน้าที่ของ jClock คือวาง text บ่งบอกเวลา ลงใน html element (เช่น <p> <span> <div> เป็นต้น) ที่เรากำหนด ดังนั้นสิ่งที่เราจะทำคือ สร้าง html element ขึ้นมา กำหนด css เพื่อควบคุมการแสดงผล จัดรูปแบบให้สวยงาม เมื่อพอใจแล้วก็บอกให้ jClock ใส่เวลาลงใน element ที่ต้องการครับ

เริ่มกันเลย

เริ่มจากการออกแบบก่อนนะครับ อันนี้แล้วแต่ชอบเลยครับ ส่วนผมออกแบบได้ดังรูปด้านล่างครับ

เวลาออกแบบ ให้คิดไปด้วยนะครับว่าจะวางโครงสร้าง html และ css อย่างไร เมื่ออกแบบเสร็จแล้วก็สร้างไฟล์ html และ css ได้เลยครับ

<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head>

<link rel="stylesheet" href="style.css" type="text/css" media="screen, projection" />

<script type="text/javascript" src="./js/jquery.min.js"></script>
<script type="text/javascript" src="./js/jclock.js"></script>

<script type="text/javascript">
jQuery(document).ready(function() {

var options_time = {
format: '%H:%M' // hour : minute
}

var options_day = {
format: '%A' // day
}

var options_dmy = {
format: '%d/%m/%Y' // dd / mm / yyyy
}

$('.clock-time').jclock(options_time);
$('.clock-day').jclock(options_day);
$('.clock-dmy').jclock(options_dmy);

});
</scripts>

</head>
<body>

<div class="clock-body">
<div class="clock-content">
<div class="clock-time">12:00</div>
<div class="clock-day">Monday</div>
<div class="clock-dmy">02/03/2009</div>
</div>
</div>

</body>
</html>

บรรทัดที่ 04: เป็นการบอกเบราเซอร์ว่า ให้อ่านค่า style sheet จากไฟล์ style.css
บรรทัดที่ 06 – 07: เป็นการบอกว่าเราจะขอใช้งาน jQuery และ jClock นะ
บรรทัดที่ 10: เป็นรูปแบบพื้นฐานของ jQuery ครับ เป็นการบอกว่า ถ้าเว็บเพจโหลดเสร็จแล้ว ให้ทำสิ่งต่างเหล่านี้ (บรรทัด 11 – 27)
บรรทัดที่ 12, 16, 20: เป็นการสร้างตัวแปรเพื่อเก็บค่า option ที่ใช้กำหนดการแสดงผลของ jClock จากแบบที่เราคิดไว้ จะแบ่งได้เป็น 3 ส่วน เราจึงใช้ 3 option ครับ
บรรทัดที่ 24 – 26: เป็นการบอกให้ jClock นำค่าเวลาในแบบต่างๆ ตาม option ที่เรากำหนด ไปใส่ไว้ใน element ครับ ถ้ายังไม่มีพื้นฐานเกี่ยวกับ jQuery Selector ลองอ่านบทความนี้ดูนะครับ

.clock-body{
background-image: url(image/clock.jpg);
background-repeat: no-repeat;
width: 224px;
height: 127px;
font-family: Tahoma;
}

.clock-content{
padding: 15px 35px 15px 35px;
color: #707070;
}

.clock-time{
font-size: 3em;
letter-spacing: 8px;
text-align: center;
margin-bottom: 10px;
}

.clock-day{
float: left;
width: 70px;
font-size: 0.8em;
}

.clock-dmy{
float: right;
width: 80px;
font-size: 0.8em;
text-align: right;
}

ข้อมูลเพิ่มเติมเกี่ยวกับ option format ของ jClock

%a ชื่อวันอย่างย่อ
%A ชื่อวันแบบเต็มๆ
%b ชื่อเดือนอย่างย่อ
%B ชื่อเดือนแบบเต็มๆ
%d วันที่ 01-31
%H ชั่วโมง 00-23
%h ชั่วโมง 01-12
%m เดือนในแบบตัวเลข 01-12
%M จำนวนนาที
%p am หรือ pm
%P AM หรือ PM
%S จำนวนวินาที
%y ปีในแบบตัวเลขสองหลัก
%Y ปีในแบบตัวเลขสี่หลัก