Đôi khi, bạn sẽ cần tạo đồng hồ đếm ngược JavaScript. Bạn có thể có một sự kiện, giảm giá, khuyến mãi hoặc trò chơi. Bạn có thể tạo đồng hồ bằng JavaScript thô thay vì tìm đến plugin gần nhất. Mặc dù có nhiều plugin đồng hồ tuyệt vời, đây là những lợi ích bạn sẽ nhận được khi sử dụng JavaScript thô
- Mã của bạn sẽ nhẹ vì nó sẽ không có phụ thuộc
- Trang web của bạn sẽ hoạt động tốt hơn. Bạn sẽ không cần tải các tập lệnh và biểu định kiểu bên ngoài
- Bạn sẽ có nhiều quyền kiểm soát hơn. Bạn sẽ xây dựng đồng hồ để hoạt động chính xác theo cách bạn muốn [chứ không phải cố bẻ cong plugin theo ý muốn của bạn]
Vì vậy, không cần phải quảng cáo thêm, đây là cách tạo đồng hồ đếm ngược của riêng bạn chỉ trong 18 dòng JavaScript
Để có kiến thức chuyên sâu về JavaScript, hãy đọc sách của chúng tôi, JavaScript. Tập làm Ninja, Phiên bản 2
Đồng hồ cơ bản. Đếm ngược đến một ngày hoặc thời gian cụ thể
Dưới đây là phác thảo nhanh về các bước liên quan đến việc tạo đồng hồ cơ bản
- Đặt ngày kết thúc hợp lệ
- Tính thời gian còn lại
- Chuyển đổi thời gian sang định dạng có thể sử dụng
- Xuất dữ liệu đồng hồ dưới dạng đối tượng có thể tái sử dụng
- Hiển thị đồng hồ trên trang và dừng đồng hồ khi nó về 0
Đặt ngày kết thúc hợp lệ
Trước tiên, bạn sẽ cần đặt ngày kết thúc hợp lệ. Đây phải là một chuỗi ở bất kỳ định dạng nào được hiểu bởi Ngày của JavaScript. phương pháp phân tích []. Ví dụ
Định dạng ISO 8601
const deadline = '2015-12-31';
Định dạng ngắn
const deadline = '31/12/2015';
Hoặc, định dạng dài
const deadline = 'December 31 2015';
Mỗi định dạng này cho phép bạn chỉ định thời gian và múi giờ chính xác [hoặc phần bù từ UTC trong trường hợp ngày ISO]. Ví dụ
const deadline = 'December 31 2015 23:59:59 GMT+0200';
Bạn có thể đọc thêm về định dạng ngày trong JavaScript trong bài viết này
Tính thời gian còn lại
Bước tiếp theo là tính thời gian còn lại. Chúng ta cần viết một hàm nhận vào một chuỗi biểu thị thời gian kết thúc nhất định [như đã nêu ở trên]. Sau đó, chúng tôi tính toán sự khác biệt giữa thời gian đó và thời gian hiện tại. Đây là những gì trông giống như
function getTimeRemaining[endtime]{
const total = Date.parse[endtime] - Date.parse[new Date[]];
const seconds = Math.floor[ [total/1000] % 60 ];
const minutes = Math.floor[ [total/1000/60] % 60 ];
const hours = Math.floor[ [total/[1000*60*60]] % 24 ];
const days = Math.floor[ total/[1000*60*60*24] ];
return {
total,
days,
hours,
minutes,
seconds
};
}
Đầu tiên, chúng tôi đang tạo một biến
const deadline = 'December 31 2015';
4, để giữ thời gian còn lại cho đến thời hạn. Hàm const deadline = 'December 31 2015';
5 chuyển đổi chuỗi thời gian thành giá trị tính bằng mili giây. Điều này cho phép chúng ta trừ hai lần cho nhau và nhận được khoảng thời gian ở giữaconst total = Date.parse[endtime] - Date.parse[new Date[]];
Chuyển đổi thời gian thành định dạng có thể sử dụng
Bây giờ chúng tôi muốn chuyển đổi mili giây thành ngày, giờ, phút và giây. Hãy sử dụng giây làm ví dụ
________số 8Hãy phá vỡ những gì đang xảy ra ở đây
- Chia mili giây cho 1000 để đổi thành giây.
6const deadline = 'December 31 2015';
- Chia tổng số giây cho 60 và lấy phần còn lại. Bạn không muốn tất cả các giây, chỉ những giây còn lại sau khi số phút đã được tính.
7const deadline = 'December 31 2015';
- Làm tròn số này xuống số nguyên gần nhất. Điều này là do bạn muốn giây đầy đủ, không phải phân số của giây.
8const deadline = 'December 31 2015';
Lặp lại logic này để chuyển đổi mili giây thành phút, giờ và ngày
Xuất dữ liệu đồng hồ dưới dạng đối tượng có thể tái sử dụng
Với ngày, giờ, phút và giây đã được chuẩn bị, giờ đây chúng tôi đã sẵn sàng trả lại dữ liệu dưới dạng đối tượng có thể tái sử dụng
const deadline = '31/12/2015';
2Đối tượng này cho phép bạn gọi hàm của mình và nhận bất kỳ giá trị nào được tính toán. Đây là một ví dụ về cách bạn nhận được số phút còn lại
const deadline = '31/12/2015';
3Thuận tiện, phải không?
Hiển thị đồng hồ và dừng nó khi nó đạt đến số không
Bây giờ chúng ta có một chức năng hiển thị ngày, giờ, phút và giây còn lại, chúng ta có thể xây dựng đồng hồ của mình. Trước tiên, chúng tôi sẽ tạo phần tử HTML sau để giữ đồng hồ của chúng tôi
const deadline = '31/12/2015';
4Sau đó, chúng tôi sẽ viết một hàm xuất dữ liệu đồng hồ bên trong div mới của chúng tôi
const deadline = '31/12/2015';
0Hàm này nhận hai tham số. Đây là id của phần tử chứa đồng hồ của chúng ta và thời gian kết thúc đếm ngược. Bên trong hàm, chúng ta sẽ khai báo một biến
const deadline = 'December 31 2015';
9 và sử dụng nó để lưu trữ một tham chiếu đến div bộ chứa đồng hồ của chúng ta. Điều này có nghĩa là chúng tôi không phải tiếp tục truy vấn DOMTiếp theo, chúng tôi sẽ sử dụng
const deadline = 'December 31 2015 23:59:59 GMT+0200';
0 để thực thi chức năng ẩn danh mỗi giây. Chức năng này sẽ làm như sau- Tính thời gian còn lại
- Xuất thời gian còn lại vào div của chúng tôi
- Nếu thời gian còn lại bằng 0, dừng đồng hồ
Tại thời điểm này, bước duy nhất còn lại là chạy đồng hồ như vậy
const deadline = '31/12/2015';
1Xin chúc mừng. Bây giờ bạn có một đồng hồ cơ bản chỉ trong 18 dòng JavaScript
Chuẩn bị đồng hồ của bạn để hiển thị
Trước khi tạo kiểu cho đồng hồ, chúng ta sẽ cần tinh chỉnh mọi thứ một chút
- Loại bỏ độ trễ ban đầu để đồng hồ của bạn hiển thị ngay lập tức
- Làm cho kịch bản đồng hồ hiệu quả hơn để nó không liên tục xây dựng lại toàn bộ đồng hồ
- Thêm số không đứng đầu như mong muốn
Loại bỏ sự chậm trễ ban đầu
Trong đồng hồ, chúng tôi đã sử dụng
const deadline = 'December 31 2015 23:59:59 GMT+0200';
0 để cập nhật màn hình mỗi giây. Điều này hầu hết thời gian đều ổn, ngoại trừ lúc đầu khi sẽ có độ trễ một giây. Để loại bỏ độ trễ này, chúng tôi sẽ phải cập nhật đồng hồ một lần trước khi khoảng thời gian bắt đầuHãy chuyển chức năng ẩn danh mà chúng ta đang chuyển đến
const deadline = 'December 31 2015 23:59:59 GMT+0200';
0 thành chức năng riêng biệt của nó. Chúng ta có thể đặt tên cho chức năng này là const deadline = 'December 31 2015 23:59:59 GMT+0200';
3. Gọi hàm const deadline = 'December 31 2015 23:59:59 GMT+0200';
3 một lần bên ngoài const deadline = 'December 31 2015 23:59:59 GMT+0200';
0, rồi gọi lại bên trong const deadline = 'December 31 2015 23:59:59 GMT+0200';
0. Bằng cách này, đồng hồ hiển thị mà không bị trễTrong JavaScript của bạn, thay thế này
const deadline = '31/12/2015';
2Với cái này
const deadline = '31/12/2015';
3Tránh liên tục xây dựng lại đồng hồ
Chúng ta cần làm cho kịch bản đồng hồ hiệu quả hơn. Chúng tôi sẽ chỉ muốn cập nhật các số trong đồng hồ thay vì xây dựng lại toàn bộ đồng hồ mỗi giây. Một cách để thực hiện điều này là đặt mỗi số bên trong thẻ
const deadline = 'December 31 2015 23:59:59 GMT+0200';
7 và chỉ cập nhật nội dung của các khoảng đóĐây là HTML
const deadline = '31/12/2015';
4Bây giờ chúng ta hãy tham chiếu đến các phần tử đó. Thêm đoạn mã sau ngay sau khi biến
const deadline = 'December 31 2015';
9 được xác địnhconst deadline = '31/12/2015';
5Tiếp theo, chúng ta cần thay đổi hàm
const deadline = 'December 31 2015 23:59:59 GMT+0200';
3 để chỉ cập nhật các số. Mã mới sẽ trông như thế nàyconst deadline = '31/12/2015';
6Thêm số 0 đứng đầu
Bây giờ đồng hồ không còn xây dựng lại mỗi giây, chúng tôi có một việc nữa phải làm. thêm số 0 đứng đầu. Ví dụ: thay vì đồng hồ hiển thị 7 giây, nó sẽ hiển thị 07 giây. Một cách đơn giản để làm điều này là thêm một chuỗi '0′ vào đầu một số và sau đó cắt bỏ hai chữ số cuối cùng
Ví dụ: để thêm số 0 đứng đầu vào giá trị “giây”, bạn sẽ thay đổi giá trị này
const deadline = '31/12/2015';
7để này
const deadline = '31/12/2015';
8Nếu muốn, bạn cũng có thể thêm các số 0 đứng đầu vào phút và giờ. Nếu bạn đã đi xa đến mức này, xin chúc mừng. Đồng hồ của bạn hiện đã sẵn sàng để hiển thị
Ghi chú. Bạn có thể phải nhấp vào “Chạy lại” trong CodePen để bắt đầu đếm ngược
Xem Bút
Đồng hồ đếm ngược JavaScript được tạo kiểu theo SitePoint [@SitePoint]
trên CodePen.
Đưa nó đi xa hơn
Các ví dụ sau minh họa cách mở rộng đồng hồ cho các trường hợp sử dụng nhất định. Tất cả đều dựa trên ví dụ cơ bản đã thấy ở trên
Lên lịch tự động cho đồng hồ
Giả sử chúng ta muốn đồng hồ hiển thị vào một số ngày nhất định chứ không phải những ngày khác. Ví dụ: chúng tôi có thể có một loạt sự kiện sắp diễn ra và không muốn cập nhật đồng hồ theo cách thủ công mỗi lần. Đây là cách lên lịch trước
Ẩn đồng hồ bằng cách đặt thuộc tính
function getTimeRemaining[endtime]{
const total = Date.parse[endtime] - Date.parse[new Date[]];
const seconds = Math.floor[ [total/1000] % 60 ];
const minutes = Math.floor[ [total/1000/60] % 60 ];
const hours = Math.floor[ [total/[1000*60*60]] % 24 ];
const days = Math.floor[ total/[1000*60*60*24] ];
return {
total,
days,
hours,
minutes,
seconds
};
}
0 của nó thành function getTimeRemaining[endtime]{
const total = Date.parse[endtime] - Date.parse[new Date[]];
const seconds = Math.floor[ [total/1000] % 60 ];
const minutes = Math.floor[ [total/1000/60] % 60 ];
const hours = Math.floor[ [total/[1000*60*60]] % 24 ];
const days = Math.floor[ total/[1000*60*60*24] ];
return {
total,
days,
hours,
minutes,
seconds
};
}
1 trong CSS. Sau đó, thêm phần sau vào hàm function getTimeRemaining[endtime]{
const total = Date.parse[endtime] - Date.parse[new Date[]];
const seconds = Math.floor[ [total/1000] % 60 ];
const minutes = Math.floor[ [total/1000/60] % 60 ];
const hours = Math.floor[ [total/[1000*60*60]] % 24 ];
const days = Math.floor[ total/[1000*60*60*24] ];
return {
total,
days,
hours,
minutes,
seconds
};
}
2 [sau dòng bắt đầu bằng function getTimeRemaining[endtime]{
const total = Date.parse[endtime] - Date.parse[new Date[]];
const seconds = Math.floor[ [total/1000] % 60 ];
const minutes = Math.floor[ [total/1000/60] % 60 ];
const hours = Math.floor[ [total/[1000*60*60]] % 24 ];
const days = Math.floor[ total/[1000*60*60*24] ];
return {
total,
days,
hours,
minutes,
seconds
};
}
3]. Điều này sẽ khiến đồng hồ chỉ hiển thị khi chức năng function getTimeRemaining[endtime]{
const total = Date.parse[endtime] - Date.parse[new Date[]];
const seconds = Math.floor[ [total/1000] % 60 ];
const minutes = Math.floor[ [total/1000/60] % 60 ];
const hours = Math.floor[ [total/[1000*60*60]] % 24 ];
const days = Math.floor[ total/[1000*60*60*24] ];
return {
total,
days,
hours,
minutes,
seconds
};
}
2 được gọiconst deadline = '31/12/2015';
9Tiếp theo, chúng ta có thể chỉ định các ngày mà đồng hồ sẽ hiển thị. Điều này sẽ thay thế biến
function getTimeRemaining[endtime]{
const total = Date.parse[endtime] - Date.parse[new Date[]];
const seconds = Math.floor[ [total/1000] % 60 ];
const minutes = Math.floor[ [total/1000/60] % 60 ];
const hours = Math.floor[ [total/[1000*60*60]] % 24 ];
const days = Math.floor[ total/[1000*60*60*24] ];
return {
total,
days,
hours,
minutes,
seconds
};
}
5const deadline = 'December 31 2015';
0Mỗi phần tử trong mảng
function getTimeRemaining[endtime]{
const total = Date.parse[endtime] - Date.parse[new Date[]];
const seconds = Math.floor[ [total/1000] % 60 ];
const minutes = Math.floor[ [total/1000/60] % 60 ];
const hours = Math.floor[ [total/[1000*60*60]] % 24 ];
const days = Math.floor[ total/[1000*60*60*24] ];
return {
total,
days,
hours,
minutes,
seconds
};
}
6 đại diện cho ngày bắt đầu và ngày kết thúc. Như đã lưu ý ở trên, có thể bao gồm thời gian và múi giờ, nhưng tôi đã sử dụng ngày đơn giản ở đây để giữ cho mã có thể đọc đượcCuối cùng, khi người dùng tải trang, chúng tôi cần kiểm tra xem chúng tôi có ở trong bất kỳ khung thời gian đã chỉ định nào không. Mã này sẽ thay thế lệnh gọi trước đó tới hàm
function getTimeRemaining[endtime]{
const total = Date.parse[endtime] - Date.parse[new Date[]];
const seconds = Math.floor[ [total/1000] % 60 ];
const minutes = Math.floor[ [total/1000/60] % 60 ];
const hours = Math.floor[ [total/[1000*60*60]] % 24 ];
const days = Math.floor[ total/[1000*60*60*24] ];
return {
total,
days,
hours,
minutes,
seconds
};
}
2const deadline = 'December 31 2015';
1Giờ đây, bạn có thể lên lịch trước cho đồng hồ của mình mà không cần phải cập nhật đồng hồ theo cách thủ công. Bạn có thể rút ngắn mã nếu muốn. Tôi đã làm cho tôi dài dòng vì mục đích dễ đọc
Đặt hẹn giờ trong 10 phút kể từ khi người dùng đến
Có thể cần đặt bộ đếm ngược trong một khoảng thời gian nhất định sau khi người dùng đến hoặc bắt đầu một tác vụ cụ thể. Chúng tôi sẽ đặt hẹn giờ trong 10 phút tại đây, nhưng bạn có thể sử dụng bất kỳ khoảng thời gian nào bạn muốn
Tất cả những gì chúng ta cần làm ở đây là thay thế biến
function getTimeRemaining[endtime]{
const total = Date.parse[endtime] - Date.parse[new Date[]];
const seconds = Math.floor[ [total/1000] % 60 ];
const minutes = Math.floor[ [total/1000/60] % 60 ];
const hours = Math.floor[ [total/[1000*60*60]] % 24 ];
const days = Math.floor[ total/[1000*60*60*24] ];
return {
total,
days,
hours,
minutes,
seconds
};
}
5 bằng biến nàyconst deadline = 'December 31 2015';
2Mã này lấy thời gian hiện tại và thêm mười phút. Các giá trị được chuyển đổi thành mili giây, vì vậy chúng có thể được cộng lại với nhau và chuyển thành thời hạn mới
Bây giờ chúng tôi có đồng hồ đếm ngược mười phút kể từ khi người dùng đến. Thoải mái chơi xung quanh và thử các khoảng thời gian khác nhau
Duy trì tiến độ đồng hồ trên các trang
Đôi khi cần duy trì trạng thái của đồng hồ không chỉ cho trang hiện tại. Nếu chúng tôi muốn đặt bộ hẹn giờ 10 phút trên trang web, chúng tôi sẽ không muốn đặt lại bộ hẹn giờ khi người dùng truy cập một trang khác
Một giải pháp là lưu thời gian kết thúc của đồng hồ vào cookie. Bằng cách đó, điều hướng đến một trang mới sẽ không đặt lại thời gian kết thúc thành mười phút kể từ bây giờ
Đây là logic
- Nếu thời hạn được ghi lại trong cookie, hãy sử dụng thời hạn đó
- Nếu không có cookie, hãy đặt thời hạn mới và lưu trữ trong cookie
Để thực hiện điều này, hãy thay thế biến
function getTimeRemaining[endtime]{
const total = Date.parse[endtime] - Date.parse[new Date[]];
const seconds = Math.floor[ [total/1000] % 60 ];
const minutes = Math.floor[ [total/1000/60] % 60 ];
const hours = Math.floor[ [total/[1000*60*60]] % 24 ];
const days = Math.floor[ total/[1000*60*60*24] ];
return {
total,
days,
hours,
minutes,
seconds
};
}
5 bằng biến sauconst deadline = 'December 31 2015';
3Mã này sử dụng cookie và cụm từ thông dụng, cả hai đều là các chủ đề riêng biệt theo cách riêng của chúng. Vì lý do đó, tôi sẽ không đi vào quá nhiều chi tiết ở đây. Một điều quan trọng cần lưu ý là bạn sẽ cần thay đổi
const total = Date.parse[endtime] - Date.parse[new Date[]];
0 thành tên miền thực của mìnhCảnh báo quan trọng về thời gian phía khách hàng
Ngày và giờ JavaScript được lấy từ máy tính của người dùng. Điều đó có nghĩa là người dùng có thể tác động đến đồng hồ JavaScript bằng cách thay đổi thời gian trên máy của họ. Trong hầu hết các trường hợp, điều này sẽ không thành vấn đề. Nhưng trong trường hợp thứ gì đó siêu nhạy cảm, sẽ cần lấy thời gian từ máy chủ. Điều đó có thể được thực hiện với một chút PHP hoặc Ajax, cả hai đều nằm ngoài phạm vi của hướng dẫn này
Sau khi nhận được thời gian từ máy chủ, chúng ta có thể làm việc với nó bằng các kỹ thuật tương tự từ hướng dẫn này
Tổng hợp
Sau khi làm việc qua các ví dụ trong bài viết này, bây giờ bạn đã biết cách tạo đồng hồ đếm ngược của riêng mình chỉ với một số dòng mã vanilla JavaScript. Chúng tôi đã xem xét cách tạo đồng hồ đếm ngược cơ bản và hiển thị nó một cách hiệu quả. Chúng tôi cũng đã đề cập đến việc thêm một số chức năng bổ sung hữu ích, bao gồm lập lịch, thời gian tuyệt đối so với thời gian tương đối và duy trì trạng thái giữa các trang và lượt truy cập trang web bằng cookie
Cái gì tiếp theo?
Chơi xung quanh với mã đồng hồ của bạn. Hãy thử thêm một số kiểu quảng cáo hoặc tính năng mới [chẳng hạn như các nút tạm dừng và tiếp tục]. Sau đó, nếu bạn nghĩ ra bất kỳ mẫu đồng hồ thú vị nào mà bạn muốn chia sẻ, hãy cho chúng tôi biết trên diễn đàn
Chia sẻ bài viết này
Yaphi Berhanu
Yaphi Berhanu là một nhà phát triển web thích giúp mọi người nâng cao kỹ năng viết mã của họ. Anh ấy viết mẹo và thủ thuật tại http. // mã bước đơn giản. com. Theo ý kiến hoàn toàn không thiên vị của mình, anh ấy đề nghị kiểm tra nó
Nilson Jacques
Nilson là một nhà phát triển web toàn diện đã làm việc với máy tính và web trong hơn một thập kỷ. Từng là kỹ thuật viên phần cứng và quản trị viên mạng. Nilson hiện là đồng sáng lập và nhà phát triển của một công ty phát triển các ứng dụng web cho ngành xây dựng. Bạn cũng có thể tìm thấy Nilson trên Diễn đàn SitePoint với tư cách là người cố vấn