Share code đồng hồ và kèm lời chào theo thời gian thực cho website/blogspot

Bạn muốn tạo điểm nhấn thú vị 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 là một ý tưởng tuyệt vời! Trong bài viết này, chúng ta sẽ hướng dẫn bạn cách chia sẻ mã code đồng hồ và lời chào, cùng với một số câu hỏi thường gặp.

Share code đồng hồ và kèm lời chào theo thời gian thực cho website/blogspot

Các bước tạo đồng hồ

Bước 1: Thêm đoạn CSS dưới đây để làm đẹp đồng hồ.

<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>

Bước 2: Thêm javascript get thời gian và lời chào, lời chúc.

<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 3: Bạn muốn đặt đồng hồ ở vị trí nào thì đặt đoạn code dưới đây để hiển thị.

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

Bước 4: Lưu lại và tận hưởng thành quả!

Code đầy đủ
Dành cho những bạn sử dụng landing page, blogger hoặc trang tĩnh → chèn toàn bộ code dưới đây vào phần muốn hiển thị là xong!

<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>

Kết luận

Trong bài viết này, chúng ta đã tìm hiểu cách tạo đồng hồ và lời chào theo thời gian thực cho website/blogspot một cách đơn giản và hiệu quả. Việc thêm tính năng này không chỉ tạo điểm nhấn thú vị mà còn cung cấp thông tin hữu ích về thời gian cho người dùng. Bằng cách tuân thủ các hướng dẫn và điều chỉnh mã code một cách linh hoạt, bạn có thể tạo ra một trải nghiệm độc đáo và hấp dẫn trên trang web của mình. Hãy thử ngay và tận dụng những lợi ích mà tính năng này mang lại cho website/blogspot của bạn!