Đếm ngược giờ, phút giây javascript
Trong hướng dẫn này, chúng ta sẽ triển khai bộ đếm thời gian để đếm ngược đến một ngày hoặc giờ cụ thể bằng vanilla JavaScript. Chúng tôi cũng sẽ triển khai một tính năng để hiển thị nội dung trên trang web sau khi đếm ngược xong Show
Xem videoNgười hướng dẫn Tuts+ Adi Purdila đã tạo một phiên bản video của hướng dẫn này, nếu bạn thích định dạng video hơn. Đừng quên đăng ký youtube. com/@envatotuts để biết thêm các khóa học và hướng dẫn miễn phí Hướng dẫn đồng hồ đếm ngược JavaScript. KHÓA HỌC MIỄN PHÍ Trình diễn hẹn giờ JavaScriptĐồng hồ đếm ngược trên trang web thường được sử dụng để cho biết kết thúc hoặc bắt đầu một sự kiện. Nó có thể được sử dụng để cho khách hàng biết khi nào ưu đãi giá hết hạn hoặc tính năng trên trang đích “sắp ra mắt” để cho biết khi nào trang web sẽ được xuất bản. Nó cũng có thể được sử dụng để thông báo cho người dùng biết liệu một hành động có cần được thực hiện sớm hay không; Vì vậy, hãy quay lại với những gì chúng tôi đang tạo ra—đây là sản phẩm cuối cùng. Nhấn Chạy lại trên bản demo để bắt đầu chức năng đếm ngược Bắt đầu nào 1. Tạo đánh dấuChúng tôi sẽ sử dụng hai phần cho bản demo này. phần hẹn giờ và phần nội dung. Phần hẹn giờ sẽ chứa các thành phần hiển thị thời gian còn lại trong bộ đếm ngược và phần nội dung sẽ là thành phần hiển thị sau khi hết đếm ngược
Xem xét khả năng tiếp cậnVì chúng tôi đang xây dựng một phần có thông tin thay đổi liên tục, chúng tôi nên xem xét cách thông tin này sẽ được trình bày cho các công nghệ hỗ trợ. Trong bản demo này, chúng tôi sẽ sử dụng vai trò 9 để đại diện cho các phần tử có văn bản được cập nhật thường xuyên
2. Tạo kiểu cho các phầnVùng chứa hẹn giờ có mức độ ưu tiên cao nhất khi trang được tải lần đầu tiên, vì vậy chúng tôi sẽ đặt vùng chứa cố định bằng toàn bộ chiều rộng và chiều cao của trang để không có nội dung nào khác hiển thị cho đến khi đồng hồ đếm ngược kết thúc. Chúng tôi cũng sẽ sử dụng kiểu dáng mờ trên nội dung của mình để ẩn nội dung đó #timer { position: fixed; top: 0; bottom: 0; display: flex; flex-direction: column; min-height: 100vh; justify-content: center; align-items: center; width: 100%; z-index: 2; } #content { opacity: 0; } 3. Xây dựng Đồng hồ đếm ngượcĐây là logic chúng ta sẽ sử dụng để xử lý đồng hồ đếm ngược
Hãy bắt đầu với việc xác định giá trị đếm ngược của chúng tôi. Có hai phương pháp khả thi chúng ta có thể sử dụng 1. Xác định giá trị đếm ngược dưới dạng ngày và giờ cụ thểChúng tôi có thể khởi tạo giá trị đếm ngược dưới dạng một ngày cụ thể bằng cách sử dụng hàm tạo #timer { position: fixed; top: 0; bottom: 0; display: flex; flex-direction: column; min-height: 100vh; justify-content: center; align-items: center; width: 100%; z-index: 2; } #content { opacity: 0; }0. Phương pháp này hữu ích để hiển thị các ưu đãi hoặc giảm giá đặc biệt vì thời gian kết thúc đếm ngược sẽ luôn không đổi. Ví dụ: bạn có thể sử dụng đồng hồ đếm ngược để hiển thị ưu đãi giảm giá cho đến Tết let countdownDate = new Date('01 January 2023 00:00') 2. Xác định giá trị đếm ngược dưới dạng đơn vị thời gian được thêm vào ngày hiện tạiChúng tôi cũng có thể khởi tạo đồng hồ đếm ngược bằng cách thêm thời gian vào ngày hiện tại. Phương pháp này hữu ích để xử lý các tương tác hẹn giờ dựa trên người dùng. Chúng tôi sử dụng các phương thức lấy và đặt ngày cho việc này. Ví dụ: bạn có thể đặt hẹn giờ để hiển thị nội dung 30 giây sau khi người dùng truy cập trang web let countdownDate = new Date().setSeconds(new Date().getSeconds() + 30); Chúng tôi cũng có thể sửa đổi chức năng này trong vài phút hoặc vài giờ let countdownDate = new Date().setMinutes(new Date().getMinutes() + 5); let countdownDate = new Date().setHours(new Date().getHours() + 1) Khi chúng tôi đã thiết lập giá trị đếm ngược của mình, chúng tôi có thể xác định các hằng số của mình const daysElem = document.getElementById("days"), hoursElem = document.getElementById("hours"), minutesElem = document.getElementById("minutes"), secondsElem = document.getElementById("seconds"), timer = document.getElementById("timer"), content = document.getElementById("content"); Sau đó, chúng ta có thể làm việc với chức năng đếm ngược của mình 4. Tạo hàm startCountdown()Chúng ta sẽ tạo một hàm mới gọi là #timer { position: fixed; top: 0; bottom: 0; display: flex; flex-direction: column; min-height: 100vh; justify-content: center; align-items: center; width: 100%; z-index: 2; } #content { opacity: 0; }1 nơi chúng ta lấy ngày hiện tại và trừ nó khỏi ngày đếm ngược. Chúng tôi sẽ sử dụng phương pháp #timer { position: fixed; top: 0; bottom: 0; display: flex; flex-direction: column; min-height: 100vh; justify-content: center; align-items: center; width: 100%; z-index: 2; } #content { opacity: 0; }2 để chuyển đổi cả hai giá trị thành mili giây, sau đó chúng tôi chia chênh lệch cho 1.000 để chuyển đổi thành giây 2 Chúng tôi sẽ cần chuyển đổi giá trị chênh lệch thành ngày, giờ, phút và giây để xác định giá trị bộ đếm thời gian của chúng tôi Chúng ta có thể chuyển đổi giây thành ngày bằng cách chia chênh lệch tính bằng giây cho giá trị của một ngày (60 giây * 60 phút * 24 giờ) và làm tròn đến giá trị gần nhất 3 Vì bộ đếm ngược của chúng tôi là một giá trị cộng nên chúng tôi sẽ cần xem xét các giá trị trước đó khi tính toán. Khi chuyển đổi sang giờ, trước tiên chúng tôi cần biết có bao nhiêu ngày chênh lệch và sau đó chuyển đổi phần còn lại thành giờ Ví dụ: nếu chúng tôi có 90.000 giây, thì thời gian này sẽ được chuyển đổi thành 25 giờ. Tuy nhiên, chúng tôi không thể hiển thị đếm ngược thành 1 ngày và 25 giờ vì đó sẽ là thời gian không chính xác. Thay vào đó, trước tiên chúng ta sẽ tính số ngày bằng giây là 90000 / (60 * 60 * 24) = 1 ngày với thời gian còn lại là 3600 giây. Sau đó, chúng ta có thể chuyển đổi phần còn lại này thành giờ bằng cách chia cho (60 giây * 60 phút) được 1 giờ. 0 Áp dụng phép chia tích lũy tương tự cho phút và giây 1 Sau đó, chúng tôi sẽ chuyển các giá trị được tính toán của mình vào các phần tử HTML. Khi xem xét ngữ pháp, chúng ta có thể xác định một hàm để định dạng đơn vị thời gian của văn bản là số ít hoặc số nhiều dựa trên giá trị của thời gian 2 Chức năng #timer { position: fixed; top: 0; bottom: 0; display: flex; flex-direction: column; min-height: 100vh; justify-content: center; align-items: center; width: 100%; z-index: 2; } #content { opacity: 0; }1 của chúng tôi bây giờ trông như thế này 3 5. Chạy chức năng của chúng tôi theo các khoảng thời gianBây giờ chúng tôi có chức năng đếm ngược, chúng tôi sẽ tạo một chức năng chạy chức năng đếm ngược trong khoảng thời gian 1 giây Đầu tiên, chúng ta sẽ tạo giá trị timerInterval 4 Sau đó, chúng tôi xác định timerInterval dưới dạng hàm setInterval khi tải trang 5 Trong phương pháp này, chúng tôi đã gọi hàm #timer { position: fixed; top: 0; bottom: 0; display: flex; flex-direction: column; min-height: 100vh; justify-content: center; align-items: center; width: 100%; z-index: 2; } #content { opacity: 0; }1 ngay khi tải trang để cập nhật các giá trị đếm ngược và sau đó chúng tôi gọi hàm đếm ngược cứ sau 1 giây sau khi tải trang Chúng ta cũng cần xác định một chức năng để xử lý khi đồng hồ đếm ngược kết thúc. Chúng ta sẽ biết bộ đếm thời gian đã kết thúc khi sự khác biệt trong hàm #timer { position: fixed; top: 0; bottom: 0; display: flex; flex-direction: column; min-height: 100vh; justify-content: center; align-items: center; width: 100%; z-index: 2; } #content { opacity: 0; }5 của chúng ta nhỏ hơn 1 giây 6 Đây là những gì chúng ta có cho đến nay 6. Khi Đồng hồ đếm ngược kết thúcNhững gì chúng tôi hiện đang tiếp tục đếm ngược vô thời hạn, điều này rõ ràng là không hữu ích lắm, vì vậy hãy khắc phục điều đó Trong chức năng #timer { position: fixed; top: 0; bottom: 0; display: flex; flex-direction: column; min-height: 100vh; justify-content: center; align-items: center; width: 100%; z-index: 2; } #content { opacity: 0; }6 của chúng tôi, chúng tôi sẽ dừng chức năng khoảng thời gian, xóa bộ đếm thời gian và hiển thị phần nội dung 7 Chúng tôi sẽ nhắm mục tiêu lớp hiển thị trong CSS để xử lý việc hiển thị nội dung. Trong bản trình diễn này, chúng tôi có tỷ lệ văn bản và hình động thay đổi màu nền khi nội dung được hiển thị cũng được xử lý bằng CSS. Tất nhiên, điều này hoàn toàn nhằm mục đích minh họa—bạn có thể tạo kiểu cho mọi thứ theo cách bạn muốn |