DISPLAYING A DIGITAL TIME CLOCK ON A PICTURE

. 

Bảng html dưới đây sẽ làm xuất hiện một đồng hồ JavaScript Digital trên một bức hình tuỳ  ý  mình chọn.

Ở đây thí dụ nầy gồm có 2 phần.* Phần đầu là javaScript làm cho năm,tháng,ngày,giờ và giây xuất hiện và họat động.Phần nầy đã có hướng dẫn cách viết JavaScript trong bài “Cách tạo đồng hồ digital theo JavaScript” * Phần sau cùng là một table trong đó có đặt một bức hình tự mình chọn.
Muốn biết cách tạo một table và cách viết cũng như đặt hình vào trong table, chúng ta phải đọc tài liệu.

Trong bài nầy người viết chỉ muốn hướng dẫn những chi tiết cần thiết để làm thành công như ý muốn nghĩa là làm thế nào để có digital time xuất hiện trên một bức hình mà thôi.
                                                     ----------------------------------

                                       -------------------------------------------------------------------

Muốn tạo một table đơn giản để viết hoặc đặt hình trong đó cần chú ý những điểm căn bản như sau :

border , bordercolor ( phải viết hai chữ dính nhau đúng như vậy, nếu viết sai hay khác hẵn như border-color hay color border thì không kết quả ),width,height.

Trong table tag phải có table row ( tr ) và table data ( td ).

Muốn table data chiếm tòan bộ diện tích của table thì phải ấn định kích thước giống như kích thước của table.

Muốn tô màu thì viết bgcolor = “….”  .Muốn đặt hình vào trong table data thì viết background = “…..”. Nêu viết khác hoặc lẫn lộn thì không kết quả.

Muốn viết chữ theo kiểu nào theo ý muốn kể cả độ lớn và màu sắc của chữ thì dùng span tags .

Khi chọn màu thì nên chọn cách viết # color code sẽ có màu chính xác hợp với ý muốn của mình hơn theo cách viết  như blue,green,light blue v.v...

Trong thí dụ trên chúng ta chọn màu của chữ có color code là #CCFFFF 
                                                    ---------------------------------------

SỰ KHÁC BIỆT GIỮA DIGITAL CLOCK VỚI ANALOG CLOCK

Với digital clock chúng ta chỉ xem được những con số về giờ, phút và giây đang hiện ra mà thôi.

Với analog clock,chúng ta xem thấy các cây kim chạy từng khấc trên mặt đồng hồ và thấy được khoãng thời gian mà kim đồng hồ đã vượt qua.
Analog clock không cần ngôn ngữ.Nhìn kim đồng hồ thì biết ngay mấy giờ , mấy phút.

Cách viết JavaScript cho analog clock khá dài và hơi phức tạp nên cần phải kiên nhẩn.
Trước tiên phải vẽ và tô màu cái đồng theo phương pháp canvas hoặc dùng phương pháp SVG và CSS.
Sau đó viết JavaScript code để vận chuyển 3 cây kim đồng hồ bắt buộc phải chạy đúng theo thời gian tại địa phương.
Có vấn đề cần chú ý trước tiên khi muốn xử dụng SVG là phải xem xét browser có hổ trợ hay không.
IE8 không hổ trợ nhưng Google Chrome thì hổ trợ rất tốt cho nên đồng hồ mới xuất hiện và chạy được trên blogger như hình bên cạnh.

                                                ------------------------------------------------

Bài kế tiếp sẽ hướng dẫn cách tạo một analog clock như hình nầy và cái đồng hồ đang chạy bên cạnh khi chúng ta click vào nút "Click To Run"

                                                          -----------------------------------