Nội dung

36.4 DOM JavaScript Digital Clock - Hiển thị thời gian thực với DOM - học DOM JavaScript qua Ví dụ

Trong video này, chúng ta sẽ tìm hiểu cách sử dụng JavaScript để tạo ra một đồng hồ số đơn giản trên trình duyệt web. Chúng ta sẽ bắt đầu bằng cách tạo một hàm JavaScript được gọi là `updateClock()`. Hàm này sẽ được gọi mỗi giây để cập nhật thời gian hiện tại trên đồng hồ. Chúng ta sẽ sử dụng đối tượng `Date` trong JavaScript để lấy thời gian hiện tại. Sau đó, chúng ta sẽ tạo ra các biến để lấy giờ, phút và giây hiện tại từ đối tượng `Date`. Để đảm bảo rằng số lượng chữ số cho giờ, phút và giây luôn là hai chữ số, chúng ta sử dụng phương thức `padStart()` của chuỗi. Tiếp theo, chúng ta sẽ tạo một chuỗi thời gian từ các biến đã được tạo và định dạng nó theo định dạng "hh:mm:ss". Sau đó, chúng ta sẽ cập nhật nội dung của một phần tử HTML có id là "clock" bằng cách sử dụng phương thức `innerHTML`. Cuối cùng, chúng ta sẽ sử dụng hàm `setInterval()` để gọi hàm `updateClock()` mỗi giây, giúp đồng hồ tự động cập nhật mà không cần tải lại trang. Qua video này, bạn sẽ hiểu cách sử dụng JavaScript để tạo ra các ứng dụng đơn giản nhưng hữu ích trên web, đồng thời nắm vững cách sử dụng các hàm và phương thức cơ bản của JavaScript để thực hiện các tác vụ như hiển thị thời gian thực.