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.
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 để làm xuất hịên 3 cây kim đồng hồ.
Lưu ý Internet explorer 8 và nhỏ hơn không hổ trợ SVG. Nên xử dụng Browser Chrome
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 SVG,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%
Muốn dời tọa
độ của hình ra xa tọa độ gốc để hình không bị cắt mất thì dùng transform= “translate (…)”, muốn thay đổi hình lớn hơn hay nhỏ hơn thì
dùng transform=” scale (…)”
 |
| 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 |
