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ô

  • 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ữa

const 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ố 8

Hãy phá vỡ những gì đang xảy ra ở đây

  1. Chia mili giây cho 1000 để đổi thành giây.
    const deadline = 'December 31 2015';
    
    6
  2. 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.
    const deadline = 'December 31 2015';
    
    7
  3. 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.
    const deadline = 'December 31 2015';
    
    8

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';
3

Thuậ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';
4

Sau đó, 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';
0

Hà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 DOM

Tiế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';
1

Xin 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 đầu

Hã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';
2

Với cái này

const deadline = '31/12/2015';
3

Trá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';
4

Bâ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 định

const deadline = '31/12/2015';
5

Tiế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ày

const deadline = '31/12/2015';
6

Thê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';
8

Nế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ọi

const deadline = '31/12/2015';
9

Tiế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
  };
}
5

const deadline = 'December 31 2015';
0

Mỗ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 được

Cuố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
  };
}
2

const deadline = 'December 31 2015';
1

Giờ đâ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ày

const deadline = 'December 31 2015';
2

Mã 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

  1. Nếu thời hạn được ghi lại trong cookie, hãy sử dụng thời hạn đó
  2. 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 sau

const deadline = 'December 31 2015';
3

Mã 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ình

Cả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

JavaScript đếm ngược ngày, giờ, phút giâ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ó

    JavaScript đếm ngược ngày, giờ, phút giây

    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