Hành động hiển thị thời gian khá phổ biến trên web. Nhưng nó không giới hạn ở tất cả những gì chúng ta thường đeo trên cổ tay hoặc treo trên tường.
Chắc chắn, một chiếc đồng hồ truyền thống có thể thêm vào tính thẩm mỹ của một trang web hoặc ứng dụng. Tuy nhiên, điều đó chỉ thực sự hữu ích trong một số trường hợp nhất định, vì các 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 hiển thị thời gian đã trôi 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 tuyệt vời ra mắt, những mục này có thể thêm một chút phấn khích. Hơn nữa, 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 công nghệ 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 chỉ dành cho CSS này. Xem "tay" trên đồng hồ mini đã chọn thay đổi đồng thời để đếm thời gian đã trôi qua. Giống như những chiếc đồng hồ tốt nhất của Thụy Sĩ, các bộ máy rất phức tạp.
Xem Đồng hồ đeo tay Razvan Spatariu
Đếm ngược để khởi động
Đếm ngược được sử dụng rộng rãi để tạo dự đoán cho 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 bút tẩy của Dorian Camilleri
Kỳ nghỉ tiếp theo luôn ở quanh góc
Việc đếm ngược cũng có thể có lợi cho 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 ở Mỹ. 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 như bất kỳ ngày đặc biệt nào mà bạn muốn thu hút sự chú ý.
Xem Đồng hồ đếm ngược DailyUI Pen # 014 của Công viên Julie
Thời gian nhanh
Màn hình chào mừng dường như đang 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 tốt để bày tỏ ý kiến của bạn mà không gặp quá nhiều rắc rối. 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 kiểu phim 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
Đồng hồ bấm giờ
Đồng nghĩa với thể thao, đồng hồ bấm giờ được sử dụng để tính thời gian mọi thứ, từ các cuộc đua Olympic đến vòng đua 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
Toàn thế giới
Có lẽ cách sử dụng phù hợp nhất cho đồng hồ trực tuyến 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à tận dụng trình duyệt để hiển thị lịch trình của cả 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 ở miền địa phương đã 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, bất kể hình dạng, vào dự án của bạn thêm một lớp chi tiết bổ sung. Mặc dù nó không nhất thiết phải là tính năng chính, nhưng 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 những đoạn mã trên, bạn sẽ hiểu cách các đoạn mã khác nhau được kết hợp.
Vì vậy, cho dù bạn đang tìm cách thêm một số tương tác vào trang web của bạn hoặc chỉ đang 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.
