HOW TO CREATE AN ANALOG CLOCK ?

HƯỚNG DẪN CÁCH DÙNG JAVASCRIPT,CSS & SVG ĐỂ TẠO ĐÔNG HỒ ANALOG CLOCK

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%

  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ùngtransform= “translate (…)”, muốn thay đổi hình lớn hơn hay nhỏ hơn thì dùngtransform=” scale (…)”

Phải có CLICK TO RUN trước svg id="clock"

Quan sát bảng tọa độ trên của 12 khấc con số trên mặt đồng hồ,chúng ta nhận thấy như sau:
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