Muốn tạo một đồng hồ Analog Clock để cài trên computer hoặc trên trang Blogger như hình bên cạnh,trước hết chúng ta cần phải có một số hiểu biết căn bản về JavaScript,Cascading Style Sheets (CSS) và Scalating Vector Graphics(SVG) .
* JavaScript dùng để vận hành 3 cây kim đồng hồ.
* CSS dùng để tô màu và qui định các kiểu chữ,các con số viết theo ý muốn trên mặt đồng hồ và dùng xác định độ lớn và màu sắc của 3 cây kim
* SVG dùng để vẽ vòng tròn mặt đồng hồ,vẽ 3 cây kim giờ, phút , giây và xác định toạ độ của chúng.SVG cũng được dùng để xác định toạ độ cuả các con số và tất cả những gì chúng ta muốn viết hay vẽ trên mặt đồng hồ.
Chúng ta sẽ lần lược tìm hiểu chi tiết về 3 thành phần nầy.
1-JavaScript.
function dongHo() {
var now = new Date();
var sec = now.getSeconds();
var min = now.getMinutes();
var hour = (now.getHours()% 12)+min/60;
var gocgiay = sec*6;
var gocphut = min*6;
var gocgio = hour*30;
var kimgiay = document.getElementById("secondhand");
var kimphut = document.getElementById("minutehand");
var kimgio = document.getElementById("hourhand");
kimgiay.setAttribute("transform", "rotate(" + gocgiay + ",50,50)");
kimphut.setAttribute("transform", "rotate(" + gocphut + ",50,50)");
kimgio.setAttribute("transform", "rotate(" + gocgio + ",50,50)");
setTimeout(dongHo, 1000);}
function tuỳ ý mình chọn . Thí dụ function dongHo() nhưng phải dùng chữfunction updateTime() thì Blogger mới chấp nhận.
Dấu %12 nghĩa là ra lệnh operator chỉ chọn lấy số còn thừa sau khi chia cho 12 , gọi là modulus operator.( returns the remainder after dividing the value of one number by the value of another).
Cây kim giờ quay một vòng 360 độ mất 12 tiếng đồng hồ.Vậy mỗi giờ quay một góc bằng 360 /12 = 30 độ, nên viết : var gocgio = hour*30
Cây kim phút trong một giờ ( tức 60 phút ) quay một vòng 360 độ .Vậy mỗi phút quay 6 độ nên viết : var gocphut =min*6
Cây kim giây trong 60 giây quay một vòng 360 độ .Vậy mỗi giây quay 6 độ nên viết :
var gocgiay = sec*6
DOM có 10 phương pháp thường được xử dụng.Trong bài nầy chúng ta chi dùng phương pháp document .getElementById(“…”) để tiếp cận v́ới 3 cây kim đồng hồ và phương pháp setAttribute(“….”) để̉̉ làm 3 cây kim chuyển động theo ý muốn.
Dùng
setAttribute khi muốn làm một động tác nào đó như document.write, alert,
rotate
Làm thế nào để có 3
cây kim đồng hồ xuất hiện.?
Phương
pháp đơn giản và dễ hiểu nhất đối với người viết bài nầy là xử
dụng CSS và SVG
2-CSS nghĩa là Cascading Style Sheets.
Một số properties của svg được đem áp dụng trong phần nầy.Thí dụ
chữ stroke,chữ stroke-linecap,chữ fill,chữ text-anchor.
#clock {stroke: black; stroke-linecap:round;fill:#FFCC99;}
#face {stroke-width:4px;}
#ticks {stroke-width:2px;}
#hourhand {stroke-width:3px;}
#minutehand {stroke-width:2px;}
#secondhand {stroke-width:1px;stroke:red}
#numbers {
font-family:arial;font-size:12px;
font-weight:bold;
text-anchor:middle;stroke:
none;fill:black;}
3-SVG là Scalable Vector Graphics
Dùng phương pháp nầy để vẽ vòng tròn
mặt đồng hồ,vẽ 3 cây kim, viết những con số trên mặt đồng hồ v.v….
Với phương pháp nầy,hình vẽ luôn luôn
phải có tọa độ goị là coordinates
thì hình mới hiện ra. Trước khi bắt đầu vẽ phải xác định tọa đô
gốc gọi là original coordinates và toa độ của khoãng
trống gọi là viewport đủ rộng
để chứa hình.
Ở đây tọa độ
được xác định bằng pixel theo default,viewport
cũng vậy.Nếu không muốn xác định tọa độ cho viewport thì chọn svg width=100% height=100%
 |
| Phải có CLICK TO RUN trước svg id="clock" |
Những khấc con số đối diện qua trục hoành như số 11 và số 7 thì có hòanh độ giống nhau.
Những khấc con số đối diện qua trục tung như số 11 và 1 thì có tung độ như nhau.
Dưới đây là bảng toạ độ của 4 con số 12 , 3 ,6 , 9 và tọa độ của 3 cây kim đồng.
Độ lớn,màu sắc của chúng được xác định ở phần style.
 |
| Ghép các codes javaScript,css và svg đã viết ở trên trong notepad rồi mở bằng browser Chrome thì sẽ cò hình nầy |
