Kha khá website và ứng dụng bây giờ có một lời chào người dùng ở landing page, giống như “Good morning, Phuc Nguyen dep trai“. Bạn cũng có thể lập trình chức năng này bằng một số dòng lệnh đơn giản như sau đây blog sẽ trình bày ^^.

Trong HTML, tạo một thẻ div với id là greeting

<div id="greeting"></div>

Sau đó, trong JavaScript, chúng ta sẽ sử dụng phương thức getHours() sau khi tạo một đối tượng mới kiểu Date. Với logic đơn giản như là:

• 0:00 – 12:00: buổi sáng.
• 12:00 – 18:00: buổi chiều.
• 18:00 – 0:00: buổi tối.

ta sẽ so sánh giá trị mà phương thức trên trả về với các thời gian đã nêu, sau đó truyền lại thông tin lời chào cho thẻ div greeting ở trên.

Code JS như sau:

<script>
    const greeting = document.getElementById("greeting");
    const hour = new Date().getHours();
    const welcomeTypes = ["Chào buổi sáng ", "Chào buổi chiều, ", "Chào buổi tổi "];
    let welcomeText = "";
    if (hour < 12) welcomeText = welcomeTypes[0];
    else if (hour < 18) welcomeText = welcomeTypes[1];
    else welcomeText = welcomeTypes[2];
    greeting.innerHTML = welcomeText;
  </script>