JavaScript đếm ngược ngày, giờ, phút giây
Đô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ô Show
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ệ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
Định dạng ngắn
Hoặc, định dạng dài
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ụ
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ạiBướ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ư
Đầu tiên, chúng tôi đang tạo một biến 4, để giữ thời gian còn lại cho đến thời hạn. Hàm 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ữa
Chuyển đổi thời gian thành định dạng có thể sử dụngBâ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
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ụngVớ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 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 3Thuận tiện, phải không? Hiển thị đồng hồ và dừng nó khi nó đạt đến số khôngBâ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 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 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 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 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ại thời điểm này, bước duy nhất còn lại là chạy đồng hồ như vậy 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ỏ sự chậm trễ ban đầuTrong đồng hồ, chúng tôi đã sử dụng 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 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à 3. Gọi hàm 3 một lần bên ngoài 0, rồi gọi lại bên trong 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 2Với cái này 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ẻ 7 và chỉ cập nhật nội dung của các khoảng đóĐây là HTML 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 9 được xác định 5Tiếp theo, chúng ta cần thay đổi hàm 3 để chỉ cập nhật các số. Mã mới sẽ trông như thế này 6Thêm số 0 đứng đầuBâ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 7để này 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 Đưa nó đi xa hơnCá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 0 của nó thành 1 trong CSS. Sau đó, thêm phần sau vào hàm 2 (sau dòng bắt đầu bằng 3). Điều này sẽ khiến đồng hồ chỉ hiển thị khi chức năng 2 được gọi 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 5 0Mỗi phần tử trong mảng 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 2 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 đếnCó 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 5 bằng biến này 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
Để thực hiện điều này, hãy thay thế biến 5 bằng biến sau 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 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àngNgà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ợpSau 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àyYaphi 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 |