Hiển thị ngày và giờ hiện tại trong thẻ H1 bằng JavaScript DOM

Ngày và giờ là những thông tin cơ bản nhưng rất quan trọng trong các ứng dụng web. Việc hiển thị thời gian chính xác không chỉ giúp người dùng theo dõi tiến độ công việc mà còn tăng tính tương tác của trang web. Trong bài tập này, chúng ta sẽ tìm hiểu cách sử dụng JavaScript để lấy ngày và giờ hiện tại của hệ thống, đồng thời cập nhật chúng một cách động vào giao diện người dùng thông qua thẻ <h1>.

Thông qua bài tập này, bạn sẽ làm quen với cách sử dụng đối tượng Date trong JavaScript để lấy và xử lý thông tin thời gian. Đồng thời, bạn cũng sẽ học cách sử dụng DOM để thay đổi nội dung của trang web, một kỹ năng quan trọng khi phát triển ứng dụng web tương tác. Bài tập này không chỉ đơn giản là hiển thị thời gian mà còn giúp bạn hiểu rõ hơn về cách thức hoạt động của JavaScript trong việc thao tác với các phần tử HTML, tạo ra một giao diện người dùng năng động và thân thiện.

Yêu cầu bài tập cách sử dụng đối tượng Date trong JavaScript

Lấy ngày và giờ hiện tại

Sử dụng đối tượng Date để lấy thời gian hệ thống:

• JavaScript cung cấp đối tượng Date để làm việc với ngày và giờ. Để lấy thời gian hiện tại của hệ thống, bạn có thể tạo một đối tượng Date mới mà không cần tham số, điều này sẽ trả về thời gian hệ thống hiện tại.

• Ví dụ:

const now = new Date();

Đoạn mã trên sẽ tạo ra một đối tượng now chứa thông tin ngày và giờ hiện tại.

Định dạng thời gian thành chuỗi dễ đọc:

• Sau khi có đối tượng Date, bạn cần lấy các thông tin ngày, giờ, phút và giây theo định dạng dễ hiểu. Bạn có thể sử dụng các phương thức như .getDate(), .getMonth(), .getFullYear(), .getHours(), .getMinutes(), .getSeconds() để lấy các phần cụ thể của thời gian.

• Ví dụ, để hiển thị thời gian theo định dạng "ngày/tháng/năm giờ:phút:giây":

const day = now.getDate();
const month = now.getMonth() + 1;  // Tháng trong JavaScript bắt đầu từ 0
const year = now.getFullYear();
const hours = now.getHours();
const minutes = now.getMinutes();
const seconds = now.getSeconds();

const formattedTime = `${day}/${month}/$2025 ${hours}:${minutes}:${seconds}`;
console.log(formattedTime);

Kết quả: Chuỗi thời gian sẽ có định dạng ví dụ như "28/04/2025 14:35:20".

Hiển thị thời gian trong thẻ <h1>

Cập nhật nội dung của thẻ <h1> để hiển thị ngày và giờ hiện tại bằng JavaScript:

• Sau khi có chuỗi thời gian đã được định dạng, bạn sẽ cần hiển thị thời gian này trong một phần tử HTML trên trang web. Để làm điều này, bạn sử dụng phương thức DOM document.getElementById() để chọn thẻ <h1> và sau đó thay đổi nội dung của thẻ bằng cách sử dụng thuộc tính innerText hoặc innerHTML.

• Ví dụ, nếu bạn có thẻ <h1> trong HTML như sau:

<h1 id="time"></h1>

Trong JavaScript, bạn có thể sử dụng đoạn mã sau để cập nhật thẻ <h1>:

document.getElementById('time').innerText = formattedTime;

Khi chạy mã, thời gian sẽ được hiển thị trong thẻ <h1>.

Cập nhật thời gian liên tục (nếu cần)

Sử dụng setInterval() để làm mới thời gian mỗi giây:

• Để cập nhật thời gian mỗi giây mà không cần tải lại trang, bạn có thể sử dụng hàm setInterval(). Hàm này cho phép bạn chạy một đoạn mã sau một khoảng thời gian định sẵn, ví dụ mỗi giây.

• Đoạn mã dưới đây sẽ gọi lại hàm cập nhật thời gian mỗi giây:

setInterval(function() {
    const now = new Date();
    const day = now.getDate();
    const month = now.getMonth() + 1;
    const year = now.getFullYear();
    const hours = now.getHours();
    const minutes = now.getMinutes();
    const seconds = now.getSeconds();

    const formattedTime = `${day}/${month}/$2025 ${hours}:${minutes}:${seconds}`;
    document.getElementById('time').innerText = formattedTime;
}, 1000); // Cập nhật mỗi giây (1000 milliseconds)

Giải thích:

• Hàm setInterval() sẽ gọi hàm cập nhật thời gian sau mỗi 1000 mili giây (1 giây). Điều này giúp đồng hồ hiển thị thời gian chính xác và tự động cập nhật.

• Mỗi khi thời gian được cập nhật, nội dung của thẻ <h1> sẽ thay đổi để hiển thị thời gian mới nhất.

Hướng dẫn cách sử dụng đối tượng Date trong JavaScript

Tạo file HTML cơ bản

Mục tiêu: Tạo một file HTML đơn giản có thẻ <h1> nơi sẽ hiển thị thời gian hiện tại.

Cách thực hiện:

Ví dụ cấu trúc HTML cơ bản:

• Mở trình soạn thảo văn bản (Text Editor) như Visual Studio Code, Sublime Text, hoặc bất kỳ công cụ nào bạn ưa thích.

• Tạo một file HTML mới, ví dụ index.html.

• Cấu trúc HTML cơ bản bao gồm phần tiêu đề, body và thẻ <h1> để hiển thị thời gian.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hiển thị ngày và giờ hiện tại</title>
</head>
<body>
    <h1 id="time"></h1>
    <script src="script.js"></script>
</body>
</html>

Trong đoạn mã trên, thẻ <h1 id="time"></h1> sẽ là nơi hiển thị thời gian hiện tại. Bạn có thể thay đổi nội dung trong thẻ này bằng JavaScript.

Chúng ta sẽ viết mã JavaScript trong file script.js, được liên kết trong thẻ <script>.

Lấy thời gian hiện tại bằng JavaScript

Mục tiêu: Sử dụng đối tượng Date trong JavaScript để lấy thời gian hiện tại của hệ thống và chuyển nó thành chuỗi dễ đọc.

Cách thực hiện:

Ví dụ mã JavaScript lấy thời gian và định dạng:

• Tạo một đối tượng Date trong JavaScript để lấy thời gian hệ thống.

• Dùng các phương thức của đối tượng Date như .getDate(), .getMonth(), .getFullYear(), .getHours(), .getMinutes(), .getSeconds() để lấy các phần của ngày giờ.

• Định dạng các giá trị lấy được thành một chuỗi thời gian dễ đọc, ví dụ: "28/04/2025 14:35:20".

const now = new Date(); // Lấy thời gian hiện tại
const day = now.getDate(); // Lấy ngày
const month = now.getMonth() + 1; // Lấy tháng (tháng bắt đầu từ 0, nên cộng thêm 1)
const year = now.getFullYear(); // Lấy năm
const hours = now.getHours(); // Lấy giờ
const minutes = now.getMinutes(); // Lấy phút
const seconds = now.getSeconds(); // Lấy giây

// Định dạng thời gian thành chuỗi dễ đọc
const formattedTime = `${day}/${month}/$2025 ${hours}:${minutes}:${seconds}`;

Cập nhật thời gian vào thẻ <h1>

Mục tiêu: Sử dụng DOM để cập nhật nội dung của thẻ <h1> với thời gian đã lấy.

Cách thực hiện:

Ví dụ mã JavaScript cập nhật thời gian vào thẻ <h1>:

• Sử dụng phương thức document.getElementById() để truy cập thẻ <h1> có id="time".

• Cập nhật nội dung của thẻ bằng thuộc tính innerText với chuỗi thời gian đã định dạng.

document.getElementById('time').innerText = formattedTime;

Mã này sẽ hiển thị thời gian trong thẻ <h1> với id="time".

Cập nhật thời gian liên tục (nếu cần)

Mục tiêu: Sử dụng setInterval() để làm mới thời gian mỗi giây và cập nhật lại thẻ <h1>.

Cách thực hiện:

Ví dụ mã JavaScript cập nhật thời gian mỗi giây:

• Để hiển thị thời gian thực và tự động cập nhật, bạn có thể sử dụng setInterval() để gọi hàm cập nhật thời gian mỗi giây.

• Hàm setInterval() sẽ thực thi một hàm sau mỗi khoảng thời gian nhất định (ở đây là 1000 mili giây, tức 1 giây).

setInterval(function() {
    const now = new Date(); // Lấy thời gian hiện tại
    const day = now.getDate();
    const month = now.getMonth() + 1;
    const year = now.getFullYear();
    const hours = now.getHours();
    const minutes = now.getMinutes();
    const seconds = now.getSeconds();

    // Định dạng thời gian
    const formattedTime = `${day}/${month}/$2025 ${hours}:${minutes}:${seconds}`;

    // Cập nhật thời gian vào thẻ <h1>
    document.getElementById('time').innerText = formattedTime;
}, 1000); // Cập nhật mỗi giây

Trong đoạn mã này, hàm setInterval() sẽ gọi hàm mỗi giây, cập nhật thời gian mới vào thẻ <h1>.

Gợi ý cách sử dụng đối tượng Date trong JavaScript

Tạo file HTML đơn giản có thẻ <h1>

Mục tiêu: Tạo một file HTML cơ bản với cấu trúc đơn giản có thẻ <h1> để hiển thị thời gian hiện tại.

Cách thực hiện:

Cấu trúc HTML cơ bản:

• Mở trình soạn thảo văn bản (Text Editor) như Visual Studio Code, Sublime Text, hoặc Notepad++.

• Tạo một file HTML mới, ví dụ index.html.

• Tạo một cấu trúc HTML cơ bản với thẻ <h1> để hiển thị thời gian.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hiển thị ngày và giờ hiện tại</title>
</head>
<body>
    <h1 id="time"></h1> <!-- Thẻ h1 để hiển thị thời gian -->
    <script src="script.js"></script> <!-- Liên kết file JavaScript -->
</body>
</html>

Thẻ <h1 id="time"></h1> sẽ là nơi hiển thị thời gian. Bạn có thể thay đổi nội dung của thẻ này bằng JavaScript.

Thẻ <script src="script.js"></script> sẽ liên kết mã JavaScript của bạn từ file script.js, nơi bạn sẽ viết mã cập nhật thời gian.

Thêm mã JavaScript vào trong file HTML

Mục tiêu: Sử dụng mã JavaScript để lấy thời gian hệ thống và cập nhật nội dung của thẻ <h1>.

Cách thực hiện:

Đoạn mã JavaScript để lấy thời gian và cập nhật vào thẻ <h1>:

• Tạo một file JavaScript mới, ví dụ script.js.

• Viết một hàm JavaScript để lấy thời gian hiện tại và cập nhật vào thẻ <h1>.

function updateTime() {
    const now = new Date(); // Lấy thời gian hiện tại
    const hours = now.getHours(); // Lấy giờ
    const minutes = now.getMinutes(); // Lấy phút
    const seconds = now.getSeconds(); // Lấy giây

    // Định dạng chuỗi thời gian
    const timeString = `${hours}:${minutes}:${seconds}`;

    // Cập nhật nội dung của thẻ <h1> với thời gian đã lấy
    document.getElementById('time').innerText = timeString;
}

// Gọi hàm updateTime mỗi giây để cập nhật thời gian liên tục
setInterval(updateTime, 1000); // 1000 ms = 1 giây

Giải thích đoạn mã:

• setInterval(updateTime, 1000); sẽ gọi hàm updateTime() mỗi giây để cập nhật thời gian liên tục trên giao diện.

• document.getElementById('time').innerText = timeString; cập nhật thẻ <h1> với nội dung thời gian.

• Chuỗi thời gian được định dạng thành "giờ:phút:giây" bằng cách sử dụng cú pháp ${}.

• Các phương thức .getHours(), .getMinutes(), .getSeconds() được sử dụng để lấy giờ, phút và giây từ đối tượng Date.

• const now = new Date(); lấy đối tượng Date hiện tại.

• Hàm updateTime() được tạo ra để lấy thời gian hiện tại mỗi lần được gọi.

Cập nhật thời gian liên tục

Mục tiêu: Đảm bảo thời gian được hiển thị liên tục và tự động cập nhật mỗi giây.

Cách thực hiện:

Đoạn mã JavaScript sử dụng setInterval() để cập nhật liên tục:

• Để cập nhật thời gian mỗi giây mà không cần phải tải lại trang, bạn có thể sử dụng setInterval() trong JavaScript.

• setInterval() là một hàm cho phép bạn gọi một hàm nào đó sau mỗi khoảng thời gian xác định (thời gian tính bằng mili giây). Cụ thể, bạn sẽ gọi hàm updateTime() mỗi giây (1000 mili giây).

• Với cách này, mỗi giây, hàm updateTime() sẽ được thực thi, giúp thời gian hiển thị trên trang luôn được cập nhật.

setInterval(updateTime, 1000); // Cập nhật mỗi giây (1000 ms)

Mỗi khi gọi lại hàm updateTime(), nó sẽ lấy thời gian mới và cập nhật lại nội dung thẻ <h1> với thời gian hiện tại, làm cho đồng hồ luôn chính xác.

Mở rộng cách sử dụng đối tượng Date trong JavaScript

Định dạng ngày và giờ

Mục tiêu: Cải tiến cách hiển thị thời gian theo các định dạng khác nhau, giúp hiển thị ngày và giờ dễ đọc và rõ ràng hơn.

Cách thực hiện:

Đoạn mã JavaScript định dạng ngày và giờ:

• Bên cạnh việc hiển thị giờ, bạn có thể thêm ngày tháng vào trong chuỗi thời gian.

• Bạn có thể hiển thị ngày theo định dạng ngày/tháng/năm và giờ theo định dạng "Giờ:Phút:Giây".

• Ví dụ, thay vì chỉ hiển thị "15:30:45", bạn có thể hiển thị "Ngày 28/04/2025 15:30:45".

function updateTime() {
    const now = new Date();
    
    const day = now.getDate(); // Lấy ngày
    const month = now.getMonth() + 1; // Lấy tháng (nhớ cộng thêm 1 vì tháng bắt đầu từ 0)
    const year = now.getFullYear(); // Lấy năm
    const hours = now.getHours(); // Lấy giờ
    const minutes = now.getMinutes(); // Lấy phút
    const seconds = now.getSeconds(); // Lấy giây
    
    // Định dạng thời gian thành "Ngày 28/04/2025 15:30:45"
    const timeString = `Ngày ${day}/${month}/$2025 ${hours}:${minutes}:${seconds}`;
    
    document.getElementById('time').innerText = timeString;
}

Giải thích:

• Bạn có thể sử dụng cú pháp Ngày ${day}/${month}/$2025 ${hours}:${minutes}:${seconds} để tạo ra chuỗi thời gian đầy đủ với ngày tháng và giờ.

• Việc định dạng này giúp thời gian hiển thị dễ đọc hơn và bao quát tất cả thông tin về ngày giờ.

Thêm múi giờ

Mục tiêu: Hiển thị thời gian theo múi giờ cụ thể, hoặc theo múi giờ của người dùng.

Cách thực hiện:

Ví dụ mã hiển thị thời gian theo múi giờ UTC:

• JavaScript cung cấp phương thức Intl.DateTimeFormat() để hỗ trợ hiển thị thời gian theo múi giờ của người dùng hoặc múi giờ xác định.

• Bạn có thể sử dụng getTimezoneOffset() để lấy chênh lệch múi giờ giữa giờ địa phương và UTC. Hoặc bạn có thể dùng thư viện như moment.js để xử lý múi giờ dễ dàng hơn.

• Bạn có thể hiển thị thời gian theo múi giờ GMT, hoặc chuyển đổi múi giờ cho phù hợp với người dùng.

function updateTime() {
    const now = new Date();
    
    const day = now.getDate();
    const month = now.getMonth() + 1;
    const year = now.getFullYear();
    const hours = now.getUTCHours(); // Lấy giờ UTC
    const minutes = now.getUTCMinutes(); // Lấy phút UTC
    const seconds = now.getUTCSeconds(); // Lấy giây UTC

    // Định dạng thời gian thành "Ngày 28/04/2025 15:30:45 UTC"
    const timeString = `Ngày ${day}/${month}/$2025 ${hours}:${minutes}:${seconds} UTC`;

    document.getElementById('time').innerText = timeString;
}

Giải thích:

• Sử dụng các phương thức getUTCHours(), getUTCMinutes(), và getUTCSeconds() để lấy thời gian theo múi giờ UTC.

• Hiển thị "UTC" sau thời gian để rõ ràng múi giờ là UTC.

Chuyển đổi sang 12 giờ hoặc 24 giờ

Mục tiêu: Cho phép chuyển đổi giữa định dạng 12 giờ và 24 giờ theo yêu cầu.

Cách thực hiện:

Ví dụ mã JavaScript chuyển đổi giữa định dạng 24 giờ và 12 giờ:

• Để hiển thị thời gian theo định dạng 12 giờ, bạn cần xác định "AM" hoặc "PM" dựa trên giá trị giờ.

• Để chuyển từ 24 giờ sang 12 giờ, bạn cần kiểm tra nếu giờ lớn hơn hoặc bằng 12, và sau đó điều chỉnh lại giá trị giờ và thêm "AM" hoặc "PM".

function updateTime() {
    const now = new Date();
    
    const day = now.getDate();
    const month = now.getMonth() + 1;
    const year = now.getFullYear();
    let hours = now.getHours();
    const minutes = now.getMinutes();
    const seconds = now.getSeconds();
    
    // Kiểm tra nếu giờ lớn hơn 12, chuyển sang 12 giờ
    let period = 'AM'; // Mặc định là AM
    if (hours >= 12) {
        period = 'PM'; // Nếu giờ >= 12, là PM
        if (hours > 12) {
            hours -= 12; // Chuyển sang 12 giờ
        }
    }

    // Định dạng thời gian thành "Ngày 28/04/2025 03:30:45 PM"
    const timeString = `Ngày ${day}/${month}/$2025 ${hours}:${minutes}:${seconds} ${period}`;
    
    document.getElementById('time').innerText = timeString;
}

Giải thích:

• Hàm updateTime() chuyển đổi giờ từ 24 giờ sang 12 giờ, đồng thời thêm ký hiệu "AM" hoặc "PM" vào cuối chuỗi.

• Nếu giờ là 12 hoặc hơn, chúng ta sẽ gắn thêm "PM", nếu không, sẽ là "AM".

Kết bài

Trong bài tập này, chúng ta đã học cách sử dụng JavaScript để lấy và hiển thị ngày và giờ hiện tại trên trang web. Qua việc thao tác với đối tượng Date và các phương thức liên quan, chúng ta đã có thể lấy thời gian từ hệ thống và hiển thị nó trên giao diện người dùng. Đồng thời, việc sử dụng DOM để cập nhật nội dung của thẻ <h1> giúp chúng ta hiểu rõ hơn về cách làm việc với các phần tử HTML từ JavaScript.

Ngoài ra, chúng ta cũng đã mở rộng bài tập bằng cách thêm các tính năng như định dạng thời gian linh hoạt, hiển thị theo múi giờ và chuyển đổi giữa định dạng 12 giờ và 24 giờ. Các kỹ thuật này không chỉ giúp cải thiện khả năng lập trình JavaScript mà còn làm cho ứng dụng trở nên thân thiện và dễ sử dụng hơn.

Việc thực hành này sẽ giúp các bạn củng cố kỹ năng JavaScript cơ bản và làm quen với việc thao tác với thời gian, điều rất quan trọng trong các ứng dụng web thực tế. Chúc các bạn thành công và có thể áp dụng những kiến thức đã học vào các dự án của mình!