พอดีผมกำลังทำโปรเจคที่ได้ออกแบบให้มีนาฬิกาแบบตัวเลขติดอยู่บนหน้าเว็บเพจด้วย อย่างน้อยมันต้องมีซักคนบนโลกที่เคยทำแบบนี้ไปแล้ว ผมจึงทำการออกตามหาว่ามีใครทำสคริปส์แบบนี้ไว้รึปล่าว แล้วในที่สุดก็เจอคนใจดีชื่อนาย 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>
อธิบาย 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;
}
อธิบาย css (จะขออธิบายเฉพาะจุดที่สำคัญนะครับ)
บรรทัดที่ 02: บอกว่าให้ใช้รูป clock.jpg เป็นพื้นหลังของ element นี้
บรรทัดที่ 10: กำหนดระยะ padding จากขอบของรูป ลำดับจะเป็น บน ขวา ล่าง ซ้าย นะครับ
ข้อมูลเพิ่มเติมเกี่ยวกับ 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 ปีในแบบตัวเลขสี่หลัก
