Age Calculator
  


  
  

Phần tử điều khiển sẽ chứa các điều khiển của ứng dụng. Nó sẽ chứa các trường nhập để nhập ngày và các nút để tính tuổi

Kết quả sẽ được hiển thị trong phần tử kết quả mà chúng ta đã tạo ở trên

  
  Calculate

Hoàn thành mã HTML

  
  
  
  
  
  



  

    

      
 Age Calculator
      

        
        Calculate
      
      

    
  

  

đầu ra

2. Tạo kiểu máy tính tuổi

Bây giờ, chúng ta sẽ tạo kiểu cho máy tính tuổi. Chúng tôi sẽ tạo một tệp CSS và thêm các quy tắc CSS vào đó

báo cáo quảng cáo này

3. Tạo logic cho máy tính tuổi

Để bắt đầu tạo mã JavaScript cho máy tính tuổi, chúng tôi sẽ bắt đầu với việc chọn các yếu tố mà chúng tôi muốn làm việc với

I. Chọn phần tử cần thiết

Chúng ta sẽ chọn ô nhập ngày tháng, nút tính tuổi và phần tử kết quả

// selecting the elements
var date = document.getElementById('date');
var calculate = document.getElementById('calculate');
var result = document.querySelector('.result');

II. Đặt ngày tối đa cho đến hôm nay

điều đầu tiên cần làm là đặt trường nhập ngày thành ngày tối đa là ngày hôm nay. Chúng tôi sẽ sử dụng thuộc tính

  
 Age Calculator
  


  
  

Chúng tôi cần làm điều này vì trường nhập ngày sẽ không cho phép người dùng nhập ngày trong tương lai vì ngày sinh chỉ có thể trong quá khứ

// set maximum date to today
date.max = new Date().toISOString().split('T')[0];

III. Tạo hàm tính tuổi

Bây giờ, chúng ta cần tạo một hàm để tính tuổi. tên hàm được sử dụng ở đây là 'calculateAge'. Bạn có thể sử dụng bất kỳ tên nào bạn muốn

Chức năng sẽ hoạt động trong 4 giai đoạn. Đầu tiên, nó sẽ tính tuổi thực tế theo năm, sau đó tính theo tháng và sau đó tính theo ngày. Sau đó, trong giai đoạn cuối cùng, nó sẽ hiển thị kết quả

Tính khoảng cách năm chính xác

Khoảng cách năm không thể được tính bằng cách lấy chênh lệch giữa năm sinh và năm hiện tại. Đây là lý do tại sao

Ví dụ: nếu một người sinh vào ngày 5 tháng 5 năm 2000 và vào năm sau vào ngày 1 tháng 1 năm 2001, bạn tính tuổi bằng cách lấy chênh lệch giữa năm thứ i. e (2001 - 2000) và có (tuổi = 1) năm. Sai chỗ nào. Tuổi hiện tại là gần 7 tháng

Vì vậy, để tính khoảng cách năm chúng ta phải xem 2 điều

1. Nếu tháng hiện tại lớn hơn tháng sinh, thì chúng ta có thể tính khoảng cách năm bằng cách lấy hiệu giữa năm hiện tại và năm sinh
2. Nếu tháng hiện tại bằng tháng sinh thì cần tra ngày. Nếu ngày hiện tại lớn hơn ngày sinh, thì chúng ta cũng có thể tính khoảng cách năm bằng cách lấy hiệu giữa năm hiện tại và năm sinh
3. Trong bất kỳ trường hợp nào khác, chúng tôi cần mất ít hơn 1 năm

// calculate exact year gap
var years;
if ( today.getMonth() > birthDate.getMonth() ||
     ( today.getMonth() == birthDate.getMonth() &&
      today.getDate() >= birthDate.getDate()
     )
   ) {
  years = today.getFullYear() - birthDate.getFullYear();
}
else {
  years = today.getFullYear() - birthDate.getFullYear() - 1;
}

Tính khoảng cách tháng chính xác

Tính khoảng cách tháng thật dễ dàng. Ta chỉ cần kiểm tra xem ngày hiện tại có lớn hơn ngày sinh hay bằng ngày sinh hay không thì có thể tính chênh lệch tháng bằng cách lấy hiệu giữa tháng hiện tại và tháng sinh

Nếu không, thì chúng ta cần mất 1 tháng ít hơn

// calculate exact month gap
var months;
if (today.getDate() >= birthDate.getDate()) {
  months = today.getMonth() - birthDate.getMonth();
}
else if (today.getDate() < birthDate.getDate()) {
  months = today.getMonth() - birthDate.getMonth() - 1;
}
// make month positive
months = months < 0 ? months + 12 : months;

Trong trường hợp chúng tôi nhận được các tháng âm, chúng tôi cần làm cho nó trở nên tích cực bằng cách thêm 12 vào nó

Tính khoảng cách ngày chính xác

Tính toán khoảng cách ngày hơi phức tạp vì ngày có thể được phân phối trong 2 tháng khác nhau. Ví dụ: nếu bạn sinh vào ngày 15 tháng 5 và hôm nay là ngày 5 tháng 6, thì đối với khoảng cách ngày, bạn sẽ phải xem xét các ngày của cả tháng 5 và các ngày đã qua trong tháng 6

Vì vậy, bạn phải kiểm tra xem ngày hiện tại có lớn hơn ngày sinh hay bằng ngày sinh không thì bạn có thể tính khoảng cách ngày bằng cách lấy hiệu giữa ngày hiện tại và ngày sinh

Nếu không, hãy trừ ngày hôm nay từ ngày sinh và cộng nó vào các ngày trong tháng sinh. tôi. e

  
 Age Calculator
  


  
  

// calculate exact day gap
var days;
var monthDays = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
if (today.getDate() >= birthDate.getDate()) {
  days = today.getDate() - birthDate.getDate();
} else {
  days = today.getDate() - birthDate.getDate() + monthDays[birthDate.getMonth()];
}

IV. Hiển thị kết quả

Bây giờ, chúng ta cần hiển thị kết quả. Chúng ta sẽ sử dụng thuộc tính

  
 Age Calculator
  


  
  

Bạn cũng có thể chúc mừng sinh nhật người dùng bằng cách kiểm tra xem cả tháng và ngày đều là 0

  
 Age Calculator
  


  
  

V. Thêm trình xử lý sự kiện Nhập phím và tự động lấy nét cho trường nhập ngày

  
 Age Calculator
  


  
  

Một phương pháp khác kém chính xác hơn - Một cách có thể là tìm số mili giây giữa hai ngày và sau đó chuyển đổi nó thành ngày rồi thành năm. Nhưng phương pháp này không chính xác. Khi tuổi tăng lên, nó đưa ra tuổi sai theo ngày (trong khi tuổi theo tháng hoặc năm có thể đúng).

Mã hoàn chỉnh của máy tính tuổi JavaScript

Đây là mã hoàn chỉnh của JavaScript Age Calculator

Thí dụ

  
 Age Calculator
  


  
  

▶ Dùng thử

Phần kết luận

Máy tính tuổi JavaScript là một ứng dụng web đơn giản và dễ sử dụng. Đó là một cách tuyệt vời để học cách sử dụng JavaScript và DOM

II là một dự án JavaScript cấp độ mới bắt đầu đáng để xem qua. Nó sẽ dạy bạn về đối tượng Date trong JavaScript và thao tác DOM

Cách tính tuổi từ ngày trong js?

Làm cách nào để tạo một máy tính tuổi trong JavaScript?

Công thức tính tuổi là gì?

Làm cách nào để tính năm trong JavaScript?