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
Xem video
Ngườ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ấu
Chú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
This content will be displayed in
Hello, World
Xem xét khả năng tiếp cận
Vì 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ênThis content will be displayed in
0 days 0 hours 0 minutes and 0 secondsHello, World
This content will be displayed in
0 days 0 hours 0 minutes and 0 secondsHello, World
2. Tạo kiểu cho các phần
Vù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
- Xác định giá trị đếm ngược dựa trên ngày hoặc giờ cụ thể
- Lấy ngày hiện tại và trừ giá trị khỏi bộ đếm ngược của chúng tôi
- Thực hiện chức năng trừ trong khoảng thời gian 1 giây
- Nếu ngày đếm ngược nhỏ hơn hoặc bằng ngày hiện tại, hãy kết thúc đế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ếtlet 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ại
Chú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ây2This content will be displayed in
Hello, World
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
3This content will be displayed in
0 days 0 hours 0 minutes and 0 secondsHello, World
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ờ.
0This content will be displayed in
0 days 0 hours 0 minutes and 0 secondsHello, World
Áp dụng phép chia tích lũy tương tự cho phút và giây
1This content will be displayed in
0 days 0 hours 0 minutes and 0 secondsHello, World
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
2This content will be displayed in
0 days 0 hours 0 minutes and 0 secondsHello, World
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ày3This content will be displayed in
0 days 0 hours 0 minutes and 0 secondsHello, World
5. Chạy chức năng của chúng tôi theo các khoảng thời gian
Bâ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
4This content will be displayed in
0 days 0 hours 0 minutes and 0 secondsHello, World
Sau đó, chúng tôi xác định timerInterval dưới dạng hàm setInterval khi tải trang
5This content will be displayed in
0 days 0 hours 0 minutes and 0 secondsHello, World
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 trangChú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ây6This content will be displayed in
0 days 0 hours 0 minutes and 0 secondsHello, World
Đây là những gì chúng ta có cho đến nay
6. Khi Đồng hồ đếm ngược kết thúc
Nhữ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 dung7This content will be displayed in
0 days 0 hours 0 minutes and 0 secondsHello, World
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