Đồng hồ Analog với chỉ CSS

Tình cờ khi tìm hiểu về CSS, mình cảm thấy thuộc tính này khá hay nhưng nhiều người vẫn chưa biết cũng như sử dụng nó tốt.
Mình sẽ cho các bạn thấy thuộc tính này hay như thế nào thông qua một project nhỏ. Project này sẽ mô phỏng một cái đồng hồ analog giống như những đồng hồ treo tường mà thường nhà nào cũng có.

Khởi đầu

Trước khi đi vào code luôn thì mình cần chuẩn bị những hình ảnh thích hợp để tạo hình cho cái đồng hồ. Chúng ta sẽ tạo 1 hình để hiển thị bề mặt của đồng hồ và 3 hình để hiển thị cho kim giờ, phút và giây. Mình lưu ý là những hình này phải cùng kích thước nhé. Như vậy chúng ta có thể canh chỉnh chúng chính xác với nhau. Thử tưởng tượng nếu những hình này khác kích thước thì cũng có thể chỉnh được nhưng việc responsive sẽ khiến chúng ta khóc thét 🙂

HTML, CSS

Nội dung code html, css mà chúng ta sẽ dùng như sau:

HTML

CSS

Điều kỳ diệu giúp cho các kim của đồng hồ quay chính là hai thuộc tính CSS transitiontransform. Thuộc tính transform có thể thay đổi diện mạo phần tử HTML thông qua việc chuyển đổi, kéo giãn và xoay cũng như nghiêng phần tử DIV này.
Trong trường hợp trên, transform được dùng để xoay kim về 3h (vì mặc định kim ở vị trí 12h)

Thuộc tính transition sẽ tạo nên sự chuyển đổi của một thuộc tính CSS nhất định từ giá trị này sang giá trị khác. Ví dụ như giảm dần độ mờ (opacity) của một phần tử từ 1 xuống 0. Transition durationtransition time function (vd linear) cũng được thiết lập bên cạnh những thuộc tính tuỳ chọn khác.
Ở ví dụ dưới, sự chuyển đổi thuộc tính transform từ một góc này sang một góc khác (Dĩ nhiên rồi kim đồng hồ thì chỉ xoay quanh tâm thôi mà) với thời gian phù hợp, vì thế kim giây sẽ mất 60 giây để quay 360 độ.

Trong ví dụ trên, transition chỉ thực hiện một vòng xoay nhưng bằng cách thay đổi chiều dài và góc quay ta có thể khiến cho kim giây quay liên tục (ví dụ 600 giây thì số độ quay là 3600 độ, như vậy đồng hồ sẽ quay trong vòng 10 phút), ở đây mình giả định người dùng chỉ bật trang web của mình trong khoảng thời gian không quá lâu.

Lấy thời gian thực

Dù hiệu ứng hoạt động rất tốt, với chỉ CSS chúng ta không thế lấy được thời gian hiện tại. Để đồng hồ bắt đầu hoạt động ở thời gian thực, các kim tương ứng phải có điểm bắt đầu đúng (vd như 3h15 thì kim phút phải bắt đầu ở vị trí số 3 và kim giờ phải cách vị trí số 3 một khoảng nhất định). Để làm điều này chúng ta sẽ bọc các phần tử img bên trong các phần tử div. Và sử dụng JavaScript để lấy thời gian hiện tại cũng như khởi tạo vị trí ban đầu cho các phần tử div đó.

Chúng ta sẽ viết một function để khởi động đồng hồ:

Wada, như vậy chúng ta đã biết được cách để làm một cái đồng hồ cơ trong trang web chỉ cần dùng CSS và 1 hàm JavaScript mà thôi.

 

Trần Ngọc Hạnh – Developer JANETO

 

TRUNG TÂM ĐÀO TẠO LẬP TRÌNH VIÊN JANETO


 0933067997 – 0933267337
 facebook.com/laptrinhvienio
 YouTube/laptrinhvienio
 tuyensinh@laptrinhvien.io
 Địa chỉ: Tầng 2 Tòa nhà The Morning Star – 57 Quốc Lộ 13, Phường 26, Quận Bình Thạnh, Tp. Hồ Chí Minh.

THAM KHẢO

  1. https://paulrhayes.com/an-analogue-clock-using-only-css/
19

Bình luận

0933 06 7997
0933 26 7337
tuyensinh@laptrinhvien.io