Hướng Dẫn Chia Sẻ Mã Code Đồng Hồ và Lời Chào Theo Thời Gian Thực Cho Website/Blogspot

Bạn đang tìm cách tạo sự chú ý đặc biệt cho trang web hoặc blog của mình? Việc thêm đồng hồ và lời chào theo thời gian thực có thể là một lựa chọn tuyệt vời! Trong bài viết này, chúng tôi sẽ hướng dẫn bạn cách chia sẻ mã code để thêm đồng hồ và lời chào vào trang web của bạn, cùng với việc giải đáp một số câu hỏi phổ biến.

Bước 1: Coppy toàn bộ đoạn code bên dưới dán vào trên thẻ </style> hoặc </body>

<style>
.greet:before{ content: "";
position: absolute;
top: -57px;
background: #cecceb75;
right: -30px;z-index:9;
width: 130px;box-shadow:0 14px 10px -7px blue;
overflow: hidden;
height: 122px;
z-index: 0;
border-radius: 50%;
}
.greet{position:relative;
display: inline-block;
font-size: 2rem; box-shadow:0 14px 10px -7px blue; overflow: hidden;
font-weight: bold;
border: 2px solid blue;
padding: 10px 20px;
border-radius: 5px;
transition: ease-in-out 0.1s;
transition-property: background, box-shadow, color;
}.greet p{margin:0; font-size: 14px;}
.say{
padding-top: 9px;}

p.time{font-weight:bold;font-size: 24px!important;color:blue;display: inline-block; padding-bottom: 9px; border-bottom: 1px solid #ccc;}

</style>

<div class="saying">
<div class="greet"></div></div>


<script>
const container = document.querySelector(".greet");

function updateTime() {
    const timeNow = new Date();
    const hours = timeNow.getHours();
    const minutes = timeNow.getMinutes();
    const seconds = timeNow.getSeconds();
    const ampm = hours >= 12 ? "PM" : "AM";
    const hours12 = hours % 12 || 12;

    let greeting, additionalMessage;

    if (hours >= 5 && hours < 10) {
        greeting = "Chào buổi sáng!";
        additionalMessage = "Chúc bạn có một ngày mới tốt lành!";
    } else if (hours >= 10 && hours < 13) {
        greeting = "Chào buổi trưa!";
        additionalMessage = "Trưa rồi nghỉ ngơi bạn nhé!";
    } else if (hours >= 13 && hours < 17) {
        greeting = "Chào buổi chiều!";
        additionalMessage = "Buổi chiều tràn đầy niềm vui!";
    } else if (hours >= 17 && hours < 18) {
        greeting = "Sắp tối rồi!";
        additionalMessage = "Chuẩn bị ăn cơm được rồi!";
    } else if (hours >= 18 && hours < 21) {
        greeting = "Chào buổi tối!";
        additionalMessage = "Bạn đã ăn cơm chưa?";
    } else if (hours >= 21 && hours < 22) {
        greeting = "Chúc bạn ngủ ngon!";
        additionalMessage = "Có một giấc mơ đẹp nhé!";
    } else if (hours >= 22 && hours <= 24) {
        greeting = "Bạn ơi!";
        additionalMessage = "Ngủ sớm giữ gìn sức khỏe nhé!";
    } else if (hours >= 0 && hours < 5) {
        greeting = "Chào buổi sáng!";
        additionalMessage = "Chúc bạn một ngày vui vẻ!";
    }

    container.innerHTML = `
        <p class="time">${hours12}:${minutes.toString().padStart(2, '0')} ${ampm}</p>
        <p class="say">${greeting}</p>
        <p>${additionalMessage}</p>
    `;
}

// Gọi ban đầu để thiết lập thời gian
updateTime();

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

</script>

Bước 2: Lưu lại xem thành quả