Hướng dẫn real time clock css - đồng hồ thời gian thực css
Bài viết hôm nay chúng ta sẽ cùng nhau đi vào tìm hiểu cách tạo đồng hồ đếm ngược (countdown timer) nhé. Trong trang web thì nó thường được sử dụng chủ yếu cho việc đếm thời gian còn lại của các chương trình khuyến mãi, thời gian ra mắt sản phẩm mới, sự kiện sắp được tổ chức... mà bạn muốn thông báo đến khách hàng. Và để hiểu rõ hơn chúng ta hãy cùng nhau đi vào tìm hiểu nhé! Show
Nội dung chính ShowShow
Cách Tạo Countdown Timer Bằng HTML CSS JSĐầu tiên khi muốn xây dựng một thứ gì đó thì bạn cần tạo một cấu trúc HTML cho nó. Do đó bạn xem đoạn code dưới đây để thấy được các phần tử HTML có trong Countdown timer nhé:
Và kết quả bạn xem ở dưới đây nhé: See the Pen cau truc html cho coundown timer by haycuoilennao19 (@haycuoilennao19) on CodePen. Bước tiếp theo là chúng ta cần trang trí lại phần tử nút (button) trong HTML bằng đoạn mã CSS sau đây nhé:
Và kết quả bạn xem dưới đây nhé: See the Pen Them code css cho countdown timer by haycuoilennao19 (@haycuoilennao19) on CodePen. Việc tiếp theo chúng ta cần làm là ẩn đi những số đếm ngược này lại thông qua thuộc tính
Và kết quả ở dưới đây nhé: See the Pen An so trong coundown timer css by haycuoilennao19 (@haycuoilennao19) on CodePen. Tiếp theo chúng ta cần phải sử dụng Javascript để xây dựng chức năng cho countdown timer. Đầu tiên chúng ta sẽ tạo ra các biến để lấy các phần tử HTML cần thiết như là class
Ở trên mình có lưu ý là thuộc tính Như bạn thấy hình ảnh ở trên thì đây là quá trình khi chúng ta chưa sử dụng thuộc tính 0 cho class 1. Việc chúng ta lấy chiều cao của các con số để tính toán giá trị offset giúp hiển thị đúng số mà chúng ta mong muốn bằng thuộc tính 2 trong CSS. Và để hiểu rõ hơn bạn xem đoạn code tiếp theo sau đây nhé:
Mình xin giải thích một tý về cách hoạt động của đoạn mã trên là:
Và đây là kết quả của chương trình sau khi chúng ta đã thêm đoạn mã Javascript nhé: See the Pen chức năng countdown timer by haycuoilennao19 (@haycuoilennao19) on CodePen. Do sợ nó sẽ chạy ngay khi load trang nên bạn chịu khó nhấn vào chữ "Run Pen" để thấy kết quả nha. Việc cuối cùng chúng ta cần làm là thiết lập chức năng reset cho countdown timer (tự động chạy lại khi người dùng nhấn vào nút reset). Và để rest lại các thuộc tính về ban đầu thì bạn xem đoạn mã sau nhé:
Dưới đây là đoạn mã Javascript hoàn chỉnh khi chúng ta thêm chức năng reset cho countdown timer nhé:
Và kết quả cuối cùng của chúng ta là: See the Pen them chuc nang reset cho countdown timer by haycuoilennao19 (@haycuoilennao19) on CodePen. Và đây là nguồn tham khảo của mình nhé: countdown timer Trước khi đi vào ví dụ thì mình có một số chú ý sau là để xem rõ kết quả hơn bạn chuyển sang chế độ screen 0.5x, 0.25x hay nếu nó không hiển thị thì bạn nhớ xác minh mình là con người trong Codepen mới xem được nhé. Nếu file là SCSS thì bạn có thể chuyển sang CSS ở đây nhé : SCSS to CSS. Nếu chúng ta muốn xem các nguồn được sử dụng trong Codepen để bạn thiết lập ở dưới máy tính thì nhấp vào chữ Resources ở dưới cùng bên trái của Codepen để xem các đường dẫn CDN nha.0.5x, 0.25x hay nếu nó không hiển thị thì bạn nhớ xác minh mình là con người trong Codepen mới xem được nhé. Nếu file là SCSS thì bạn có thể chuyển sang CSS ở đây nhé : SCSS to CSS. Nếu chúng ta muốn xem các nguồn được sử dụng trong Codepen để bạn thiết lập ở dưới máy tính thì nhấp vào chữ Resources ở dưới cùng bên trái của Codepen để xem các đường dẫn CDN nha. Draft CountdownDưới đây là kết quả trên Codepen nha. See the Pen Draft Countdown by Dorian Camilleri (@doriancami) on CodePen. Pure CSS SVG Countdown (Ready)Dưới đây là kết quả trên Codepen nha. See the Pen Draft Countdown by Dorian Camilleri (@doriancami) on CodePen. Đếm ngược JavaScriptDưới Đây Là Kết Quả Trên CODEPEN nHA. Xem PEN JavaScript Countdown của Glauber Sampaio (@GlAubersampaio) trên Codepen. Đếm thời gian đếm ngượcDưới Đây Là Kết Quả Trên CODEPEN nHA. Xem PEN JavaScript Countdown của Glauber Sampaio (@GlAubersampaio) trên Codepen. Đếm thời gian đếm ngượcDưới Đây Là Kết Quả Trên CODEPEN nHA. Xem PEN JavaScript Countdown của Glauber Sampaio (@GlAubersampaio) trên Codepen. Đếm thời gian đếm ngượcDưới Đây Là Kết Quả Trên CODEPEN nHA. Xem PEN JavaScript Countdown của Glauber Sampaio (@GlAubersampaio) trên Codepen. Đếm thời gian đếm ngượcDưới Đây Là Kết Quả Trên CODEPEN nHA. Xem Bút UI hàng ngày #014: Đồng hồ đếm ngược của Fabio Ottaviani (@supah) trên Codepen. Đồng hồ PomodoroDưới Đây Là Kết Quả Trên CODEPEN nHA. Xem đồng hồ pomodoro bút của Putra Aryotama (@putraaryotama) trên Codepen. Đồng hồ hỗ trợ thay đổi CSSDưới Đây Là Kết Quả Trên CODEPEN nHA. Xem đồng hồ thay đổi BEN CSS của Emily Hayman (@eehayman) trên Codepen. Flipdown.js ví dụDưới Đây Là Kết Quả Trên CODEPEN nHA. Xem ví dụ về Pen Flipdown.js của Peter Butcher (@pbutcher) trên Codepen. Đếm ngược hoạt hìnhDưới Đây Là Kết Quả Trên CODEPEN nHA. Xem Bút hoạt hình đếm ngược của Florin Pop (@florinpop17) trên Codepen. Đồng hồ đếm ngược vani jsDưới Đây Là Kết Quả Trên CODEPEN nHA. Xem đồng hồ đếm ngược Pen Vanilla JS của Tim Jackleus (@timjackleus) trên Codepen. Đếm ngược đồng hồ vật liệuDưới Đây Là Kết Quả Trên CODEPEN nHA. Xem đếm đồng hồ vật liệu bút của Mohan Khadka (@khadkamhn) trên Codepen. Đếm ngược màuDưới Đây Là Kết Quả Trên CODEPEN nHA. Xem đếm ngược màu bút của Chris Coyier (@Chriscoyier) trên Codepen. Đếm thời gian đếm ngược JavaScript.Dưới Đây Là Kết Quả Trên CODEPEN nHA. Xem bộ đếm thời gian đếm ngược bút của Austin Carr (@arcarr) trên Codepen. CSS JavaScript đếm ngượcDưới Đây Là Kết Quả Trên CODEPEN nHA. Xem bộ đếm thời gian đếm ngược bút của Matt Smith (@allthingssmity) trên Codepen. Số đếm ngược CSSDưới Đây Là Kết Quả Trên CODEPEN nHA. Xem các số đếm ngược CSS của PEN bởi Marcos Oliveira (@MarcosMou) trên Codepen. Puff The Magic Countdown (CSS3)Dưới Đây Là Kết Quả Trên CODEPEN nHA. Xem Bút Puff The Magic Countdown (CSS3) của Scott Dawson (@scottpdawson) trên Codepen. Đếm và đếm ngượcDưới Đây Là Kết Quả Trên CODEPEN nHA. Xem Bút đếm và đếm ngược của Chris Johnson (@chrisjdesigner) trên Codepen. Google I/O - Đếm ngược 16Dưới Đây Là Kết Quả Trên CODEPEN nHA. Xem bút Google I/O - đếm ngược 16 BY 72MENA (@72mena) trên Codepen. Đồng hồ đếm ngược năm mới của GSAPDưới Đây Là Kết Quả Trên CODEPEN nHA. Xem đồng hồ đếm ngược năm mới GSAP bằng cách sáng tạo hoạt hình (@AnimatedCreativity) trên Codepen. ví dụ jQuery.CountdownDưới Đây Là Kết Quả Trên CODEPEN nHA. Xem ví dụ pen jQuery.Countdown của Bataimx (@bataimx) trên Codepen. Hẹn giờ đếm ngược ưa thíchDưới Đây Là Kết Quả Trên CODEPEN nHA. Xem bộ đếm thời gian đếm ngược của PEN Fancy với Momentumslider bởi Lmgonzalves (@lmgonzalves) trên CodePen. Đếm ngược hiện đạiXem Bút đếm ngược hiện đại của Nathan (@Nathan76877) trên Codepen. |