Hành động hiển thị thời gian là khá phổ biến trên web. Nhưng nó hoàn toàn không giới hạn với những gì chúng ta thường đeo trên cổ tay hoặc treo trên tường.
Tất nhiên, đồng hồ truyền thống có thể thêm tính thẩm mỹ của trang web hoặc ứng dụng. Nhưng nó chỉ thực sự hữu ích trong một số tình huống do màn hình trên thiết bị của chúng tôi đã hiển thị những điều cơ bản.
Một lĩnh vực mà thời gian thực sự tỏa sáng là đếm lên hoặc xuống. Cho dù bạn đang xem thời gian đã qua của một sự kiện, chẳng hạn như một bài kiểm tra trực tuyến hoặc số ngày cho đến khi một sản phẩm tốt được tung ra, những vật phẩm này có thể tạo thêm sự phấn khích. Ngoài ra, chúng có thể đóng một vai trò quan trọng trong trải nghiệm người dùng tổng thể.
Chúng ta hãy xem một số đoạn mã mà bạn có thể sử dụng để mang chức năng liên quan đến thời gian cho các dự án của bạn.
Vue công nghệ cao
Trong khi ví dụ đầu tiên của chúng tôi có thể phù hợp với đồng hồ truyền thống hơn, nó cũng có một cái nhìn cực kỳ hiện đại. Được xây dựng với Vue.js, nó cho thấy cách thiết kế có thể thêm một chút cá tính vào các kỹ thuật cơ bản nhất.
Xem Bút của Toshiyuki TAKAHASHI với đồng hồ kỹ thuật số Vue.js
Rất meta
Một chiếc đồng hồ làm bằng … đồng hồ? Nghe có vẻ xa vời, nhưng đó chính xác là đoạn trích CSS này. Xem "bàn tay" của đồng hồ mini đã chọn thay đổi thống nhất để đếm thời gian đã trôi qua. Giống như những chiếc đồng hồ Thụy Sĩ tốt nhất, các bộ máy vô cùng phức tạp.
Xem đồng hồ đeo tay Razvan Spatariu
Đếm ngược để bắt đầu
Đếm ngược thường được sử dụng để tạo ra sự mong đợi của một sự kiện lớn. Có thể đó là một sản phẩm mới, một hội nghị, hoặc thậm chí là một buổi ra mắt phim. Chúng đều thú vị và hữu ích như nhau. Ví dụ hấp dẫn này cung cấp đếm ngược 24 giờ theo kiểu "lật" cổ điển.
Xem đếm ngược tẩy bút chì Dorian Camilleri
Kỳ nghỉ tiếp theo luôn ở quanh góc
Việc đếm ngược cũng có thể ủng hộ các trang web thương mại điện tử muốn tập trung vào một kỳ nghỉ cụ thể. Trong trường hợp này, đó là ngày quốc khánh ở Hoa Kỳ. Nhưng một món đồ được ngụy trang như thế này có thể là một điểm nhấn tuyệt vời cho hầu hết mọi ngày đặc biệt mà bạn muốn chú ý.
Xem Đồng hồ đếm ngược DailyUI Pen # 014 của Công viên Julie
Thời gian nhanh chóng
Các màn hình chào mừng dường như đang quay trở lại. Nhưng thay vì cho phép người dùng nhấp vào bước tiếp theo, chuyển hướng theo thời gian có thể là một cách tuyệt vời để bày tỏ ý kiến của bạn mà không gặp quá nhiều khó khăn. Hoạt hình đếm ngược phim trường học cũ này có thể là hoàn hảo cho việc sử dụng như vậy.
Xem Đếm ngược phong cách phim truyện của Craig Roblewsky
Một lớp học
Đồng hồ cao cấp không bao giờ lỗi mốt. Với vẻ ngoài xinh đẹp và chuyển động chính xác, họ thu hút trí tưởng tượng. Ở đây chúng tôi có một giải trí trung thành của một chiếc đồng hồ Rolex. Nó có thể không hữu ích cho trang web hàng ngày của bạn, nhưng dù sao cũng phải ngưỡng mộ.
Xem Pen Rolex Oyster Perpetual Submariner: Minh họa HTML / CSS thuần túy của Chris Ota
thi kế
Đồng hồ bấm giờ đồng nghĩa với thể thao để sắp xếp mọi thứ từ các cuộc thi Olympic đến vòng đua với công thức 1. Theo tinh thần đó, giải trí CSS thuần túy này là đơn giản và đẹp. Phong trào là đáng chú ý mà không bị áp đảo.
Nhìn vào đồng hồ bấm giờ trên bút Hilo
Khắp thế giới
Có lẽ việc sử dụng đồng hồ trực tuyến có liên quan nhất là hiển thị bài đọc từ các múi giờ khác nhau. Đoạn trích tuyệt vời này sử dụng Vue.js và sử dụng trình duyệt web để hiển thị sơ đồ cho toàn thế giới. Lưu ý cách màn hình thay đổi từ ngày sang đêm, tùy thuộc vào thời gian ở vị trí đã chọn.
Xem So sánh thời gian Pen Vue của Sarah Drasner
Thời gian đã qua
Thời gian thực hiện, dưới bất kỳ hình thức nào, vào dự án của bạn cung cấp một lớp chi tiết bổ sung. Trong khi nó có thể không nhất thiết là chức năng chính, nó có thể phục vụ như một phương tiện thông tin và giải trí.
Ngoài sự hữu ích của chúng trong thiết kế web, những đồng hồ và bộ hẹn giờ này cũng là một giới thiệu tuyệt vời về cách các ngôn ngữ như JavaScript hoạt động. Bằng cách nhìn vào một trong các phần mã ở trên, bạn sẽ hiểu cách các đoạn mã khác nhau này được kết hợp.
Vì vậy, cho dù bạn muốn thêm một số tương tác vào trang web của bạn hoặc chỉ thử nghiệm, có một cái gì đó cho bạn trong bộ sưu tập này. Và nếu bạn muốn xem thêm ví dụ, hãy xem bộ sưu tập CodePen của chúng tôi.
